如何实现表格列中每个表头下对应多行独立单元格元素？

你现在用<br>在单元格内换行，只是把内容挤在同一个单元格里，并不是真正的表格行。要实现每个名字在独立行且对应表头的效果，有两种常用方法：

方法1：每个条目单独占一行 #

为每个名字创建独立的<tr>行，每一行对应各分类的<td>单元格，没有内容的单元格可以留空：

<table>
  <tr>
    <th>Category 1</th>
    <th>Category 2</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
  </tr>
  <tr>
    <td>Brandon</td>
    <td></td>
  </tr>
  <tr>
    <td>Steph</td>
    <td>Lisa</td>
  </tr>
  <tr>
    <td>Emily</td>
    <td></td>
  </tr>
  <tr>
    <td>John</td>
    <td>Mike</td>
  </tr>
</table>

方法2：用rowspan合并单元格（适合分组对应场景） #

如果需要让某一分类的条目对应另一分类的多个条目，可以用rowspan属性合并单元格，视觉上更紧凑：

<table>
  <tr>
    <th>Category 1</th>
    <th>Category 2</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td rowspan="2">Tobias</td>
  </tr>
  <tr>
    <td>Brandon</td>
  </tr>
  <tr>
    <td>Steph</td>
    <td>Lisa</td>
  </tr>
  <tr>
    <td>Emily</td>
    <td rowspan="2">Mike</td>
  </tr>
  <tr>
    <td>John</td>
  </tr>
</table>

这两种方法都能实现你要的「每个条目位于独立行」的效果，区别在于是否需要让分类列的内容跨多行对应。

内容的提问来源于stack exchange，提问作者Finalmix6