目录

• 表格标签基本使用

一、表格标签基本使用

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

• 细线表格制作方式

1. table标签设置bgcolor 为black
2. tr标签设置bgcolor 为white

3. table 设置 cellspacing 为1px

   
   
   image.png

image.png

四、其它标签【了解】

1. 使表格标题居中于表格

image.png

image.png

image.png

image.png

2.标题单元格标签

th标签

• 自动加粗 居中

  
  
  image.png
  
  
  image.png

四、单元格合并

1. 水平方向单元格合并

2.垂直方向单元格合并