HTML 表格
HTML 表格
表格由 <table> 標籤來定義。每個表格均有若干行(由 <tr> 標籤定義),每行被分割為若干單元格(由 <td> 標籤定義)。字母 td 指表格資料(table data),即資料單元格的內容。資料儲存格可以包含文字、圖片、清單、段落、表單、水平線、表格等等。
下面是一個範例:
<html> <head> <meta charset="utf-8"> <title>Table in html</title> </head> <body> <p>水平表头</p> <table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> <tr> <td>zdd</td> <td>30</td> <td>male</td> </tr> </table> <p>垂直表头</p> <table border="1"> <tr> <th>Name</th> <td>autumn</td> </tr> <tr> <th>Age</th> <td>30</td> </tr> <tr> <th>Gender</th> <td>famale</td> </tr> </table> </body> </html>
試試看
#無邊框表格
##如果在定義表格時,沒有指定border屬性,那麼表格就沒有邊框
<table> <tr><td>zdd< ;/td><td>30</td></tr>
<tr><td>ddz</td><td>27<td>ddz</td><td>27</td></tr>< #</table>
#空白單元格如果沒有為單元格指定內容,那麼單元格將是空的,且沒有邊框
如果解決呢?方法是為空的儲存格加上空格,由於html忽略多餘的空格,所以我們不能直接加空格,而要加 nbsp表示non-breaking space。
<tr><td>zdd</td><td>30</td></ tr> <tr><td> </td>20</tr>
</table>
用rowspan跨列
<table border="1">
<tr><th>姓名</th><td> Bill Gates</td></tr>
<tr><th rowspan="2">電話</th><td>555 77 854</td></tr>555 77 854</td></tr>
<tr><td>555 77 855</td></tr>
</table>
#HTML 表格表頭
表格的表頭使用<th> 標籤進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文字:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cellcell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</ td>
<td>row 2, cell 2</td>
</tr>
</table>