美文网首页
HTML实现合并单元格

HTML实现合并单元格

作者: LYF闲闲闲闲 | 来源:发表于2016-11-27 12:28 被阅读815次

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

  • 首先实现一个简单的表格
    • 这个表格有四行四列，那我就先做一个这样的表格
    • 表格由 ** <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 用于表头

相关文章