HTML之创建表格

作者: WP啦啦啦 | 来源:发表于2016-12-04 22:12 被阅读103次

HTML之创建表格
HTML表格
表格
2019-01-14
HTML创建表格
表格创建的方法
动态创建表格（html）
用HTML创建表格
表格神器bootstraptable
2018-12-26

要求：用HTML实现如下所示的表格

对于初学者而言当看到这个表格的时候会不会有点懵呢？表头又是行合并，又是列合并的，我们不妨从最简单的入手，可以先将表格的主体创建好，主体的最后一行只有2列，第一列是将前3列进行合并成为1列。

<html>
<body>
  <table border="1" >
    <caption>购物车</captipon>
  <tbody style="text-align:center">
    <tr>
      <th> 苹果 </th>
      <td> 3公斤 </td>
      <td> 5元/公斤 </td>
      <td> 15元 </td>
    </tr>
    <tr>
      <th> 香蕉 </th>
      <td> 2公斤 </td>
      <td> 6元/公斤 </td>
      <td> 12元 </td>
    </tr>
    <tr>
      <th colspan=3>总价</th>
      <td>27元</td>
    </tr>
  </tbody>
  </table>
</body>
</html>

效果如下图所示：

接下来，我们就可以对表头进行分析，表头实际上是2行2列，名称列和 小计列是将两行合并成一行，2016-11-22列是将 重量 和 '单价' 列进行合并成为一列。对表头进行分析后，我们可以在表主体上添加设置表头的代码：

<thead>
  <tr >
        <th rowspan=2> 名称 </th>
        <th colspan=2> 2016-11-22 </th>
        <th rowspan=2> 小计 </th>
    </tr>
    <tr>
        <th> 重量 </th>
        <th> 单价 </th>
    </tr>
  </thead>

全部代码：

<html>
<body>
  <table border="1" style="height: 112px; width: 339px">
   <caption>购物车</captipon>
   <thead>
    <tr >
        <th rowspan=2> 名称 </th>
        <th colspan=2> 2016-11-22 </th>
        <th rowspan=2> 小计 </th>
    </tr>
    <tr>
        <th> 重量 </th>
        <th> 单价 </th>
    </tr>
  </thead>
  <tbody style="text-align:center">
  <tr>
    <td> 苹果 </td>
    <td> 3公斤 </td>
    <td> 5元/公斤 </td>
    <td> 15元 </td>
  </tr>
  <tr>
    <td> 香蕉 </td>
    <td> 2公斤 </td>
    <td> 6元/公斤 </td>
    <td class="style1"> 12元 </td>
  </tr>
  <tr>
  <td colspan=3>总价
  </td>
  <td>27元
  </td>
  </tr>
  </tbody>
  </table>
</body>
</html>

效果如图：