表格table

我们先看一段代码：

<table border="1">
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>p20软校</td>
        <td>赵四</td>
        <td>1</td>
    </tr>
    <tr>
        <td>p20软一</td>
        <td>刘能</td>
        <td>2</td>
    </tr>
    <tr>
        <td>p20软二</td>
        <td>谢广坤</td>
        <td>3</td>
    </tr>
</table>

在上述代码中，我们使用了<table>、<tr>、<td> 及 <th> 四个标签：

<table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。

l <tr> 是 table row 的简称，表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。

l <td> 是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。

l <th> 是 table heading 的简称，表示表格的表头。<th> 其实是 <td> 单元格的一种变体，本质上还是一种单元格。<th> 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。

//默认情况下，表格是没有边框的。但是我们可以使用 <table> 标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。本例中我们将表格的边框宽度设置为 1px。注意，px 是默认的单位，不用显式指明。

1.表格边框的合并

CSS border-collapse 属性，合并 table 表格边框

css 中的 border-collapse 属性可以将表格的边框合并为单一的边框。

其值如下：

collapse：将边框合并为单一的边框

separate：默认值，边框被分开，不会合并

inherit：继承父元素的 border-collapse 属性值。

注意：如果使用 collapse 值时，推荐设置 border-spacing 属性的值为 0。

例：table 表格的边框合并成单一的直线

CSS border-collapse 属性，合并 table 表格边框

css 中的 border-collapse 属性可以将表格的边框合并为单一的边框。

其值如下：

collapse：将边框合并为单一的边框

separate：默认值，边框被分开，不会合并

inherit：继承父元素的 border-collapse 属性值。

注意：如果使用 collapse 值时，推荐设置 border-spacing 属性的值为 0。

例：table 表格的边框合并成单一的直线

更改上述代码后如下所示

<table border="1" style="border-collapse: collapse">
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>p20软校</td>
        <td>赵四</td>
        <td>1</td>
    </tr>
    <tr>
        <td>p20软一</td>
        <td>刘能</td>
        <td>2</td>
    </tr>
    <tr>
        <td>p20软二</td>
        <td>谢广坤</td>
        <td>3</td>
    </tr>

2.表格的标题

HTML 允许使用 <caption> 标签来为表格设置标题，标题用来描述表格的内容。

我们常见的表格一般都有标题，表格的标题使用 <caption> 标签来表示。默认情况下，表格的标题位于整个表格的第一行并且居中显示。一个表格只能有一个标题，也就是说 <table> 标签中只能有一个 <caption> 标签。

更改代码后如下:

<table border="1" style="border-collapse: collapse">
    <caption>这是表格的标题</caption>
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>p20软校</td>
        <td>赵四</td>
        <td>1</td>
    </tr>
    <tr>
        <td>p20软一</td>
        <td>刘能</td>
        <td>2</td>
    </tr>
    <tr>
        <td>p20软二</td>
        <td>谢广坤</td>
        <td>3</td>
    </tr>
</table>

3.单元格合并

和 Excel 类似，HTML 也支持单元格的合并，包括跨行合并和跨列合并两种。

rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。

colspan：表示跨列合并。样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。

具体格式如下：

<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>n 是一个整数，表示要合并的行数或者列数。

此处需注意，不论是 rowspan 还是 colspan 都是 <td> 标签的属性。

下面的例子中，我们将表格第 1 列的第 3、4 行单元格合并（跨行合并），将第 4 行的第 2、3 列合并（跨列合并）。具体代码如下：

<table border="1" style="border-collapse: collapse">
    <caption>这是表格的标题</caption>
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>p20软校</td>
        <td>赵四</td>
        <td>1</td>
    </tr>
    <tr>
        <td rowspan="2">p20软一</td>
        <td>刘能</td>
        <td>2</td>
    </tr>
    <tr>
        <td colspan="2">谢广坤3</td>
    </tr>
</table>