html5 table标签 单元格合并

文章全篇

合并前效果：

合并之后：

 代码：

<h4>合并单元格</h4>
<h5>合并之前</h5>
<table border="1" cellspacing="0" width="580" height="320">
    <caption>
        <strong>个人简介</strong>
    </caption>
    <tr align="center">
        <td>
            <strong>姓名：</strong>刘德华
        </td>
        <td>
            <strong>性别：</strong>男
        </td>
        <td>
            <strong>年龄：</strong>61
        </td>
        <!-- 目标单元格 先上后下 -->
        <td width="120">
            照片
        </td>
    </tr>
    <tr align="center">
        <td>
            <strong>身高：</strong>175
        </td>
        <td>
            <strong>民族：</strong>汉
        </td>
        <td>
            <strong>婚姻：</strong>未婚
        </td>
        <td width="120">
            照片
        </td>
    </tr>
    <tr align="center">
        <td>
            <strong>个人简介</strong>
        </td>
        <!-- 目标单元格 先左后右 -->
        <td>
            个人简介内容
        </td>
        <td>
            个人简介内容
        </td>
        <td>
            个人简介内容
        </td>
    </tr>
    <tr align="center">
        <td>
            <strong>个人作品</strong>
        </td>
        <!-- 目标单元格 先左后右 -->
        <td>
            个人作品内容
        </td>
        <td>
            个人作品内容
        </td>
        <td>
            个人作品内容
        </td>
    </tr>
</table>
<h5>合并之后</h5>
<table border="1" cellspacing="0" width="580" height="320">
    <caption>
        <strong>个人简介</strong>
    </caption>
    <tr align="center">
        <td>
            <strong>姓名：</strong>刘德华
        </td>
        <td>
            <strong>性别：</strong>男
        </td>
        <td>
            <strong>年龄：</strong>61
        </td>
        <!-- 跨行合并用rowspan，目标单元格 先上后下 -->
        <td rowspan="2" width="120">
            照片
        </td>
    </tr>
    <tr align="center">
        <td>
            <strong>身高：</strong>175
        </td>
        <td>
            <strong>民族：</strong>汉
        </td>
        <td>
            <strong>婚姻：</strong>未婚
        </td>
        <!--多出的部分删除掉 -->
        <!-- <td>
            照片
        </td> -->
    </tr>
    <tr align="center">
        <td>
            <strong>个人简介</strong>
        </td>
        <!-- 跨列合并用colspan，目标单元格 先左后右 -->
        <td colspan="3">
            个人简介内容
        </td>
        <!--多出的部分删除掉 -->
        <!-- <td>
            个人简介内容
        </td>
        <td>
            个人简介内容
        </td> -->
    </tr>
    <tr align="center">
        <td>
            <strong>个人作品</strong>
        </td>
        <!-- 跨列合并用colspan，目标单元格 先左后右 -->
        <td colspan="3">
            个人作品内容
        </td>
        <!--多出的部分删除掉 -->
        <!-- <td>
            个人作品内容
        </td>
        <td>
            个人作品内容
        </td> -->
    </tr>
</table>