HTML表格的运用

2024年2月22日 107次阅读 来源: 偶是大禹

table元素的简介

table标签下，通常包含caption（表格的标题），thead, tbody, tfoot,三个部分，如下表格所示：

 <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>
MonthSavings
Sum$180
January$100
February$80

table可以通过属性来定义它的样式，但是一般不推荐这样做，最好是通过CSS来完成样式的自定义。如果定义了属性，同时也定义了CSS样式，将以CSS样式为准。
以下属性仅作了解，并且HTML5只支持border属性。

  • align: 表示表格应该相对于父元素向左，右还是中间对齐

  • bgcolor：表格的背景颜色，值为十六进制数

  • border：定义边框的粗细

  • frame：定义哪边的边框需要显示

  • cellpadding：表格格子与内容之间的间隔

  • cellspacing：格子与格子之间的间隔

  • width：表格的宽度

tr标签，Table-Row，表示表格中的一行，通常被thead, tbody, tfoot。

th标签，表头单元格，包含头部信息，和td标签一样，被tr包裹，存在表头当中以下是Html5支持的属性。

  • colspan: 表示单元格可以横跨的列数

  • rowspan：表示单元格可以横跨的行数

  • headers：规定与单元格相关联的一个或多个表头单元格。

  • scope：规定表头单元格是否是行、列、行组或列组的头部 “col|row|colgroup|rowgroup”

td标签，Table-Data，表示的是单元格，通常被tr包裹。以下是Html5支持的属性。

  • colspan: 表示单元格可以横跨的列数

  • rowspan：表示单元格可以横跨的行数

  • headers：规定与单元格相关联的一个或多个表头单元格。

table样式的自定义

  • display: table, table-row, table-cell。

  • border-collapse：设置是否把表格边框合并为单一的边框。separate| collapse，如果为collapse，会忽略border-spacing 和 empty-cells 属性。

  • border-spacing：设置分隔单元格边框的距离。取值同border属性，只用于分离模式。

  • empty-cells：show|hide，设置是否显示表格中的空单元格。

  • caption-side：top|bottom, 表示表格标题的位置。

  • table-layout: automatic|fixed;在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。当属性值为fixed时，可以手动设置宽高，如果table的宽度或者高度确定，每个单元格将会等分。
    链接描述

    原文作者：偶是大禹
    原文地址: https://segmentfault.com/a/1190000009493861
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞