如何仅使用 HTML 或 MARKDOWN 创建此 table？

Question

我需要用下面的 table 创建一个文档，它可以是 HTML 也可以是 MARKDOWN，但我就是做不到。困难在于将 LATAM 和 ITPT 分成多行。有人可以帮忙吗？

Answer 1

您可以在 html 上使用 colspan 和 rowspan 基于 table 实现此操作。

<table border="1" width="100%">
  <tr>
    <td colspan="2">HCM</td>
    <td>C88</td>
    <td>C7Z</td>
    <td>C6Z</td>
    <td>CHR</td>
    <td>CHR</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="5" style="writing-mode: vertical-rl; text-orientation: upright;">LATAM</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Answer 2

使用 colspan 和 rowspan 您可以控制每个 td 的显示方式，例如输出您在设计中显示的包含 LATAM 的结构，您需要使用 rowspan=5。这将表明所述 td 元素将 'stretch'，为了更好的词，超过 5 行。

注意我了解到您要求仅在 HTML 中完成此操作，高度和边框是为了更好的可视化。

td {
  border: 1px solid black;
  height: 32px;
}

<table>
  <tr>
    <td colspan=2>
      HCM
    </td>
    <td>
      C88
    </td>
    <td>
      C7Z
    </td>
    <td>
      C7H
    </td>
    <td>
      C6Z
    </td>
    <td>
      CHR
    </td>
  </tr>

  <tr>
    <td colspan=2>
      BR
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>

  <tr>
    <td rowspan=5 style=>
      L<br>A<br>T<br>A<br>M
    </td>
    <td>
      AR
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>

  <tr>
    <td>
      CL
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>
  <tr>
    <td>
      CO
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>
  <tr>
    <td>
      MX
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>
  <tr>
    <td>
      VE
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>
  <tr>
    <td colspan=2>
      ES
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>
  <tr>
    <td colspan=2>
      NA
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>

  <tr>
    <td rowspan=5 style=>
      I<br>T<br>P<br>T
    </td>
    <td>
      IT
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>

  <tr>
    <td>
      PT
    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
    <td>

    </td>
  </tr>
</table>

Answer 3

td {
  border: 2px solid black;
  text-align: center
}

table {
border-collapse: collapse;
}

.break {
word-break: break-all;
width: 1em;
letter-spacing: 1em;
}

<table>
  <tr>
    <td colspan=2>HCM</td>
    <td>C88</td>
    <td>C7Z</td>
    <td>C7H</td>
    <td>C6Z</td>
    <td>CHR</td>
  </tr>
  <tr>
    <td colspan=2>BR</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan=5 class="break">LATAM</td>
    <td>AR</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>CL</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>CO</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>MX</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>VE</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>ES</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>NA</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan=2 class="break">ITPT</td>
    <td>IT</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>PT</td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr></tr>
</table>

比较费力，但是很管用

如何仅使用 HTML 或 MARKDOWN 创建此 table？

how to create this table with HTML or MARKDOWN only?

html

markdown