html5中table的意思是什么


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

在html中,table是表格,语法格式为“<table>表格内容</table>”。一个简单的HTML表格包括table元素,一个或多个tr、th以及td元素;tr元素定义表格行,th元素定义表头,td元素定义表格单元。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

简单的HTML表格是由table标签以及一个或者多个tr,th,td元素组成。

table标签

  • table标签可以定义简单的表格,它主要是用来控制表格的外边框的,它拥有margin属性主要是设置表格的外边距。border属性用于设置表格的边框以及cellspacing属性用于规定单元格之间的空白

tr部分:

  • tr是主要用来来分割表格中有几行,一般只需要用来设定heigth

td部分:

  • td是用来控制每个单元格的属性,可是分别控制每个单元格的上下左右边框,其中也包含padding属性。

th部分:

  • th的用法与td的用法相同,只是它是用来区分表头的。

注意:在表格中国使用百分比和使用像素为单位是相同的

例:

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

<!DOCTYPE html>

<html>

  <head>

    <title>test</title>

  </head>

  <body>

    <table border="1">

      <tr>

        <th>NAME</th>

        <th>AGE</th>

        <th>NUMBER</th>

      </tr>

      <tr>

        <td>xm</td>

        <td>10</td>

        <td>2020</td>

      </tr>

      <tr>

        <td>xh</td>

        <td>3</td>

        <td>2021</td>

      </tr>

      <tr>

        <td>xf</td>

        <td>4</td>

        <td>2010</td>

      </tr>

    </table>

  </body>

</html>

  效果图:

ML@NP$C]U7HXZHR{O{R(V[J.png

表格的跨行与跨列处理

我们也可以通过设置单元格的colspan属性使其跨列合并,也可以设置单元格的rowspan属性使其跨行合并,如下所示

实例:

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

<!DOCTYPE html>

<html>

  <head>

    <title>test</title>

  </head>

  <body>

    <table border="1">

      <tr>

        <th>NAME</th>

        <th>AGE</th>

        <th>NUMBER</th>

      </tr>

      <tr>

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

        <td>10</td>

        <td>2020</td>

      </tr>

      <tr>

        <td>3</td>

        <td>2021</td>

      </tr>

      <tr>

        <td>xf</td>

        <td>4</td>

        <td>2010</td>

      </tr>

    </table>

  </body>

</html>

结果:

5NC~655~S@GVC8ZAZ)_O(5Q.png

推荐学习:html视频教程

以上就是html5中table的意思是什么的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

xml与Html的区别是什么

语义化的Html结构有哪些对于对网站的优化

Html文件基本结构介绍

Html meta标签使用及属性的详细分析

Html b标签怎么用

css实现菜单按钮动画的代码示例

几种关于Html和css的使用方法

Html如何去掉滚动条

Html li怎么去掉点

Html脚本javascript的功能

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




打赏

取消

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

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

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

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

评论

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