html篇之《表格》
1. 結構
<table> <!-- 表格標簽 -->
<caption>標題，自動居中對齊</caption>
<thead> <!-- 表格結構化-表頭，內容始終保持在頁面最上方，不受tbody和tfoot擺放順序影響 -->
<tr> <!-- 行標簽 -->
<th>表頭,自動加粗，居中對齊</th>
<th></th>
<th></th>
</tr>
<tr>
<td>單元格標簽</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody> <!-- 表格結構化-主體，內容始終保持在頁面中間，不受thead和tfoot擺放順序影響 -->
<tr>
<td colspan="2"></td> <!-- 跨列屬性,合并同一行2列單元格 -->
<!-- 此單元格洗掉，以達成跨列合并單元格 -->
<td></td>
</tr>
<tr>
<td rowspan="2"></td> <!-- 跨行屬性，合并同一列2行單元格 -->
<td></td>
<td></td>
</tr>
<tr>
<!-- 此單元格洗掉，以達成跨行合并單元格 -->
<td></td>
<td></td>
</tr>
</tbody>
<tfoot> <!-- 表格結構化-腳注，內容始終保持在頁面最下方，不受thead和tbody擺放順序影響-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<!-- 表格嵌套，在<td></td>中放入完整表格結構 -->
<table>
<tr>
<td></td>
</tr>
</table>
</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
2. <table>表格標簽屬性
（1）width
表格寬度
px | %
（2）align
表格水平對齊方式
left | center | right
（3）border
表格邊框寬度
px
（4）bgcolor
表格背景顏色
rgb | 十六進制 | colorname
（5）cellpadding
單元格邊沿與其內容之間的空白
px | %
（6）cellspacing
單元格之間的空白
px | %
（7）frame
規定外側邊框的哪個部分是可見的.
值：
① void
不顯示外邊框
② above
顯示上邊
③ below
顯示下邊
④ lhs
顯示左邊
⑤ rhs
顯示右邊
⑥ hsides
顯示上下
⑦ vsides
顯示左右
⑧ box
顯示所有邊
⑨ border
顯示所有邊
（8）rules
規定內側邊框的哪個部分是可見的.
值：
① none
沒有線條
② groups
位于行組和列組之間的線條
③ rows
位于行之間的線條
④ cols
位于列之間的線條
⑤ all
位于行和列之間的線條
3. <tr>行標簽屬性
（1）align
行水平對齊方式
left | center | right | justify | char
（2）valign
行垂直對齊方式
top | middle | bottom | baseline
（3）bgcolor
行背景顏色
rgb | 十六進制 | colorname
4. <td>和<th>單元格標簽屬性
（1）align
單元格水平對齊方式
left | center | right | justify | char
（2）valign
單元格垂直對齊方式
top | middle | bottom | baseline
（3）bgcolor
單元格背景顏色
rgb | 十六進制 | colorname
（4）width
單元格寬度
px | %
（5）height
單元格高度
px | %
5. <thead>、<tbody>、<tfoot>結構標簽屬性
（1）align
水平對齊方式
left | center | right | justify | char
（2）valign
垂直對齊方式
top | middle | bottom | baseline
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544053.html
標籤：其他