千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频

表格

<tr> table row缩写 表格行
<td> table data cell 表格数据单元
注:
- table中不可以有其他标签,只能放入td中。
- 每个tr中的td标签个数相同
- <th>实现表格内文字加粗效果,且语义性更强。意为表头单元格。
表格属性
表格单元线:给table一个border属性
表格高度与宽度:给table一个width与height属性 。(二者均与总高度与宽度)
单元格之间的间隙问题:
- cellspacing:定义是单元格之间的距离。
- cellpadding:定义是单元格边框和文本之间的距离。
- align:表格水平对齐方式。(left左侧对齐、right右侧对齐、center居中对齐。)
- bgcolor:修饰表格背景颜色。
- bordercolor修饰表格边框的颜色。
注:这些属性均写在table标签之中。
tr的属性
tr属性没有宽度属性,但有高度属性
表格中如果给一个元素的属性不同的属性值,会采取就近原则。
- align:表格内容的水平对齐方式。(left左侧对齐、right右侧对齐、center居中对齐。)
- valign:表格内容的垂直对齐方式。(top:顶部对齐、middle:居中对齐、bottom:底部对齐)
td的属性
注:调整任何单元格的宽度都会影响该单元格所在列的所有单元格的宽度。同理,高度调整也会改变这行所有单元格的高度。
- align:表格内容的水平对齐方式。(left左侧对齐、right右侧对齐、center居中对齐。)
- valign:表格内容的垂直对齐方式。(top:顶部对齐、middle:居中对齐、bottom:底部对齐)
合并单元格
水平合并单元格:需要跨列进行,保留第一个单元格并铺满整个空间。
colspan:列合并,意为跨列,属性值为数字,没有单位,数字为需要占据的单元格的数量。
垂直合并单元格:需要跨行进行,保留第一个单元格并铺满整个空间。
rowspan:行合并,意为跨行,属性值为数字,没有单位,数字为需要占据的单元格的数量。
表格标题和结构分组
表格标题:caption,双标签,一般放在table标签之后,第一个tr标签之前。
注:均为双标签,一个表格只允许使用一个thead和一个tfoot,但允许使用多个tbody
行分组
- thead:表格体
- tbody:与thead标签同级,里面放tr与td标签。
- tfoot:表格脚
列分组
colgroup:column group的缩写,常用于定义一整列的元素,属性span,属性值为数字,意为多少列分为一组。