在浏览器中创建表格

1,599 阅读4分钟

表格的定义

表格是由行和列组成的结构化数据集(表格数据),它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。(摘自mdn)

  1. 一行表示一条数据集合。这个集合的特点如下:
  • 包含多种数据类型。
  • 通常该条数据有一个唯一的标识符。
  • 行数据通常对应表中的一条数据及其关联表的数据。
  1. 表格列数据集定义了表格的标题栏,用来描述数据单元(数据表中的字段)的含义。
  2. 显示在界面上的行列式表格展示了不同类型数据之间的某种关系。

表格不应该使用的场景

表格只适合使用在需要展示表格的地方,理由如下:

  1. 表格不是响应式的,表格标签集合是浏览器专门为显示表格设计的,这些标签集合通常自带样式,并且浏览器会计算这些布局。
  2. 表格布局创建了较多的标签,消耗更多的内存,同时代码结构更复杂。
  3. 滥用表格布局,违背了html语义化,同时给视力受损者的阅读造成了障碍。

表格的标签有哪些

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

table标签

  • HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

thead标签

  • HTML 元素定义了一组定义表格的列头的行。

th和td标签

th表示标题列,td表示数据列。下面介绍一下它们在html5中未被删除的属性:

  • colspanrowspan分别表示行和列的扩展,表示这个单元格横跨几个单元格的宽或高。

  • scope属性定义了表头元素关联的单元格。

colgroup和col标签

这个标签组合拳用来定义列的公共样式,通常使用如下:

<colgroup>
<col style="width: 60px; min-width: 60px;">
<col style="width: 90px; min-width: 90px;">
</colgroup>

min-width能保证自动计算的单元格宽度最小值为设定的px

table-layout

结论使用fixed布局可以提高表格渲染性能

table-layout CSS属性定义了用于布局表格单元格的算法。 浏览器针对表格专门实现了一个算法,用来自动计算单元格的宽度以适应父元素的宽度,这就是为什么我们给单元格定义的宽度和实际展示的高度不一致的原因。通过改变这个css属性的值,可以影响浏览器使用的表格布局算法。

auto

大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。

fixed

表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。

使用 “fixed” 布局方式时,整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染,但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow  属性控制是否允许内容溢出。 上面是mdn关于这种表格布局算法的描述。 固定布局,也就是说,行数据和列数据不再影响单元格的宽高,在非固定布局的情况下,浏览器需要根据所有需要展示的数据的具体内容来计算单元格的宽高,这个计算量无疑是很大的。 固定布局省去这一计算,因而提高了性能。

下面是一个关于创建表格的完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* border-collapse:collapse;消除单元格之间的间距 */
        table {
            table-layout: fixed;
            width: 100%;
            border-collapse: collapse;
            border: 3px solid yellow;
        }

        caption {
            background: #111;
            color: #fff;
        }

        thead {
            background: orange;
            color: #fff;
        }

        th {
            background: orange;
            color: #fff;
            border-bottom: 1px solid #111;
        }

        td {
            border: 1px solid #111;
            text-align: center;
            /*对齐*/
            letter-spacing: 2px;
            /*属性用于设置文本字符的间距表现*/
            overflow: hidden;
            white-space: nowrap;
            /*CSS 属性是用来设置如何处理元素中的 空白 (en-US)。nowrap在遇到br元素时仍然会换行*/
            text-overflow: ellipsis;
            /*文字溢出省略*/

        }

        /* 斑马条纹 */

        tbody tr:nth-child(odd) {
            background-color: #ff33cc;
        }

        tbody tr:nth-child(even) {
            background-color: #e495e4;
        }
    </style>
</head>
<body>
    <table>
        <caption>A summary of the UK's most famous punk bands</caption>
        <thead>
            <tr>
                <th scope="col">Band</th>
                <th scope="col">Year formed</th>
                <th scope="col">No. of Albums</th>
                <th scope="col">Most famous song</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Buzzcocks</th>
                <td>1976</td>
                <td>9</td>
                <td>Ever fallen in love (with someone you shouldn't've)</td>
            </tr>
            <tr>
                <th scope="row">The Clash</th>
                <td>1976</td>
                <td>6</td>
                <td>London Calling</td>
            </tr>
            <tr>
                <th scope="row">The Stranglers</th>
                <td>1974</td>
                <td>17</td>
                <td>No More Heroes</td>
            </tr>
        </tbody>
    </table>
</body>
</html>