資料庫程式設計 – 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 關聯圖

 

資料庫程式設計：

 

 

 

翻轉電子書系列：