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>

效果如下:


小注:


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


相关文章
|
2月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
8月前
HTML table 表头和表格的合并
HTML table 表头和表格的合并
58 0
|
8月前
|
存储 移动开发 数据安全/隐私保护
HTML基础--Form表单--内联元素
HTML基础--Form表单--内联元素
零基础HTML入门教程(15)——合并单元格
我们上小节学习了表格,以及他的基本使用,那我们这一小节学习一下,合并单元格,并熟练使用。合并单元格时,合并行使用:colspan=“2”; 合并列使用:rowspan=“2” (这里的 ‘2’ 表明合并两个单元格) 效果如下 我们可以看到,表格合并了,为什么要学习表格合并那,因为我们再平时做表格的时候合并表格可以是他更容易看清内容使内容清晰,我们熟练掌握合并标签。
零基础HTML入门教程(15)——合并单元格
|
移动开发 HTML5
HTML5学习-合并单元格
HTML5学习-合并单元格
|
JavaScript
HTML之<button><select><optgroup>元素详解
一篇了解<button><select><optgroup>元素
135 0
HTML之<button><select><optgroup>元素详解
|
前端开发 JavaScript
HTML对表格隔行变色
js版: window.onload = function(){ //1.
3720 0
|
数据安全/隐私保护 JavaScript
|
Web App开发 移动开发 HTML5

相关实验场景

更多