如何创建3列4行的复杂HTML表？

Question

我正在尝试创建一张像这张照片一样的桌子

我对行距感到困惑。

Answer 1

您可以使用online html table generator进行测试。这就是我尝试过的内容（简单版本，易于理解，不言自明）：

<table border=1>
 <tbody>
  <tr>
   <th colspan="6">Seasons</th>
  </tr>
  <tr>
   <td colspan="2" rowspan="2">March/April</td>
   <td rowspan="5">spring</td>
   <td colspan="3">Cold</td>
  </tr>
  <tr>
   <td colspan="3">Warm</td>
  </tr>
  <tr>
   <td colspan="2" rowspan="3">picture</td>
   <td colspan="3" rowspan="3">Warm</td>
  </tr>
 </tbody>
</table>

因此基本上您需要rowspan和colspan。请注意，使用rowspan会创建一个块，因此下一行<td>中的下一个表数据<tr>将跳过。

Answer 2

第二行有两列，应该有三列。您可以编辑表格的CSS。

<table border="1" style="width: 40%; border:1px; border-spacing: 10px; box-shadow:5px 5px 10px 5px orange; background-color:cyan">
  <tr>
    <th style="color:seagreen; font-size:20px;" colspan="3"> Seasons </th>
  </tr>
  <tr>
    <td style="width:20%; font-size:15px;" rowspan="2"> March/April </td>
    <td style="width:15%; font-size:15px;" rowspan="3"> Spring </td>
    <td>Cold</td>
  </tr>
  <tr>
    <td>EWarm</td>
  </tr>
  <tr>
    <td style="background-position: center; background-repeat: no-repeat; background-image: url(fall.jpg)">
    </td>
    <td> Warm </td>
  </tr>
</table>

Answer 3

我在下面添加了表结构，我使用this网站生成了该表结构。

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:15px 15px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:15px 15px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-0pky" colspan="3"></th>
  </tr>
  <tr>
    <td class="tg-0pky" rowspan="2"></td>
    <td class="tg-0pky" rowspan="3"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
</table>

如果您不希望生成表，则使用colspan和其他表属性创建表，请阅读有关HTML table的更多信息