html与表格（table）相关的属性

清疚 2022-05-18 23:12 262阅读 0赞

原文出处：[https://www.cnblogs.com/duhuo/p/5662132.html][https_www.cnblogs.com_duhuo_p_5662132.html]

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

table标签除了具有html元素中通用的属性外，还含有自己的属性，常用属性如下：

[bgcolor][]：规定表格边框的宽度。

[cellpadding][]：规定单元边沿与其内容之间的空白

[cellspacing][]：规定单元格之间的空白。

[frame][]：规定外侧边框的哪个部分是可见的。

[rules][]：规定内侧边框的哪个部分是可见的。

[summary][]：规定表格的摘要。

[width][]：规定表格的宽度。

## 1、<thead> 标签 ##

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与 [tbody][] 和 [tfoot][] 元素结合起来使用。tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

描述：thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

常用属性如下：

[align][]：定义 thead 元素中内容的对齐方式。

[char][]：规定根据哪个字符来进行文本对齐。

[charoff][]：规定第一个对齐字符的偏移量。

[valign][]：规定 thead 元素中内容的垂直对齐方式。

注意：<thead> 内部必须拥有 <tr> 标签！

源码如下：

![复制代码][copycode.gif]

<table border="1">
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
    
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
    
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
    </table>

![复制代码][copycode.gif]

## 2、<tbody> 标签 ##

<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。

常用属性如下：

[align][]：定义 thead 元素中内容的对齐方式。

[char][]：规定根据哪个字符来进行文本对齐。

[charoff][]：规定第一个对齐字符的偏移量。

[valign][]：规定 thead 元素中内容的垂直对齐方式。

![复制代码][copycode.gif]

## 3、<tfoot> 标签 ##

<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。

常用属性如下：

[align][]：定义 thead 元素中内容的对齐方式。

[char][]：规定根据哪个字符来进行文本对齐。

[charoff][]：规定第一个对齐字符的偏移量。

[valign][]：规定 thead 元素中内容的垂直对齐方式。

![复制代码][copycode.gif]

## 4、<tr> 标签 ##

<tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 [th][] 或 [td][] 元素。

常用属性如下：

[align][]：定义 thead 元素中内容的对齐方式。

[char][]：规定根据哪个字符来进行文本对齐。

[charoff][]：规定第一个对齐字符的偏移量。

[valign][]：规定 thead 元素中内容的垂直对齐方式。

![复制代码][copycode.gif]

<table border="1">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>

![复制代码][copycode.gif]

## 5、<th> 标签 ##

<th> 标签定义表格内的表头单元格。

HTML 表单中有两种类型的单元格：

*  表头单元格 - 包含表头信息（由 th 元素创建）
 *  标准单元格 - 包含数据（由 td 元素创建）

th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

常用属性如下：

[align][align 1]：规定单元格内容的水平对齐方式。

[char][]：规定根据哪个字符来进行文本对齐。

[charoff][]：规定第一个对齐字符的偏移量。

[colspan][]：设置单元格可横跨的列数。

[rowspan][]：规定单元格可横跨的行数。

[valign][valign 1]：规定单元格内容的垂直排列方式。

## 6、<td> 标签 ##

定义 HTML 表格中的标准单元格。

常用属性如下：

[align][align 1]：规定单元格内容的水平对齐方式。

[char][]：规定根据哪个字符来进行文本对齐。

[charoff][]：规定第一个对齐字符的偏移量。

[colspan][]：设置单元格可横跨的列数。

[rowspan][]：规定单元格可横跨的行数。

[valign][valign 1]：规定单元格内容的垂直排列方式。

综合实例：

![复制代码][copycode.gif]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Book List</title>
    <style type="text/css">
    table {
        background-color: #FFF;
        border: none;
        color: #565;
        font: 12px arial;
    }
    
    table caption {
        font-size: 24px;
        border-bottom: 2px solid #B3DE94;
        border-top: 2px solid #B3DE94;
    }
    
    table, td, th {
        margin: 0;
        padding: 0;
        vertical-align: middle;
        text-align:left;
    }
    
    tbody td, tbody th {
        background-color: #DFC;
        border-bottom: 2px solid #B3DE94;
        border-top: 3px solid #FFFFFF;
        padding: 9px;
    }
    
    
    tfoot td, tfoot th {
        font-weight: bold;
        padding: 4px 8px 6px 9px;
        text-align:center;
    }
    
    thead th {
        font-size: 14px;
        font-weight: bold;
        line-height: 19px;
        padding: 0 8px 2px;
        text-align:center;
    }
    
    tbody tr.odd th,tbody tr.odd td { /*odd就是偶数行*/
        background-color: #CEA;
        border-bottom: 2px solid #67BD2A;
    }
    
    td+td+td, /*第三个td以及之后的td元素*/
    col.price{ /*类样式*/
        text-align:right;
    }
    
    tbody tr:hover td, tbody tr:hover th { /*tr也有hover样式*/
        background-color: #8b7;
        color:#fff;
    }
    
    </style>
    </head>
    
    <body>
            <table summary="book list">
                <caption>Book List</caption> 
                <col></col><col></col><col></col><col class="price" align="right"></col><col></col>
                <thead>
                    <tr>
                        <th >Title</th>
                        <th >ID</th>
    
                        <th >Country</th>
                        <th >Price</th>
                        <th >Download</th>
                    </tr>
                </thead>    
                <tbody>
                    <tr >
                        <th >Tom</th>
                        <td>1213456</td>
    
                        <td>Germany</td>
                        <td>$3.12</td>
                        <td>Download</td>
                    </tr>
                    <tr class="odd">
                        <th >Chance</th>
                        <td>1213457</td>
    
                        <td>Germany</td>
                        <td>$123.34</td>
                        <td>Download</td>
                    </tr>
                    <tr >
                        <th >John</th>
                        <td>1213458</td>
    
                        <td>Germany</td>
                        <td>$34.37</td>
                        <td>Download</td>
                    </tr>
                    <tr class="odd">
                        <th >oKathleen</th>
                        <td>1213459</td>
                        <td>Germany</td>
                        <td>$23.67</td>
                        <td>Download</td>
                    </tr>
                    </tbody>
                <tfoot>
                    <tr>
                        <th >Total</th>
                        <td colspan="4">4 books</td>
                    </tr>
                </tfoot>
    </table>
    </body>
    
    </html>

![复制代码][copycode.gif]

最终效果如下图：  
![70][]

[https_www.cnblogs.com_duhuo_p_5662132.html]: https://www.cnblogs.com/duhuo/p/5662132.html
[bgcolor]: http://www.w3school.com.cn/tags/att_table_bgcolor.asp
[cellpadding]: http://www.w3school.com.cn/tags/att_table_cellpadding.asp
[cellspacing]: http://www.w3school.com.cn/tags/att_table_cellspacing.asp
[frame]: http://www.w3school.com.cn/tags/att_table_frame.asp
[rules]: http://www.w3school.com.cn/tags/att_table_rules.asp
[summary]: http://www.w3school.com.cn/tags/att_table_summary.asp
[width]: http://www.w3school.com.cn/tags/att_table_width.asp
[tbody]: http://www.w3school.com.cn/tags/tag_tbody.asp
[tfoot]: http://www.w3school.com.cn/tags/tag_tfoot.asp
[align]: http://www.w3school.com.cn/tags/att_thead_align.asp
[char]: http://www.w3school.com.cn/tags/att_thead_char.asp
[charoff]: http://www.w3school.com.cn/tags/att_thead_charoff.asp
[valign]: http://www.w3school.com.cn/tags/att_thead_valign.asp
[copycode.gif]: /images/20220519/87aaaa6dc1b04626aed7e7f66798e5bc.png
[th]: http://www.w3school.com.cn/tags/tag_th.asp
[td]: http://www.w3school.com.cn/tags/tag_td.asp
[align 1]: http://www.w3school.com.cn/tags/att_th_align.asp
[colspan]: http://www.w3school.com.cn/tags/att_th_colspan.asp
[rowspan]: http://www.w3school.com.cn/tags/att_th_rowspan.asp
[valign 1]: http://www.w3school.com.cn/tags/att_th_valign.asp
[70]: /images/20220519/391ee80a4a3d45a4ab890a55599586ae.png