HTML--表格列表

表格标签

• 过去表格标签使用非常多，多大渡搜狐网站都hi用表格标签制作的，是一个时代的代表
• 作用：给一堆数据添加表格语义，是一种数据的展现形式，数据量非常大时，表格是最为清晰地展现形式
• 格式：

• table代表整个表格，一堆table标签就是一个表格
• tr代表一行数据，一对tr标签等于表格中的一行
• td代表一行中的一个单元格，一堆td标签就是一行中的单元格

• 注意点
  • 边框属性决定边框宽度，默认是0，所以看不到边框,border="0"
  • 组合标签，table/tr/td一起出现，不会单个出现

属性

• 宽度和高度
  table/td标签使用

  • 默认宽高内容撑开得，也可以手动指定
  • td设置宽高，会修改当前单元格得宽高，但不影响整个表格

• 水平对齐和垂直对齐
  table/tr/td标签使用

  • 设置align控制水平方向
  • 设置valign控制垂直方向

• 外边距和内边距
  只能table使用

  • 单元格之间默认有外边距
  • 设置cellspacing="2"控制外边距大小，默认2px
    +单元格和内容之间默认有内边距
  • 设置cellpadding="1"控制内边距大小
    ，默认1px

细线表格

• 设置table的bgcolor="black" cellspacing="1px"
  tr的bgcolor=”white“可实现细线表格

表格标题

• caption标签
• 一定写在table里面，否则无效
• 一定紧跟table标签后面
• 标题自动居中

标题单元格标签

• th标签
• 当前列的标题，会自动居中+加粗文字

表格结构

• caption：标题
• thead：表头信息
• tbody：主体信息
• tfoot：页尾信息

单元格合并

• 水平方向合并
  • td标签设置colspan=”2“
• 垂直方向合并
  • td标签设置rowspan=”2“
• 合并就是把当前单元格当作两个看待，多余的单元格需要删除