HTML实现合并单元格

我们要做如下样式的一个表格

• 首先实现一个简单的表格
  • 这个表格有四行四列，那我就先做一个这样的表格
  • 表格由 ** <table> ** 来定义，行由<tr>定义，列<td>来定义，
    主要结构是：

<table  border="1">
   <tr>
    <td>...</td>
    <td>...</td>
    ...
  </tr>
  ...
</table>

• 最后实现的简单表格
  

  

• 下一步需要合并单元格，需要使用的如下

  • rowspan，作用是指定单元格纵向跨越的行数。
  • colspan的作用是指定单元格横向跨越的列数。
  • 只要加在你需要合并的<td>里

//colspan用法
<table border="1">
  <tr>
     <td colspan=“3”> </td>    //表示所在单元格横跨三列
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

// rowspan用法
 <table border="1">
   <tr>
     <td rowspan=“3”> </td>    //表示所在单元格横跨三行
    <td> </td>
   </tr>
   <tr>
      <td> </td>
   </tr>
   <tr>
      <td> </td>
   </tr>
</table>

• 合并好单元格之后的效果

• 最后需要加一个居中标题
  • html有一个标签caption 专门定义表格标题，并且在表格上方居中

<table  border="1">
  <caption>购物车</caption>
   ...
</table

• 最后发现一个问题
• 表格中的文字没有加粗和居中

  如果把 td 换成 th 一切就都好了
  注意：th 用于表头