HTML ---表格

五迷三道 提交于 2020-03-09 14:59:50

表格

1.简介

表格是一个规则的行列结构,每个表格是由若干行组成,每行是由若干个单元格组成

table、row、column

2.基本结构
2.1 table标签

用来定义表格

常用属性:

  • border边框,默认值为0
  • width/height宽度/高度
  • align对齐方式,取值:left center right
  • bordercolor:边框颜色
  • bgcolor:背景颜色
  • background:背景图片
  • cellspacing:间距 单元格与单元格之间的距离
  • cellpadding:边距 单元格内容与边界之间的距离
2.2 tr标签

用来定义行:table row

常用的属性:

  • align水平对齐 取值left(默认)
  • center right valign垂直对齐 取值top middle bottom
  • bgcolor:背景颜色
  • background:背景图片
2.3 td标签

用来定义单元格:table data

常用属性:align valign bgcolor background

3.合并单元格

合并单元格也称为表格的跨行和跨列

两个属性:

  • rowspan

    设置单元格所跨的行数,如rowspan=“2” 表示跨越2行

  • colspan

    设置单元格所跨的列数,如clospan=“4” 表示跨越4列

步骤:

    1. 在跨直的单元格中设置rowspan/colspan属性
    2. 将被跨越的单元格删除
    3. 注意:必须要保证每行的实际列数是相同的,否则表格可能会出现错乱
4.高级标签
4.1 caption标签

表格的标题标签

4.2 thead标签

表格的头部table head

4.3th标签

表格的头部标题table head title

一般在thead中,设置头部标题,替代td标签,与td的区别,加粗和居中对齐

4.4 tbody标签

表格的主体 table body

4.5 tfoot标签

表格的底部table foot

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!