table(表格)单元格合并:横向合并和纵向合并

横向合并

<table border="1"  cellpadding="5" align="center">
    <caption>表格标题</caption>
    <tr align="center">
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
    <tr align="center">
      <td>a</td>
      <td>b</td>
      <td  colspan="3" >c</td>
    </tr>
    <tr align="center">
      <td>a</td>
      <td>b</td>
      <td  colspan="3" >c</td>
    </tr>
  </table>

横向合并如下:
table(表格)单元格合并:横向合并和纵向合并_第1张图片

纵向合并

  <table border="1"  cellpadding="5" align="center">
    <caption>表格标题</caption>
    <tr align="center">
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
    <tr align="center">
      <td>a</td>
      <td>b</td>
      <td  rowspan="3" >c</td>
      <td>a</td>
      <td>b</td>
    </tr>
    <tr align="center">
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
    </tr>
    <tr align="center">
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
    </tr>
  </table>

纵向合并如下:
table(表格)单元格合并:横向合并和纵向合并_第2张图片

你可能感兴趣的:(HTML(HTML5,HTML),单元格合并,横向合并,纵向合并,表格,html5)