APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > html5 >

收藏
分享到

HTML5表格语法格式介绍

html5 来源：互联网 作者：佚名 发布时间：2025-04-26 20:51:56 人浏览
摘要

一、表格 在HTML语法中，表格主要通过 table 、 tr 和 td 3个标签构成。 表格标签为 table ，行的标签为 tr ，表项的标签为 td 。 1.表格语法格式 1 2 3 4 5 6 7 8 9 10 11 12 13 table border=边框宽距 width=表格

一、表格

在HTML语法中，表格主要通过< table >、< tr >和< td >3个标签构成。

表格标签为< table >，行的标签为< tr >，表项的标签为< td >。

1.表格语法格式

1

2

3

4

5

6

7

8

9

10

11

12

13

<table border="边框宽距" width="表格宽度" height="表格高度" bordercolor="边框颜色" align="页面对齐方式" bgcolor="背景颜色">

    <caption align="表格中对齐方式">标题</caption> 

    <tr>

        <th scope="col">表头</th>

        <th scope="col">表头</th>

        <th scope="col">表头</th>

    </tr>

    <tr>

        <th scope="row">表头</th>

        <td>表项</td>

        <td>表项</td>

    </tr>

</table>

< caption >标签必须紧随< table >标签之后，为每个标签指定唯一标题。

2.表格属性

border 表格边框宽度
width 表格宽度
heigh 表格长度
align 表格相对周边对齐方式
bordercolor 边框颜色
bgcolor

背景颜色
scope 表示单元格是列（low）、行（row）的表头

 3.例子

运行代码如下：

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

33

34

35

36

37

38

39

40

41

42

43

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>表格</title>

</head>

<body>

   <table border="1" width="600" height="600" bordercolor="blue" align="center" bgcolor="#cccccc">

        <caption align="center">成绩单</caption> 

        <tr align="center">

            <td></td>

            <th scope="col">教师人数</th>

            <th scope="col">学生人数</th>

            <th scope="col">总人数</th>       

        </tr>

        <tr align="center">

            <th scope="row">2021年</td>

            <td>40</td>

            <td>400</td>

            <td>440</td>

        </tr>

        <tr align="center">

            <th scope="row">2022年</th>

            <td>100</td>

            <td>1500</td>

            <td>1600</td>

        </tr>

        <tr align="center">

            <th scope="row">2023年</th>

            <td>100</td>

            <td>1500</td>

            <td>1600</td>

        </tr>

        <tr align="center">

            <th scope="row">2024年</th>

            <td>200</td>

            <td>4000</td>

            <td>4200</td>

        </tr>

    </table>

</body>

</html>

运行结果如下：

二、不规则表格

使用 colspan 和 rowspan 属性用于建立不规则表格

1.跨行

1

2

3

4

5

<table>

       <tr>

           <td rowspan="所跨的行数">单元格内容</td>

       </tr>

</table>

rowspan 指明该单元格应有多少行的跨度，在 th 和 tr 标签中使用。

2.跨列

1

2

3

4

5

<table>

        <tr>

            <td colspan="所跨的行数">单元格内容</td>

        </tr>

</table>

colspan 指明该单元格应有多少列的跨度，在 th 和 tr 标签中使用。

注：跨越的单元格占用了原来的单元格要删除掉

3.例子

运行代码如下：

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

33

34

35

36

37

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>不规则表格</title>

</head>

<body>

    <table border="1" width="400" height="200">

        <tr>

            <td></td>

            <th scope="col">教师人数</th>

            <th scope="col">学生人数</th>

            <th scope="col">总人数</th>

        </tr>

        <tr>

            <th scope="row">2021年</th>

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

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

        </tr>

        <tr>

            <th scope="row">2022年</th>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <th scope="row">2023年</th>

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

            <td></td>

        </tr>

        <tr>

            <th scope="row">2024年</th>

            <td></td>

        </tr>

    </table>

</body>

</html>

运行结果如下：
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • html5的响应式布局的方法示例
    一 使用媒体查询响应式布局 使用的参数@media这是常用的参数 width,height代表的是浏览器可视宽度，高度 device-width:设备屏幕的宽度 device-hei

  • HTML5表格语法格式介绍

    HTML5表格语法格式介绍
    一、表格 在HTML语法中，表格主要通过 table 、 tr 和 td 3个标签构成。 表格标签为 table ，行的标签为 tr ，表项的标签为 td 。 1.表格语法格式
  • HTML5中的Microdata与历史记录管理介绍
    HTML5中的Microdata与历史记录管理 背景简介 随着HTML5技术的发展，Web应用的开发和设计经历了巨大的变革。其中，Microdata作为HTML5新增的一个特
  • HTML5 data-*自定义数据属性的代码
    HTML5 引入的自定义数据属性（data-*）为开发者提供了一种将自定义数据嵌入HTML元素的标准方法。 这个特性使得在不使用非标准属性或额外的

  • 基于Canvas的Html5多时区动态时钟实战代码

    基于Canvas的Html5多时区动态时钟实战代码
    出差旅行相信大家一定会住酒店，大家在酒店的前台进行预订的时候，是不是都会留意。通常在大堂的前方会有一面时钟，大概是下面这种

  • CSS弹性布局常用设置方式

    CSS弹性布局常用设置方式
    一、单位元素 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1v
  • 使用CSS3实现平滑的过渡动画效果
    要使用CSS3实现平滑的过渡动画，可以按照以下步骤进行： 1：定义初始状态：首先，为元素设置其初始样式。这通常是在CSS中直接定义的样
  • HTML5超链接的创建方法
    超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接

  • HTML5超链接和图片基础用法介绍

    HTML5超链接和图片基础用法介绍
    一、HTML5 超链接（链接） 超链接可以是一个文本，也可以是一幅图像，您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的

  • HTML5 Input日期选择器的介绍

    HTML5 Input日期选择器的介绍
    HTML5 Input DatePicker 对象 1 Input Date 对象表示 HTML `input type=datetime` 元素。 是 HTML5 中的新对象。 访问 Input Date 对象 1 var x = document.getElementById(
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计