表格 (Table).

Presentation on theme: "表格 (Table)."— Presentation transcript:

1 表格 (Table)

2 一列: <tr> …</tr> 一個欄位: <td>…</td>
在網頁原始檔中，需由上而下逐列書寫 <table border="1"> <caption>人事資料</caption> <tr> <th>姓名</th> <th>年齡</th> <th>電話</th> </tr> <td>李大華</td> <td>25</td> <td> </td> <td>陳小明</td> <td>21</td> <td> </td> … </table> 一個表格(table)包含多列(tr)，每一列包含多個欄位(td或th) 一列: <tr> …</tr> 一個欄位: <td>…</td> 標題欄位: <th>…</th>

3 合併儲存格 <td colspan="2">r1, c1& c2</td> 合併欄 (colspan)
<table border="1" width="500"> <tr> <td>r1, c1</td> <td>r1, c2</td> <td>r1, c3</td> </tr> <td>r2, c1</td> <td>r2, c2</td> <td>r2, c3</td> <td>r3, c1</td> <td>r3, c2</td> <td>r3, c3</td> </table> 刪除 <td colspan="2">r1, c1& c2</td>

4 合併儲存格 刪除 <td rowspan="2">r1&r2, c1</td> 合併列 (rowspan)
<table border="1" width="500"> <tr> <td>r1, c1</td> <td>r1, c2</td> <td>r1, c3</td> </tr> <td>r2, c1</td> <td>r2, c2</td> <td>r2, c3</td> <td>r3, c1</td> <td>r3, c2</td> <td>r3, c3</td> </table> <td rowspan="2">r1&r2, c1</td> 刪除

5 儲存格間距與內距 儲存格間距 (cellspacing) 儲存格內距 (cellpadding)
<table cellspacing="20">…</table> 儲存格內距 (cellpadding) <table cellpadding="20">…</table> 兩者為table之屬性， 並非tr或td之屬性 建議使用css，進行 更多的外觀設定

6 列分組 <thead>…</thead> <tbody>…</tbody>
<tfoot>…</tfoot> thead, tfoot各只能一個 tbody可以多個

7 欄位分組 <table border="1"> <caption>人事資料</caption> <colgroup span="2" width="10%" align="right" style="background-color:#fcc"> </colgroup> <colgroup span="2" width="100" align="center"></colgroup> <colgroup style="background-color:yellow"> <col width="60" align="left" /> <col width="80" align="center" /> <col width="80" align="right" /> <col width="60" align="center" /> </colgroup> <tr> <th>姓名</th> <th>數學</th> <th>國文</th> …