标签之表格

表格在数据展示方面非常简单，并且表现优秀

表格组成与特点

表格名字 <caption>

表格头部 <thead>

• 特殊单元格 <th>

表格的身体 <tbody>

• 行 <tr>
• 列（单元格） <td>

表格的脚步 <tfoot>

---

表格特点：同行等高、同列等宽。

table 表格属性

• border：设置表格的边框
• width：设置表格的宽度
• height：设置表格的高度
• align：设置表格的水平对齐方式
• cellpadding：设置内容距离边框的距离
• cellspacing：设置单元格之间的距离
• bgcolor：设置表格背景颜色
• bordercolor：设置边框颜色
• background：设置背景图片

tr 的属性

• height：设置一行的高度
• bgcolor：设置一行的背景颜色
• background：设置一行的背景图片
• align：设置行里内容水平对齐方式，取值：left、center、right
• valign：设置行里内容垂直对齐方式，取值：top、middle、bottom

td（单元格）的属性

• width：设置单元格的宽度，同列等宽
• height：设置单元格的高度，同行等高
• align：设置单元格内容水平对齐方式
• valign：设置单元格内容垂直对齐方式
• bgcolor：设置单元格背景颜色
• background：设置单元格背景图片

快捷键

快速生成表格结构：table>tr*2>td

<table>
  <caption>
    表格名字
  </caption>
  <thead>
    <th>姓名</th>
    <th>年龄</th>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>李四</td>
      <td>20</td>
    </tr>
  </tfoot>
</table>

效果展示

<table border="1" cellspacing="0" width="300px">
  <caption>
    表格名字
  </caption>
  <thead>
    <th>姓名</th>
    <th>年龄</th>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>李四</td>
      <td>20</td>
    </tr>
  </tfoot>
</table>

单元格合并

单元格合并属性

水平合并：colspan

垂直合并：rowspan

<table border="1" width="400" height="400" align="center">
  <tr>
    <td colspan="2"></td>
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
  </tr>
</table>

效果展示

<table width="400" height="400">
  <tr align="center" bgcolor="pink">
    <td rowspan="2">酒店</td>
    <td>海外酒店</td>
    <td>团购</td>
  </tr>
  <tr align="center" bgcolor="pink">
    <td>特价酒店</td>
    <td>民宿.客栈</td>
  </tr>
  <tr align="center" bgcolor="blue">
    <td rowspan="2">机票</td>
    <td>火车票.抢票</td>
    <td>汽车票.船票</td>
  </tr>
  <tr align="center" bgcolor="blue">
    <td>特价机票</td>
    <td>专车.租车</td>
  </tr>
  <tr align="center" bgcolor="green">
    <td rowspan="2">旅游</td>
    <td>目的地攻略</td>
    <td>邮轮旅游</td>
  </tr>
  <tr align="center" bgcolor="green">
    <td>周边游</td>
    <td>定制旅行</td>
  </tr>
  <tr align="center" bgcolor="yellow">
    <td>景点玩乐</td>
    <td>美食林</td>
    <td>购物外汇</td>
  </tr>
  <tr align="center" bgcolor="yellow">
    <td>礼品卡</td>
    <td>WIFI电话</td>
    <td>保险签证</td>
  </tr>
</table>

随堂训练

轻松一刻 🎧

音乐

音乐

视频教程 🎥

A video

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。