html如何合并表格


本文摘自PHP中文网,作者藏色散人,侵删。

html合并表格的方法:首先创建一个HTML示例文件;然后通过table创建表格;接着使用rowspan属性合并两行或更多行;最后使用colspan属性将两个或多个列合并为一个列即可。

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

HTML的表格及单元格合并

表格

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML的表格</title>

    </head>

    <body>

        <center><h1>员工信息表</h1></center>

        <hr>

        <!--表格,border="1px"表示设置表格边框为1像素-->

        <table align="center" border="1px" height="30%" width="150px">

            <!--行-->

            <!--align对齐方式-->

            <tr align="center">

                <!--单元格-->

                <td>a1</td>

                <td>a2</td>

                <td>a3</td>

            </tr>

            <tr>

                <td>b1</td>

                <td>b2</td>

                <td>b3</td>

            </tr>

            <tr align="center">

                <td>c1</td>

                <td>c2</td>

                <td>c3</td>

            </tr>

        </table>

    </body>

</html>

在这里插入图片描述

单元格合并

rowspan和colspan

1、如果要合并两行或更多行,则将使用rowspan属性。
2、如果要将两个或多个列合并为一个列,将使用colspan属性。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>表单元格合并</title>

    </head>

    <body>

        <table align="center" border="1px" width="50%">

            <tr>

                <td>a1</td>

                <td>a2</td>

                <td>a3</td>

            </tr>

            <tr>

                <td>b1</td>

                <td>b2</td>

                <!--

                1、row合并的时候,删除“下面的”单元格。

                2、row合并的时候,对删除哪个没有要求。

                -->

                <td rowspan="2">b3c3</td>

            </tr>

            <tr>

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

            </tr>

        </table>

    </body>

</html>

在这里插入图片描述

阅读剩余部分

相关阅读 >>

Html页面如何显示上标和下标

Html轮播图如何实现

Html的<frameset>标签有什么作用

Html怎么设置倾斜

Html中的label标签怎么设置高度?label标签的使用方法介绍

Html 超级链接详细讲解

父元素<a>标签的默认行为以及click事件之间的相互影响

Html是编程语言吗

Html页面点击下载文件的两种实现方法

Html的版本

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...