深入了解html中表格的结构和属性

深入了解html中表格的结构和属性

   在了解表格属性之前先来了解一下表格的结构,thead是头部,tbody是身体部分即内容,tfoot是脚部。

  • 表格的完整结构:
  
表格的标题
表头
单元格内容
脚部
  • 表格的基本结构:
表头
单元格内容
脚部

注:在上面的结构中thead、tbody、tfoot可以省略不写,不写时,则默认为tbody;th标签有字体加粗文本居中的样式。

         好了,了解了表格的结构,接下来来了解一下表格的属性,其实表格的大多数属性都被html5废弃了,在css出现之前,html4之后,常用table表格来布局页面。

  • table的属性:
属性名 含义 属性值
width 设置表格的宽度 像素(px)或者百分比(%),默认为像素
height 设置表格的高度 像素(px)或者百分比(%),默认为像素
cellpadding 单元格的边框与内容之间的距离 像素(px)或者百分比(%),默认为1px
cellspacing 单元格之间的间隔 像素(px)或者百分比(%),默认为2px
align 设置表格水平对齐 left 、center、right
frame 设置表格外边框的线 viod、box、border、above、below、hsides、lhs、rhs、vsides
rules 设置表格内边框的线 none、rows、cols、all
border 设置表格边框的粗细 默认为0
bordercolor 设置表格边框的颜色
bgcolor 设置表格背景颜色
backgroung 设置表格的背景
  • tr的属性:
属性名 含义 属性值
align 设置单格中的内容水平对齐 left、center、right
valign 设置单格中的内容垂直对齐 top、middle、bottom 、baseline(基线对齐)
bgcolor 设置表格行的背景颜色
  • td的属性:
属性名 含义 属性值
width 设置单元格的宽度 像素(px)或者百分比(%),默认为像素
height 设置单元格的高度 像素(px)或者百分比(%),默认为像素
align 设置单元格中的内容水平对齐 left、center、right
valign 设置单元格中的内容垂直对齐 top、middle、bottom 、baseline(基线对齐)
rowspan 设置跨行(纵向)合并单元格数
colspan 设置跨列(横向)合并单元格数
bgcolor 设置单元格背景颜色
backgroung 设置单元格的背景

了解一下framerules属性值:

frame的属性值 含义
viod 不显示外边框
box 显示四周的外边框
border 显示四周的外边框
above 显示上边的外边框
below 显示下边的外边框
hsides 显示上下的外边框
lhs 显示左边的外边框
rhs 显示右边的外边框
rhs 显示左右的外边框
rules的属性值 含义
none 不显示内边框 (默认值)
rows 在行之间显示内边框
cols 在列之间显示内边框
all 显示四周的内边框

好了,了解完表格的结构和表格的属性之后,让我们来看一下例子:
效果图:
深入了解html中表格的结构和属性_第1张图片
代码的写法: 设置1px的边框,宽度为450px,高度为400px,去掉单元格之间的间隔,单元格内容与边框的距离为6,边框的颜色为绿色,加上背景图片。





高中课程表



	
高中课程表
星期
早读 语文 英语 语文 英语 生物 地理 历史
上午 语文 地理 数学 英语 物理 数学 自习
英语 地理 化学 英语 生物 地理
地理 英语 地理 化学 生物 语文
数学 英语 语文 英语 物理 生物
午读 生物 地理 历史 地理 化学 物理 休息
下午 物理 地理 数学 英语 物理 化学
体育 英语 语文 英语 物理 英语
生物 英语 地理 英语 语文 休息
晚读 生物 地理 历史 地理 历史 物理 语文
晚自修 自习

今天就分享到这里,您可以设置您喜欢的表格,如有问题请留言!

你可能感兴趣的:(深入了解html中表格的结构和属性)