資料庫程式設計 – PHP+MySQL 第 三 章 HTML 語言  一頁    下一頁

 

3-3 表格製作

內容:

  • 3-3-1 表格標籤格式

  • 3-3-2 程式範例:製作報價單

3-3-1 表格標籤格式

表格是製作文件比較複雜的工作之一,它必須設定整體表格的寬(width)、高(height)、表格線的大小(border),接著再設定表格內各個列(<tr>… </tr>),以及每一列的欄位(<td> … </td>)。基本程式架構如下:

<table width=表格寬” height=”表格高” border=”線粗” >   (整體表格宣告)

   <tr>    (第一列)

       <td> 第一列第一欄內容 </td>

       <td> 第一列第二欄內容 </td>

   </tr>   (第一列結束)

   <tr>    (第二列開始)

       <tr> 第二列第一欄內容 </td>

       <tr> 第二列第二欄內容 </td>

    </tr>   (第二列結束)

</table>       (表格宣告結束)

3-3-2 程式範例:製作報價單

(A) 網頁功能: Ex3_3.html

吾人需要製作一張報價單的網頁,期望期格式如下:

 (B) 製作技巧:

製作表格之前,必須算出表格到底多大,一般都是用 wide() height () 來規劃表格大小,但它的單位是甚麼呢?這與螢幕的解析度有關,譬如圖 3-2 是觀察筆者的螢幕 (1920*1080),則表示寬=1920 像素(pixels) 、高=1080像素。表格大小是表式要在螢幕上顯示多大,因此設計表格就是以像素(pix)為單位。

 (C) 程式範例(利用 Notepad++ 輸入,並儲存為 “Ex3_3.html”)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

43

35

36

37

38

39

40

41

42

43

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />

<title>很大間公司報價單</title>

</head>

<body>

    <table width=”400” height=”120” border=”1”>

       <tr><td><div align=”center”>    《備註:第一行、一個欄位》

               很大間公司報價單

      </div></td></tr>

       <tr><div align=”center”>      《備註:第二行、四個欄位》

           <td> </td>

           <td> </td>

           <td> </td>

           <td> </td>

       </tr></div>

       <tr>                        《備註:第三行、四個欄位》

           <td>筆記簿</td>

           <td>20</td>

           <td>10</td>

           <td>200</td>

       </tr>

       <tr>                          《備註:第四行、四個欄位》

           <td>簽字筆</td>

           <td>10</td>

           <td>30</td>

           <td>300</td>

       </tr>

       <tr>                            《備註:第五行、四個欄位》

           <td>布告板</td>

           <td>300</td>

           <td>2</td>

           <td>600</td>

       </tr>

       <tr>

           <td>合計</td>

           <td></td>

           <td></td>

           <td>1100</td>

       </tr>       

</table>

</body>

</html>

(D) 程式說明:

(1) 7~41 <table> … </table>:製作表格範圍,其中,<table width="400" height="120" border="1"> 是規畫表格的大小。

翻轉工作室:粘添壽

course_db 關聯圖

 

資料庫程式設計 - PHP+MySQL:

 

 

 

翻轉電子書系列: