HTML 表格 | 易学教程

表格本身并不是用来布局，而是用来展示表格数据

1.基本结构

table:表格标签(默认独占一行,宽度100%)
tr:行标签
td/th:单元格标签，其中th标签中的文本会显示为粗体居中（单元格的宽度由同一列中的最宽的那个元素决定）

<body style="padding:30px;">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>120</td>
        </tr>
        <tr>
            <td>杨过</td>
            <td>24</td>
        </tr>
    </table>
</body>

2.caption标签

caption标签用来定义表格的标题,caption标签的文本会居中显示

<body style="padding:30px;">
    <table>
        <caption>我是表格的标题</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>简介</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>120</td>
            <td>本名张君宝，自创太极拳剑，将武当派发扬光大</td>
        </tr>
        <tr>
            <td>杨过</td>
            <td>24</td>
            <td>金庸武侠小说《神雕侠侣》的主人公</td>
        </tr>
    </table>
</body>

3.为表格添加边框

默认情况下表格是咩有边框的
在table标签中添加border属性，可以为表格添加边框（表格中一般不使用css中的边框属性）。值越大，表格最外层的边框也就越粗。

<body style="padding:30px;">
    <table border="1">
        ...
    </table>
    <table border="10">
        ...
    </table>
</body>

4.设定各个单元格之间的间距

在table标签中添加cellspacing属性，可以设定各个单元格之间的间距。这个属性默认值为2

<body style="padding:30px;">
    <table border="1" cellspacing="5">
        ...
    </table>
    <table border="1" cellspacing="0">
        ...
    </table>
</body>

5.设定单元格的内边距

在table标签中添加cellpadding属性，可以设定单元格的内边距。这个属性默认值为0（因为单元格的宽度由同一列中的最宽的那个元素决定，所以这个属性只在同一列中的最宽的那个元素上才能看到效果）

<body style="padding:30px;">
    <table border="1" cellspacing="0">
        ...
    </table>
    <table border="1" cellspacing="0" cellpadding="10">
        ...
    </table>
</body>

来源：https://www.cnblogs.com/OrochiZ-/p/11946347.html

标签

table

html表格

单元格

padding