溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“HTML表格10種基本屬性的示例”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“HTML表格10種基本屬性的示例”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來(lái)就讓我們進(jìn)入主題吧。
1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。 3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。
HTML表格屬性設(shè)置在HTML網(wǎng)頁(yè)中的應(yīng)用是十分廣泛的，也是至關(guān)重要的，所以，接下來(lái)我們來(lái)分別看一看10種表格屬性的介紹以及具體的代碼。
1、HTML table屬性<table>
用來(lái)定義HTML的表格，具有本地屬性 border 表示邊框，border屬性的值必須為1或空字符串("")。該屬性不會(huì)控制邊框的樣式，而是由CSS來(lái)控制
table元素可以有tr，th，td，thead，tbody，tfoot，colgroup元素
table標(biāo)簽的基本屬性如下：
border:可以的取值為1和0,1代表有邊框，0代表沒(méi)有邊框。
bordercolor：可以設(shè)置邊框的顏色，值為顏色值。
bgcolor:設(shè)置表格的背景顏色
background:設(shè)置背景圖片
2、html tr屬性<tr>
用來(lái)定義表格的一行。由于HTML表格是面向行的，所以必須分別表示每一行
tr元素可以在table，thead，tbody和tfoot元素內(nèi)使用
tr元素內(nèi)可以包含一個(gè)或者多個(gè)td或th元素
它的align,bgcolor等屬性已過(guò)時(shí)，如果要設(shè)置屬性，請(qǐng)使用CSS設(shè)置
3、HTML td屬性<td>
用來(lái)定義表格單元格，可以同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è)元素
4、html th屬性<th>
用來(lái)定義標(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ù)
valign屬性可以設(shè)置th和td，可以取值Top或者Bottom。
callpadding：內(nèi)容與單元格邊框的間距
cellspacing：防止文本超出邊框
如果要使單元格實(shí)現(xiàn)跨行或者跨列功能，使用屬性colspan和rowspan.
5、HTML thead屬性<thead>
用來(lái)定義表格的頁(yè)眉，表頭的包裝器?？梢远x一行或多行，這些行是 table 元素的列標(biāo)簽
沒(méi)有thead元素，所有的tr被假定為屬于表的主體
6、HTML tbody屬性<tbody>
用來(lái)定義表格的主體
7、HTML tfoot屬性<tfoot>
用來(lái)定義標(biāo)記表格的頁(yè)腳
注意：
<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、html colgroup屬性<colgroup>
用來(lái)定義表列組，可以使用其來(lái)將樣式應(yīng)用于某個(gè)列，當(dāng)然也可以使用下面要說(shuō)的col元素
具有局部屬性 span 的 <colgroup> 表示列組應(yīng)該橫跨的列數(shù)。默認(rèn)是一列，即對(duì)表格的一列設(shè)置樣式
<colgroup>可以包含一個(gè)或多個(gè) <col> 元素
9、HTML col屬性<col>
用來(lái)表示表單個(gè)列，建議使用<colgroup>包裹<col>元素而不是<colgroup>直接設(shè)置span屬性定義組
<col>也具有局部屬性span
<col>放在<colgroup>的元素內(nèi)部，<col>的咩哥實(shí)例表示組中的一列。使用該標(biāo)簽可以將樣式應(yīng)用于列的組和該組的單個(gè)列
10、html caption屬性<caption>
用來(lái)定義表格的標(biāo)題，每個(gè)表中只能包含一個(gè)<caption>元素
11、實(shí)例代碼：
<body> <table border="1" bordercolor="red" bgcolor="#ff4646"> <caption>表格示例</caption> <tr align="center"> <th>標(biāo)題1</th> <th>標(biāo)題2</th> <th>標(biāo)題3</th> </tr> <tr> <td align="left">左</td> <td align="center">中</td> <td align="right">右</td> </tr> <tr> <td valign="top">top</td> <td>center</td> <td valign="bottom">bottom</td> </tr> </table> </body>
運(yùn)行結(jié)果：
單元格跨行
<table border="1" bordercolor="#1f1fff"> <caption>單元格的跨行</caption> <tr> <th>姓名</th> <th colspan="2">電話</th> </tr> <tr> <td>億速云</td> <td>123456 654321</td> </tr> </table>
單元格跨列
<table border="1"> <caption>單元格跨列</caption> <tr> <th>姓名</th> <th>電話</th> </tr> <tr> <td rowspan="2">億速云</td> <td>123456</td> </tr> <tr> <td>654231</td> </tr> </table>
以上是“HTML表格10種基本屬性的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
