您的位置：首页 > Web前端 > HTML

Html Table 合并单元格

2017-08-23 11:26 162 查看
版权声明：作者：jiankunking 出处：http://blog.csdn.net/jiankunking 本文版权归作者和CSDN共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

[html] view
plain copy

<!DOCTYPE html>  

<html lang="en">  

<head>  

    <meta charset="UTF-8">  

    <title></title>  

</head>  

<body>  

<ol>  

    <li>基本表格</li>  

    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">  

        <tr>  

            <td>1.1</td>  

            <td>1.2</td>  

            <td>1.3</td>  

        </tr>  

        <tr>  

            <td>2.1</td>  

            <td>2.2</td>  

            <td>2.3</td>  

        </tr>  

        <tr>  

            <td>3.1</td>  

            <td>3.2</td>  

            <td>3.3</td>  

        </tr>  

    </table>  

    <br/>  

    <li>表格合并列</li>  

    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">  

        <tr>  

            <td colspan="3" >1.1</td>  

            <!--<td>1.2</td>-->  

            <!--<td>1.3</td>-->  

        </tr>  

        <tr>  

            <td>2.1</td>  

            <td>2.2</td>  

            <td>2.3</td>  

        </tr>  

        <tr>  

            <td>3.1</td>  

            <td>3.2</td>  

            <td>3.3</td>  

        </tr>  

    </table>  

    <br/>  

    <li>表格合并行</li>  

    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">  

        <tr>  

            <td  rowspan="3">1.1</td>  

            <td>1.2</td>  

            <td>1.3</td>  

        </tr>  

        <tr>  

            <!--<td>2.1</td>-->  

            <td>2.2</td>  

            <td>2.3</td>  

        </tr>  

        <tr>  

            <!--<td>3.1</td>-->  

            <td>3.2</td>  

            <td>3.3</td>  

        </tr>  

    </table>  

    <br/>  

    <li>复杂表格</li>  

    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">  

        <tr>  

            <td >1.1</td>  

            <td colspan="2">1.2</td>  

            <!--<td>1.3</td>-->  

        </tr>  

        <tr>  

            <td >2.1</td>  

            <td rowspan="2">  

                2.2  

                <br/>  

                3.2  

            </td>  

            <td>2.3</td>  

        </tr>  

        <tr>  

            <td>3.1</td>  

            <!--<td>3.2</td>-->  

            <td>3.3</td>  

        </tr>  

    </table>  

    <br/>  

</ol>  

</body>  

</html>  

效果如下：



小注：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航