表格标签
- 过去表格标签使用非常多,多大渡搜狐网站都hi用表格标签制作的,是一个时代的代表
- 作用:给一堆数据添加表格语义,是一种数据的展现形式,数据量非常大时,表格是最为清晰地展现形式
- 格式:
<table border="0">
<tr>
<td></td>
</tr>
</table>
- table代表整个表格,一堆table标签就是一个表格
- tr代表一行数据,一对tr标签等于表格中的一行
- td代表一行中的一个单元格,一堆td标签就是一行中的单元格
- 注意点
- 边框属性决定边框宽度,默认是0,所以看不到边框,border="0"
- 组合标签,table/tr/td一起出现,不会单个出现
属性
-
宽度和高度
table/td标签使用- 默认宽高内容撑开得,也可以手动指定
- td设置宽高,会修改当前单元格得宽高,但不影响整个表格
-
水平对齐和垂直对齐
table/tr/td标签使用- 设置align控制水平方向
- 设置valign控制垂直方向
-
外边距和内边距
只能table使用- 单元格之间默认有外边距
- 设置cellspacing="2"控制外边距大小,默认2px
+单元格和内容之间默认有内边距 - 设置cellpadding="1"控制内边距大小
,默认1px
细线表格
- 设置table的bgcolor="black" cellspacing="1px"
tr的bgcolor=”white“可实现细线表格
表格标题
- caption标签
- 一定写在table里面,否则无效
- 一定紧跟table标签后面
- 标题自动居中
标题单元格标签
- th标签
- 当前列的标题,会自动居中+加粗文字
表格结构
- caption:标题
- thead:表头信息
- tbody:主体信息
- tfoot:页尾信息
单元格合并
- 水平方向合并
- td标签设置colspan=”2“
- 垂直方向合并
- td标签设置rowspan=”2“
- 合并就是把当前单元格当作两个看待,多余的单元格需要删除
网友评论