HTML基础——表格标签

什么是表格标签

• 作用：给一堆数据添加表格语义
• 格式

<table>
    <tr>
        <td></td>
    </tr>
</table>

• table标签表示一个表格，tr标签表示一行，td标签表示一列
• 注意点：
  • 表格标签有一个边框属性，默认为0，设置宽度格式：

<table border="1">

• 组合标签，table,tr,td一起出现

表格标签的属性

• 宽度和高度的属性
  • 可以给table和td标签使用
  • 默认按照内容的尺寸来调整，也可以通过weight和height属性来设置
  • 若给td标签设置width/height属性，会修改单元格的宽度和高度，不会修改表格的
• 水平对齐垂直对齐的属性
  • 可以给table，tr，td标签使用，垂直对齐只能给tr和td标签使用
  • 给table设置align属性，可以控制表格在水平方向的对齐方式
  • 给tr标签设置align属性，可以控制当前行中所有单元格内容的水平方向的对齐方式
  • 给td标签设置align属性，可以控制当前单元格中内容在水平方向的对齐方式
  • 给tr，td标签设置valign设置属性，可以设置垂直方向的对齐方式
  • 注意点：
    • 若tr和td中均设置了属性，以td为准
• 外边距和内边距的属性
  • 只能给table标签使用
  • 外边距：单元格之间的距离（cellspacing默认为2px）
  • 内边距：单元格边框和文字之间的间隙（cellpadding默认为1）
• 以上仅作为了解，今后的开发都是通过CSS控制样式

细线表格

• 制作方式
  • 给table设置bgcolor
  • 给tr设置bgcolor
  • 给table设置cellspacing=1px
• 注意点：
  • table，tr，td均支持bgcolor

其余标签

• 表格标题标签caption
  • 在表格标签中用来设置表格的标题：caption，标题自动相对于表格居中
  • 注意点：
    • 一定要写在table标签中
    • 紧跟在table标签后面
• 标题单元格标签
  • th标签：专门存储每一列的标题——自动居中+加粗文字