欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[HTML]表格标签table的使用(基本语法、属性、单元格合并)

程序员文章站 2022-06-10 14:23:51
本博客记录了HTML中table表格标签的使用,并记录了相关标签及属性的用法,同时介绍了单元格合并的两种方式(跨行合并和跨列合并) ......
  • 基本语法

        <table>

                <thead>

                        <tr><th></th></tr>

                </thead>

                <tbody>

                        <tr><td></td></tr>

                </tbody>

        </table>

  • 标签说明
标签 含义 说明
table 表格 表格的最外层标签
thead 表格的头部区域 表示表格头部内容
tbody 表格的主体区域 表示表格主体内容
tr 一行 表格中可以有多行
td 一个单元格 一行中可以有多个单元格
th 表头单元格 默认加粗居中
  • table的相关属性
属性 含义 说明
align 表格对齐方式 值有left(左)、center(中)和right(右)三种情况
border 表格边框 可以设置像素值(注意无单位),默认无边框(值为0)
width 表格宽度 可以设置像素值(无单位)或百分比
height 表格高度 可以设置像素值(无单位)或百分比
cellpadding 单元格内边距 像素值(无单位),规定单元格边沿与其内容之间的空白,默认1像素
cellspacing 单元格间距 像素值(无单位),规定单元格之间的空白,默认2像素
  • 合并单元格
合并方式 写法 说明
跨行合并 rowspan = "合并单元格的个数" 写到td标签内,后面行同一列指定数量的单元格会被合并
跨列合并 colspan = "合并单元格的个数" 写到td标签内,同一行后面列指定数量的单元格会被合并