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>

效果如下:


小注:


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


目录
相关文章
|
7月前
HTML table 标准结构
HTML table 标准结构
27 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
26 0
|
8月前
HTML table表格详解
HTML table表格详解
69 1
|
8月前
HTML table表格元素边框修改为单线
HTML table表格元素边框修改为单线
|
8月前
Html Table 固定或自定义列宽度
Html Table 固定或自定义列宽度
88 0
|
7月前
|
前端开发
HTML table 基本使用
HTML table 基本使用
23 0
|
7月前
HTML table 表头和表格的合并
HTML table 表头和表格的合并
56 0
|
7月前
|
前端开发
HTML table 表格内容垂直对齐、边框颜色、标题
HTML table 表格内容垂直对齐、边框颜色、标题
30 0
|
7月前
HTML table 细线表格
HTML table 细线表格
25 0
|
7月前
HTML table 细线课表
HTML table 细线课表
20 0