表格跨行和跨列

HTML 表格单元格可以跨越多行或跨越多列。

跨列

使用th或td元素的colspan属性可以实现单元格跨越多列，colspan 的值是要跨的列数。

<style>
    table { width: 100%; }
    table,th,td{
        border:1px solid black;
        border-collapse:collapse;
    }
    th{background: #eee;}
</style>
<table>
    <tr>
        <th></th>
        <th colspan="4">科目，我跨了4列</th>
    </tr>
    <tr>
        <th></th>
        <th>语文</th>
        <th>数学</th>
        <th>物理</th>
        <th>化学</th>
    </tr>
    <tr>
        <td>郝来吴</td>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <td>刘美溪</td>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
</table>

about:blank

跨行

使用th或td元素的rowspan属性可以实现单元格跨越多行，rowspan 的值是要跨的行数。

<style>
    table { width: 100%; }
    table,th,td{
        border:1px solid black;
        border-collapse:collapse;
    }
    th{background: #eee;}
</style>
<table>
    <tr>
        <th rowspan="2">我跨了2行</th>
        <th colspan="4">科目</th>
    </tr>
    <tr>
        <th>语文</th>
        <th>数学</th>
        <th>物理</th>
        <th>化学</th>
    </tr>
    <tr>
        <td>郝来吴</td>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <td>刘美溪</td>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
</table>

about:blank

HTML 参考

名称	描述

CSS 参考

名称	描述