博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML表格的运用
阅读量:6928 次
发布时间:2019-06-27

本文共 1689 字,大约阅读时间需要 5 分钟。

table元素的简介

table标签下,通常包含caption(表格的标题),thead, tbody, tfoot,三个部分,如下表格所示:

Month Savings
Sum $180
January $100
February $80
Month Savings
Sum $180
January $100
February $80

table可以通过属性来定义它的样式,但是一般不推荐这样做,最好是通过CSS来完成样式的自定义。如果定义了属性,同时也定义了CSS样式,将以CSS样式为准。

以下属性仅作了解,并且HTML5只支持border属性。

  • align: 表示表格应该相对于父元素向左,右还是中间对齐

  • bgcolor:表格的背景颜色,值为十六进制数

  • border:定义边框的粗细

  • frame:定义哪边的边框需要显示

  • cellpadding:表格格子与内容之间的间隔

  • cellspacing:格子与格子之间的间隔

  • width:表格的宽度

tr标签,Table-Row,表示表格中的一行,通常被thead, tbody, tfoot。

th标签,表头单元格,包含头部信息,和td标签一样,被tr包裹,存在表头当中以下是Html5支持的属性。

  • colspan: 表示单元格可以横跨的列数

  • rowspan:表示单元格可以横跨的行数

  • headers:规定与单元格相关联的一个或多个表头单元格。

  • scope:规定表头单元格是否是行、列、行组或列组的头部 "col|row|colgroup|rowgroup"

td标签,Table-Data,表示的是单元格,通常被tr包裹。以下是Html5支持的属性。

  • colspan: 表示单元格可以横跨的列数

  • rowspan:表示单元格可以横跨的行数

  • headers:规定与单元格相关联的一个或多个表头单元格。

table样式的自定义

  • display: table, table-row, table-cell。

  • border-collapse:设置是否把表格边框合并为单一的边框。separate| collapse,如果为collapse,会忽略border-spacing 和 empty-cells 属性。

  • border-spacing:设置分隔单元格边框的距离。取值同border属性,只用于分离模式。

  • empty-cells:show|hide,设置是否显示表格中的空单元格。

  • caption-side:top|bottom, 表示表格标题的位置。

  • table-layout: automatic|fixed;在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。当属性值为fixed时,可以手动设置宽高,如果table的宽度或者高度确定,每个单元格将会等分。

转载地址:http://gbujl.baihongyu.com/

你可能感兴趣的文章
C++ 排序函数 sort(),qsort()的使用方法
查看>>
[备忘]Redis运行出现Client sent AUTH, but no password is set
查看>>
函数传递一维数组
查看>>
MATLAB中-27开3次方得不到-3的原因
查看>>
一个格式化字符串的函数ToString
查看>>
I/O: std::ios_base::openmode
查看>>
Web安全测试工具小集
查看>>
使用Swift模拟Window-LFU
查看>>
ElasticSearch无法启动
查看>>
mysql explain 的type解释
查看>>
jQuery遍历方式
查看>>
C++环境编译使用sqlite数据库全过程
查看>>
anaconda不错的
查看>>
大数据之 ZooKeeper原理及其在Hadoop和HBase中的应用
查看>>
vs配置D3D开发环境
查看>>
JS函数(自调函数)与闭包【高级函数】
查看>>
mysql decimal(10,2)对应java类型
查看>>
技术领导(Technical Leader)画像
查看>>
HTTP 用户认证
查看>>
android binder 基础实例及解析(一)【转】
查看>>