目录
- 表格标签基本使用
一、表格标签基本使用
1. 格式
<table>
<tr>
<td></td>
</tr>
</table>
- 一个table代表一个表格
- tr标签代表表格中的一行数据
- td标签代表表格中一行中的一个单元格
2.作用
给数据添加表格语义
3.注意点
-
table 标签有一个边框属性，决定边框的宽度。默认为0.
image.png
image.png - table tr td 组合出现，不会单独出现。
二、表格标签的属性 【了解】
1.宽度和高度的属性
- 可以给table标签和td标签使用
1.1
表格的宽度和高度默认是按照内容的尺寸调整的，也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
1.2
如果给td标签设置width/height属性，会修改当前单元格的高度和宽度，但不会影响整个表格的高度和宽度。
2.水平对齐和垂直对齐的属性
- 水平对齐可以给table标签和tr标签和td标签使用
- 垂直对齐只能给tr td标签使用
2.1
给table标签设置align属性可以改变表格在水平方向的对齐方式
2.2
给tr标签设置align属性，可以控制当前行中内容的对齐方式。
2.3
给td标签设置align属性，可以控制当前单元格中内容在水平方向的对齐方式
注意 如果td 和tr都设置了align属性，那么单元格内容会按照td中的设置对齐。
2.4
给tr标签设置valign属性，可以控制当前行中内容的对齐方式。
2.5
给td标签设置valign属性，可以控制当前单元格中内容的对齐方式
注意如果td 和tr都设置了valign属性，那么单元格内容会按照td中的设置对齐。（与水平对齐的相同）
3. 外边距和内边距的属性
- 只能给table标签使用
3.1 外边距
- 外边距是单元格和单元格之间的距离
-
默认外边距为2
image.png
image.png
image.png
image.png
3.2 内边距
- 内边距是指单元格边框与内容之间的距离
- 默认为1
image.png
image.png
image.png
image.png
三、细线表格【了解】
-
如果令外边距=0，只是表格内外两个边框的线重合在一起，而不是真正的细线表格
例：
image.png
image.png
- 细线表格制作方式
- table标签设置bgcolor 为black
- tr标签设置bgcolor 为white
-
table 设置 cellspacing 为1px
image.png
image.png
四、其它标签【了解】
1. 使表格标题居中于表格
image.png
image.png
image.png
image.png
2.标题单元格标签
th标签
-
自动加粗 居中
image.png
image.png
