HTML創(chuàng)建表格
創(chuàng)建表格的基本語法(table元素庄吼、tr 元素核畴、th元素、td元素)
表格由4個(gè)基本元素構(gòu)成:
- table 元素用來定義表格环形，整個(gè)表格包含在<table>和</table>標(biāo)簽中项郊。
- tr元素用來定義表格中的一個(gè)行， 它是單元格的容器斟赚，每行可以包含有多個(gè)單元格，由<tr>和</tr>標(biāo)簽表示差油。
- th元素元素用來定義單元格表頭信息拗军，所有單元格在行標(biāo)簽內(nèi)，每個(gè)單元格由一對(duì)<th> 和</th>標(biāo)簽表示蓄喇。
- td元素用來定義單元格发侵，所有單元格在行標(biāo)簽內(nèi)，每個(gè)單元格由一對(duì)<td> 和</td>標(biāo)簽表示妆偏。如果單元格有數(shù)據(jù)(文本刃鳄、圖片等)，則在這個(gè)標(biāo)簽間插入數(shù)據(jù)钱骂。
設(shè)置表格邊框樣式
可以用table元素中的style屬性設(shè)置表格的邊框線叔锐，線條樣式挪鹏、線條粗細(xì)以及顏色。示例如下：
<table style="border:1px solid #000">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
定義表格描述(summary屬性)
表格用summary屬性來為表格的目的和結(jié)構(gòu)提供一個(gè)概要說明愉烙，這個(gè)說明一般用于非可視化的瀏覽器讨盒，如語音合成器和布萊葉盲文。
示例如下：
<table summary="xxxxxxxxxxxx">
...
</table>
創(chuàng)建表格標(biāo)題(caption元素)
caption元素必須緊跟著table元素開始標(biāo)簽后被定義步责，一個(gè)table元素只能包含一個(gè)caption元素返顺。
示例如下：
<table>
<caption>XXXX</caption>
...
</table>
除此之外還可以用figure元素和figcaption元素為表格定義標(biāo)題，用法如下：
<figure>
<figcaption>XXXX</figcaption>
</figure>
<table>
...
</table>
設(shè)置單元格
th元素中的scope屬性為表格設(shè)置表頭
scope的屬性值及其功能描述如下：
| scope屬性值 | 功能描述 |
|---|---|
| col | 將該單元格的內(nèi)容設(shè)置為當(dāng)前列的表頭 |
| colgroup | 將該單元格的內(nèi)容設(shè)置為當(dāng)前列組的表頭 |
| row | 將該單元格的內(nèi)容設(shè)置為當(dāng)前行的表頭 |
| rowgroup | 將該單元格的內(nèi)容設(shè)置為當(dāng)前行組的表頭 |
| atuo | 默認(rèn)值蔓肯。 |
th元素遂鹊、td元素中headers屬性
headers屬性可以定義一系列th元素的id屬性值，示例如下：
<table >
<tr>
<td></td>
<th id="a1">A</th>
<th id="b1">B</th>
</tr>
<tr>
<th id="1">小寫</th>
<td headers="a1 1">aa</td>
<td headers="b1 1">bb</td>
</tr>
</table>
跨多行蔗包、多列的單元格
跨多行單元格秉扑，可通過td、th元素的rowspan屬性設(shè)置
跨多列單元格气忠，可通過td邻储、th元素的colspan屬性設(shè)置
<table >
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td colspan="3">aa</td>
</tr>
</table>
表格的分組顯示
按行的分組顯示（thead元素、tfoot元素旧噪、tbody元素)
在呈現(xiàn)時(shí)吨娜，每一個(gè)thead、tfoot 和tbody元素必須包含一個(gè)或多個(gè)行淘钟。 并且thead宦赠、 tfoot和tbody元素必須包含相同數(shù)量的列。這3個(gè)元素必頻位于table 元素內(nèi)米母，tfoot 元素也必須在tbody元素之前定義勾扭，這樣瀏覽器就可以在所有表格數(shù)據(jù)完全下載之前呈現(xiàn)表格尾。這樣铁瞒，有助于使用增量方式渲染數(shù)據(jù)行妙色。
thead元素和tfoot元素在-一個(gè)表格中都只能有一個(gè)，而tbody元素可以有多個(gè)慧耍。
Thead身辨、tfoot 和tbody 元素的結(jié)束標(biāo)簽在某些情況下可以省略:
- 當(dāng)一個(gè)表格只包含一個(gè)表格 主體并且沒有表格頭和表格尾部分時(shí)，tbody 元素的開始標(biāo)簽和結(jié)束標(biāo)簽都可以省略芍碧。
- 不管何時(shí)煌珊，tbody元素的結(jié)束標(biāo)簽都可以省略。
- 當(dāng)表格中包含表格頭和表格尾時(shí)泌豆，thead定庵、 tfoot 元素的開始標(biāo)簽都是必需的，但是它們的結(jié)束標(biāo)簽都可以省略肯腕。
按列的分組顯示（colgroup元素丛忆、col元素)
colgroup元素和col元素可以使用span屬性來定義列分組，并且功能基本相同蹬刷。
- 如果colgroup元素不定義span屬性敛滋，那么就會(huì)創(chuàng)建一個(gè) 單列分組许布，它僅包含一個(gè)列;如果col元素不定義span 屬性，那么該col元素也會(huì)創(chuàng)建一個(gè)列分組绎晃， 并且也是僅包含一個(gè)列蜜唾。
- 如果定義一個(gè)正整數(shù)N,那么就會(huì)創(chuàng)建一一個(gè)包含 N個(gè)列的分組。
- span 屬性的值必須是大于0的整數(shù)庶艾。
- 如果colgroup元素中包含有col元素袁余，那么就會(huì)忽略colgroup 元素的span屬性。
例：
<colgroup span="4">
</colgroup>
或
<colgroup>
<col>
<col span="2">
<col>
</colgroup>
