Html Table 合并单元格

简介: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><ol> <li>基本表格</li> &lt
<!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>

效果如下:


小注:


表格部分基础知识:点击打开链接


相关文章
|
8月前
HTML table表格详解
HTML table表格详解
69 1
|
7月前
HTML table 细线表格
HTML table 细线表格
25 0
|
7月前
HTML table 表头和表格的合并
HTML table 表头和表格的合并
56 0
|
移动开发 HTML5
HTML5学习-合并单元格
HTML5学习-合并单元格
Html:正确给table表格加边框
Html:正确给table表格加边框
124 0
Html:正确给table表格加边框
HTML - Table
HTML - Table
69 0
HTML - Table
如何在HTML中添加表格标题?(HTML中table添加标题的2种方法)
如何在HTML中添加表格标题?(HTML中table添加标题的2种方法)
717 0
如何在HTML中添加表格标题?(HTML中table添加标题的2种方法)
|
前端开发 JavaScript
HTML对表格隔行变色
js版: window.onload = function(){ //1.
3719 0