HTML不同表格屬性的總結(jié)（附代碼）
發(fā)表時(shí)間：2023-09-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章給大家分享的是關(guān)于HTML不同表格屬性的總結(jié)（附代碼），內(nèi)容很不錯(cuò)，有需要的朋友可以參考一下，希望可以幫助到大家。這里主要總結(jié)記錄下表格的一些屬性和簡(jiǎn)單的樣式，方便以后不時(shí)之需。1、<table> 用來定義HTML的表格，具有本地屬性 border 表示邊框，border屬性...
本篇文章給大家分享的是關(guān)于HTML不同表格屬性的總結(jié)（附代碼），內(nèi)容很不錯(cuò)，有需要的朋友可以參考一下，希望可以幫助到大家。
這里主要總結(jié)記錄下表格的一些屬性和簡(jiǎn)單的樣式，方便以后不時(shí)之需。
1、<table>
用來定義HTML的表格，具有本地屬性 border 表示邊框，border屬性的值必須為1或空字符串("")。該屬性不會(huì)控制邊框的樣式，而是由CSS來控制
table元素可以有tr，th，td，thead，tbody，tfoot，colgroup元素
2、<tr>
用來定義表格的一行。由于HTML表格是面向行的，所以必須分別表示每一行
tr元素可以在table，thead，tbody和tfoot元素內(nèi)使用
tr元素內(nèi)可以包含一個(gè)或者多個(gè)td或th元素
它的align,bgcolor等屬性已過時(shí)，如果要設(shè)置屬性，請(qǐng)使用CSS設(shè)置
3、<td>
用來定義表格單元格，可以同colspan，rowspan，headers局部屬性使用
(1)colspan： 列跨度，該屬性規(guī)定了單元格可橫跨的列數(shù)，該屬性的值必須是整數(shù)
(2)rowspan：行跨度，該屬性規(guī)定了單元格可橫跨的行數(shù)，該屬性的值必須是整數(shù)
(3)headers：該屬性的值是一個(gè)或多個(gè)單元的ID屬性值，將單元格與列標(biāo)題相關(guān)聯(lián)，可用于使用屏幕閱讀器
??：每個(gè)表格必須包含以上三個(gè)元素
一個(gè)簡(jiǎn)單的實(shí)例
<!DOCTYPE html><html>
<body>
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</body></html>效果如下：
4、<th>
用來定義標(biāo)題單元格，使我們有效區(qū)分?jǐn)?shù)據(jù)及其描述
它同 <td> 元素具有相同的局部屬性，兩者有如下區(qū)別：
<th>是表示頭標(biāo)記，通常位于首行或者首列。而且<th>中的文字默認(rèn)會(huì)被加粗，而<td>是不會(huì)的
<td>是數(shù)據(jù)標(biāo)記，表示單元格的具體的數(shù)據(jù)
5、<thead>
用來定義表格的頁眉，表頭的包裝器�？梢远x一行或多行，這些行是 table 元素的列標(biāo)簽
沒有thead元素，所有的tr被假定為屬于表的主體
6、<tbody>
用來定義表格的主體
7、<tfoot>
用來定義標(biāo)記表格的頁腳
??：
<thead>、<tfoot>標(biāo)簽內(nèi)部必須擁有 <tr> 標(biāo)簽
<thead>和<tfoot>標(biāo)簽不管放在 <table> 標(biāo)簽內(nèi)的哪個(gè)位置，都會(huì)被分別定為到表格的頭部和底部。<tfoot>可以出現(xiàn)在<tbody>或<tr>之前或之后。在html5之前，<tfoot>元素必須出現(xiàn)在<tbody>元素之前，在html5中，可以將<tfoot>元素放在<tbody>或最后一個(gè)<tr>元素后面
8、<colgroup>
用來定義表列組，可以使用其來將樣式應(yīng)用于某個(gè)列，當(dāng)然也可以使用下面要說的col元素
具有局部屬性 span 的 <colgroup> 表示列組應(yīng)該橫跨的列數(shù)。默認(rèn)是一列，即對(duì)表格的一列設(shè)置樣式
<colgroup>可以包含一個(gè)或多個(gè) <col> 元素
9、<col>
用來表示表單個(gè)列，建議使用<colgroup>包裹<col>元素而不是<colgroup>直接設(shè)置span屬性定義組
<col>也具有局部屬性span
<col>放在<colgroup>的元素內(nèi)部，<col>的咩哥實(shí)例表示組中的一列。使用該標(biāo)簽可以將樣式應(yīng)用于列的組和該組的單個(gè)列
10、<caption>
用來定義表格的標(biāo)題，每個(gè)表中只能包含一個(gè)<caption>元素
一個(gè)簡(jiǎn)單的例子：
<!DOCTYPE html><html>
<head>
<style>
thead th,tfoot th {
text-align: left;
background: grey;
color: white }
tbody th {
text-align: right;
background: lightgrey;
color: grey }
/* tbody td {
background: greenyellow;
} */
#colgroup1 {
background-color: blueviolet }
#col3 {
background-color: yellow;
font-size: small }
</style>
</head>
<body>
<table>
<colgroup id="colgroup1">
<col id="collAnd2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"></colgroup>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank Footer</th>
<th>Name Footer</th>
<th>Color Footer</th>
<th colspan="2">Size And Votes Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>CSS</td>
<td>Java</td>
<td>IOS</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Web</td>
<td>HTML5</td>
<td>CS</td>
<td>460</td>
</tr>
</tbody>
</table>
</body></html>View Code
效果如下：
相關(guān)推薦：
如何動(dòng)態(tài)生成html元素以及為元素追加屬性的方法介紹（附代碼）
以上就是HTML不同表格屬性的總結(jié)（附代碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
