HTML表格跨行、跨列操作(rowspan、colspan)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在做商品sku时候看到合并行 rowspan

一般使用td元素的colspan属性来实现单元格跨列操作，使用td元素的rowspan属性来实现单元格的跨行操作

rowspan：

rowspan：属性规定单元格可横跨的列数，所有浏览器都支持rowspan属性。其取值为number，如下图所示

第一行没有加rowspan合并行之前：

第一行加rowspan，第二行没有删除星期一：

第一行加rowspan，第二行删除星期一：

代码：

    <table border="1">
        <tr>
            <!-- 竖跨多少行 -->
            <td rowspan="2">星期一</td>
            <td>星期二</td>
            <td>达摩</td>

        </tr>
        <tr>
            <td>星期一</td>
            <td>水果</td>
            <td>零食</td>
        </tr>
        <tr>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
        </tr>
    </table>

colspan

colspan：属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。其取值为number，如下图所示：

合并列：

 <table border="1">
        <tr>
            <th colspan="3">物资详情说明</th>
        </tr>
        <tr>
            <td colspan="2" align="center">数量(支)</td>
            <td rowspan="2">重量(吨)</td>
        </tr>
        <tr>
            <td>实发数</td>
            <td>实收数</td>
        </tr>
        <tr>
            <td>12</td>
            <td>10</td>
            <td>100.00</td>
        </tr>
    </table>

综合案例：课程表

 <table border=3 bordercolor="blue" align="center">
        <caption align="center"><strong>课程表</strong></caption>
        <tr>
            <th>项目</th>
            <th colspan=5 align="center">上课</th>
            <th colspan=2 align="center">放假</th>
        </tr>
        <tr>
            <th>星期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期天</th>
        </tr>
        <tr>
            <td rowspan=4>上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan=4 align="center">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td rowspan=2>下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan=2 align="center">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
    </table>

总结colspan和rowspan的使用：

colspan="xxx" 横跨多少列  rowspan="xxx" 竖跨多少行