一、表格
- 用途: 之前是用来布局的,现在明显是表格的数据才用
1.标签
- 块标签
- table 整个表格的容器
- tr 表示一行
- caption 表格标题 一个表格里只能有一个标题
- thead 有表格表头的语义
- tbody 有表格主体的语义
- tfoot 有表格页脚的语义
- 内联块标签
- th 表示一个单元格 , 有表头的语义,自带文字加粗和居中的样式
- td 表示一个普通的单元格
2.属性
-
width / height
- 设置到单元格上 , 设置宽度,该单元格所在一列的宽度都改变;设置高度,该单元格所在一行的高度都改变
- 设置到table上,所有单元格按照内容的比例来分配整个表格的宽高
-
cellspacing: 设置到table标签上,控制单元格与单元格之间空隙
-
cellpadding : 设置到table标签上,控制单元格边框到内容之间的空隙
-
border : 设置到table标签上,边框
-
colspan: 设置到单元格上, 跨列合并
-
rowspan: 设置到单元格上,跨行合并
-
align : (了解) left | center | right 设置到单元格上,设置的是该单元格内容的水平对齐方式; 设置到tr上,该行里所有单元格内容得水平对齐方式; 设置到table上,整个表格在浏览器中的水平对齐方式
3.css样式
- border-collapse: collapse; 边框线合并
table{
/* 单元格之间的边框线独立(默认值) */
border-collapse: separate;
/* 单元格之间的边框线合并 */
border-co