明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML表格屬性有哪一些？HTML表格10種基本屬性的總結(jié)

發(fā)表時間：2023-09-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]HTML表格屬性設(shè)置在HTML網(wǎng)頁中的應(yīng)用是十分廣泛的，也是至關(guān)重要的，所以，接下來的這篇文章我給大家分享了總結(jié)的HTML表格10種基本屬性，下面我們來分別看一看這10種表格屬性的介紹以及具體的代碼。1、HTML table屬性<table>用來定義HTML的表格，具有本地屬性 bor...
HTML表格屬性設(shè)置在HTML網(wǎng)頁中的應(yīng)用是十分廣泛的，也是至關(guān)重要的，所以，接下來的這篇文章我給大家分享了總結(jié)的HTML表格10種基本屬性，下面我們來分別看一看這10種表格屬性的介紹以及具體的代碼。

1、HTML table屬性<table>

用來定義HTML的表格，具有本地屬性 border 表示邊框，border屬性的值必須為1或空字符串("")。該屬性不會控制邊框的樣式，而是由CSS來控制

table元素可以有tr，th，td，thead，tbody，tfoot，colgroup元素

table標(biāo)簽的基本屬性如下：

border:可以的取值為1和0,1代表有邊框，0代表沒有邊框。

bordercolor：可以設(shè)置邊框的顏色，值為顏色值。

bgcolor:設(shè)置表格的背景顏色

background:設(shè)置背景圖片

2、html tr屬性<tr>

用來定義表格的一行。由于HTML表格是面向行的，所以必須分別表示每一行

tr元素可以在table，thead，tbody和tfoot元素內(nèi)使用

tr元素內(nèi)可以包含一個或者多個td或th元素

它的align,bgcolor等屬性已過時，如果要設(shè)置屬性，請使用CSS設(shè)置

3、HTML td屬性<td>

　　用來定義表格單元格，可以同colspan，rowspan，headers局部屬性使用

　　(1)colspan： 列跨度，該屬性規(guī)定了單元格可橫跨的列數(shù)，該屬性的值必須是整數(shù)

　　(2)rowspan：行跨度，該屬性規(guī)定了單元格可橫跨的行數(shù)，該屬性的值必須是整數(shù)

　　(3)headers：該屬性的值是一個或多個單元的ID屬性值，將單元格與列標(biāo)題相關(guān)聯(lián)，可用于使用屏幕閱讀器

注意：每個表格必須包含以上三個元素

4、html th屬性<th>

　　用來定義標(biāo)題單元格，使我們有效區(qū)分?jǐn)?shù)據(jù)及其描述

　　它同 <td> 元素具有相同的局部屬性，兩者有如下區(qū)別：

<th>是表示頭標(biāo)記，通常位于首行或者首列。而且<th>中的文字默認(rèn)會被加粗，而<td>是不會的

<td>是數(shù)據(jù)標(biāo)記，表示單元格的具體的數(shù)據(jù)

valign屬性可以設(shè)置th和td，可以取值Top或者Bottom。

callpadding：內(nèi)容與單元格邊框的間距

cellspacing：防止文本超出邊框

如果要使單元格實現(xiàn)跨行或者跨列功能，使用屬性colspan和rowspan.

5、HTML thead屬性<thead>

　　用來定義表格的頁眉，表頭的包裝器�？梢远x一行或多行，這些行是 table 元素的列標(biāo)簽

　　沒有thead元素，所有的tr被假定為屬于表的主體

6、HTML tbody屬性<tbody>

　　用來定義表格的主體

7、HTML tfoot屬性<tfoot>

　　用來定義標(biāo)記表格的頁腳

注意：

<thead>、<tfoot>標(biāo)簽內(nèi)部必須擁有 <tr> 標(biāo)簽

<thead>和<tfoot>標(biāo)簽不管放在 <table> 標(biāo)簽內(nèi)的哪個位置，都會被分別定為到表格的頭部和底部。

<tfoot>可以出現(xiàn)在<tbody>或<tr>之前或之后。

在html5之前，<tfoot>元素必須出現(xiàn)在<tbody>元素之前，在html5中，可以將<tfoot>元素放在<tbody>或最后一個<tr>元素后面

8、html colgroup屬性<colgroup>

　　用來定義表列組，可以使用其來將樣式應(yīng)用于某個列，當(dāng)然也可以使用下面要說的col元素

　　具有局部屬性 span 的 <colgroup> 表示列組應(yīng)該橫跨的列數(shù)。默認(rèn)是一列，即對表格的一列設(shè)置樣式

　　<colgroup>可以包含一個或多個 <col> 元素

9、HTML col屬性<col>

　　用來表示表單個列，建議使用<colgroup>包裹<col>元素而不是<colgroup>直接設(shè)置span屬性定義組

　　<col>也具有局部屬性span

　　<col>放在<colgroup>的元素內(nèi)部，<col>的咩哥實例表示組中的一列。使用該標(biāo)簽可以將樣式應(yīng)用于列的組和該組的單個列

10、html caption屬性<caption>

　　用來定義表格的標(biāo)題，每個表中只能包含一個<caption>元素

11、實例代碼：

<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é)果：

2345截圖20180727143134.png

單元格跨行

<table border="1" bordercolor="#1f1fff">
       <caption>單元格的跨行</caption>
       <tr>
           <th>姓名</th>
           <th colspan="2">電話</th>
       </tr>
       <tr>
           <td>php中文網(wǎng)</td>
           <td>123456   654321</td>
       </tr>
   </table>

運(yùn)行結(jié)果：

2345截圖20180727143029.png

單元格跨列

<table border="1">
     <caption>單元格跨列</caption>
     <tr>
         <th>姓名</th>
         <th>電話</th>
     </tr>
     <tr>
         <td rowspan="2">php中文網(wǎng)</td>
         <td>123456</td>
     </tr>
     <tr>
         
         <td>654231</td>
     </tr>
 </table>

運(yùn)行結(jié)果：

2345截圖20180727142829.png

相關(guān)推薦：

html表格屬性_html/css_WEB-ITnose

詳解HTML中table表格的frame和rules屬性

以上就是HTML表格屬性有哪些？HTML表格10種基本屬性的總結(jié)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。