Web网页设计·HTML篇（6）·表格

这章我们学习表格，日常生活中，为了清晰地显示数据或信息，常常使用表格对数据或信息进行统计为此、HTML语言提供了一系列的表格标签，本节将对这些标签进行详细的讲解。

1.基本标签

<body>
    <table>
        <tr>
            <th>标题</th>
            <th>标题</th>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</body>

Table：整个表格，用于包含多个 tr

tr：每一行表格，用于包含 th、td

th：表格单元格，用于包含标题

td：表格单元格，用于包含内容

注意:标签的嵌套关系:table>tr>td.

2.表格相关属性

<table 属性名="属性值">…</table>

写table标签里面，用于装饰表格

属性名	属性值	效果
border	像素值	表格的边框(默认 border="0”无边框)
cellspacing	像素值	单元格与单元格边框之间的空白间距
cellpadding	像素值	单元格内容与单元格边框之间的空自间距
width	像素值	表格的宽度
height	像素值	表格的高度
align	laft . center, right	表格在网页中的水平对齐方式
bgeolor	颜色值	表格的背景颜色

<body>
    <table border="1">
        <tr>
            <th>标题</th>
            <th>标题</th>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</body>

注意:实际开发时针对于样式效果推荐用CSS设置

3.表格标题和表头单元格标签

一般表头单元格位于表格的第一行或第一列

<caption></caption>

<body>
    <table border="1">
        <caption>大标题</caption>
        <tr>
            <th>标题</th>
            <th>标题</th>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</body>

注意:caption 标签书写在table 标签内部。

4.合并单元格

在特殊情况下，可以将水平或重直多个单元格合并成一个单元格

合并单元格步骤:

步骤1:明确合并哪几个单元格

步骤2:通过左上原则，确定保留谁删除谁

上下合并:只保留最上的，删除其他

左右合并:只保留最左的，删除其他

步骤3:给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

跨行事例，rowspan="n"，其中n表示一共跨几行，后几行就不需要输入内容了

<body>
    <table border="1">
        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td rowspan="2">跨行内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</body>

跨列事例，rowspan="n"，其中n表示一共跨几列，后几列就不需要输入内容了

<body>
    <table border="1">
        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
        <tr>
            <td>内容</td>
            <td colspan="2">跨列内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
</body>

标签