- <table> 標簽
- 表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
- <tr> 表格行標簽
- 用來定義表格的一行。由於HTML表格是面向行的,所以必須分別表示每一行
- tr 元素可以在 table,thead,tbody 和 tfoot 元素內使用
- tr 元素內可以包含一個或者多個 td 或 th 元素
- <td> 表格單元格標簽
- 用來定義表格單元格,可以同 colspan,rowspan,headers 局部屬性使用
- colspan: 左右合並單元格,該屬性規定了單元格可橫跨的列數,該屬性的值必須是整數
- rowspan:上下合並單元格,該屬性規定了單元格可橫跨的行數,該屬性的值必須是整數
- cellpadding:規定單元格邊沿與其內容之間的空白
- cellpadding="0" 是讓單元格邊框線與單元格中的內容之間的距離為 0 像素,即單元格中內容緊挨着單元格的邊線。
- cellspacing:規定單元格之間的空白
- cellspacing="0" 是讓各單元格之間的縫隙為 0 象素
- headers:該屬性的值是一個或多個單元的 ID 屬性值,將單元格與列標題相關聯,可用於使用屏幕閱讀器
- width:規定表格寬度
- height:規定表格高度
- align:規定表格相對周圍元素的對齊方式
- <th> 標題單元格標簽
- 用來定義標題單元格,使我們有效區分數據及其描述
- 它同 <td> 元素具有相同的局部屬性,兩者有如下區別:
- <th> 是表示頭標記,通常位於首行或者首列。而且 <th> 中的文字默認會被加粗,而 <td> 是不會的
- <td> 是數據標記,表示單元格的具體的數據
- 快速制表
<body>
table>tr*3>td*2 <!-- 輸入完后,再按 Tab 鍵 -->
</body>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年紀</th>
<th>班級</th>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>一班</td>
</tr>
</table>
</body>
<body>
<table border="1" width="200" height="20">
<tr>
<th>姓名</th>
<th>年紀</th>
<th>班級</th>
</tr>
<tr align="center">
<td>張三</td>
<td>18</td>
<td>一班</td>
</tr>
</table>
</body>
<body>
<table border="1" width="200" height="20">
<tr>
<th>姓名</th>
<th>年紀</th>
<th>班級</th>
</tr>
<tr>
<td>張三</td>
<td></td>
<td rowspan="2"></td> <!-- 上下合並 -->
</tr>
<tr>
<td>李四</td>
<td></td>
<!-- <td></td> -->
</tr>
<tr>
<td>王五</td>
<td colspan="2"></td> <!-- 左右合並 -->
<!-- <td></td> -->
</tr>
</table>
</body>