html-table - 为什么 jekyll-spaceship 的表处理器添加了这么多中断标签/？

Question

我在一个 Jekyll 网站上工作，并且正在使用jekyll-spaceship插件专门用于它的表处理器。

问题：我有一个 2 行的 3 列表。该行中的最后一个单元格是多行单元格，而前 2 个单元格只有 1 行。当表格呈现时，它会<br>在单行单元格的内容下方放置相同数量的标签，从而无法进行垂直对齐。

我试过的

1. \在末尾使用，指定多行

   | Type | Thumbnail{: width="200" }         | File Types & Sizes                        |
   | :--- | :-------------------------------- | :---------------------------------------- |
   | PNG  | ![PNG][png-image]                 | - [High Res](/img/logos/VTKm_Logo_Hi.png) \
   |      |                                   | - [1024](/img/logos/VTKm_Logo_1024.png)   \
   |      |                                   | - [512](/img/logos/VTKm_Logo_512.png)     \
   |      |                                   | - [256](/img/logos/VTKm_Logo_256.png)     \
   |      |                                   | - [128](/img/logos/VTKm_Logo_128.png)     \
   |      |                                   | - [64](/img/logos/VTKm_Logo_Hi.png)
   | :--- | :-------------------------------- | :---------------------------------------- |
   | SVG  | ![SVG][svg-image]                 | - [SVG](/img/VTKm_Logo.svg)               \
   |      |                                   | - [PDF](/img/logos/VTKm_Logo.pdf)         
   
   [png-image]: /img/logos/VTKm_Logo_512.png "VTK-m Logo (PNG Version)"
   [svg-image]: /img/VTKm_Logo.svg "VTK-m Logo (SVG Version)"
   

2. 使多行单元格成为多个单元格，同时向上合并单行单元格。

   | Type | Thumbnail{: width="200" }         | File Types & Sizes                      |
   | :--- | :-------------------------------- | :-------------------------------------- |
   | PNG  | ![PNG][png-image]                 | [High Res](/img/logos/VTKm_Logo_Hi.png) |
   | ^^   | ^^                                | [1024](/img/logos/VTKm_Logo_1024.png)   |
   | ^^   | ^^                                | [512](/img/logos/VTKm_Logo_512.png)     |
   | ^^   | ^^                                | [256](/img/logos/VTKm_Logo_256.png)     |
   | ^^   | ^^                                | [128](/img/logos/VTKm_Logo_128.png)     |
   | ^^   | ^^                                | [64](/img/logos/VTKm_Logo_Hi.png)       |
   | :--- | :-------------------------------- | :-------------------------------------- |
   | SVG  | ![SVG][svg-image]                 | [SVG](/img/VTKm_Logo.svg)               |
   | ^^   | ^^                                | [PDF](/img/logos/VTKm_Logo.pdf)         |
   
   [png-image]: /img/logos/VTKm_Logo_512.png "VTK-m Logo (PNG Version)"
   [svg-image]: /img/VTKm_Logo.svg "VTK-m Logo (SVG Version)"
   

结果如下

请注意每次尝试中的所有中断标记和 '。

尝试1：

<tr>
  <td style="text-align: left">
    PNG
    <br>
    &nbsp;
    <br>
    &nbsp;
    <br>
    &nbsp;
    <br>
    &nbsp;
    <br>
    &nbsp;
  </td>
  <td style="text-align: left">
    <img src="/img/logos/VTKm_Logo_512.png" alt="" title="VTK-m Logo (PNG Version)">
    <br>
    &nbsp;
    <br>
    &nbsp;
    <br>
    &nbsp;
    <br>
    &nbsp;
    <br>
    &nbsp;
  </td>
  <td style="text-align: left">
    <ul>
      <li>
        <a href="/img/logos/VTKm_Logo_Hi.png">High Res</a>
        <br>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_1024.png">1024</a>
        <br>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_512.png">512</a>
        <br>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_256.png">256</a>
        <br>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_128.png">128</a>
        <br>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_Hi.png">64</a>
        <br>
      </li>
    </ul>
  </td>
</tr>

尝试2：

<tbody>
  <tr>
    <td style="text-align: left" rowspan="6">
      PNG
      <br>
      <br>
      <br>
      <br>
      <br>
    </td>
    <td style="text-align: left" rowspan="6">
      <img src="/img/logos/VTKm_Logo_512.png" alt="" title="VTK-m Logo (PNG Version)">
      <br>
      <br>
      <br>
      <br>
      <br>
    </td>
    <td style="text-align: left"><a href="/img/logos/VTKm_Logo_Hi.png">High Res</a></td>
  </tr>
  <tr>
    <td style="text-align: left"><a href="/img/logos/VTKm_Logo_1024.png">1024</a></td>
  </tr>
  <tr>
    <td style="text-align: left"><a href="/img/logos/VTKm_Logo_512.png">512</a></td>
  </tr>
  <tr>
    <td style="text-align: left"><a href="/img/logos/VTKm_Logo_256.png">256</a></td>
  </tr>
  <tr>
    <td style="text-align: left"><a href="/img/logos/VTKm_Logo_128.png">128</a></td>
  </tr>
  <tr>
    <td style="text-align: left"><a href="/img/logos/VTKm_Logo_Hi.png">64</a></td>
  </tr>
</tbody>

我正在寻找的结果

这就是我想要得到的渲染结果。

<tr>
  <td style="text-align: left">
    PNG
  </td>
  <td style="text-align: left">
    <img src="/img/logos/VTKm_Logo_512.png" alt="" title="VTK-m Logo (PNG Version)">
  </td>
  <td style="text-align: left">
    <ul>
      <li>
        <a href="/img/logos/VTKm_Logo_Hi.png">High Res</a>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_1024.png">1024</a>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_512.png">512</a>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_256.png">256</a>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_128.png">128</a>
      </li>
      <li>
        <a href="/img/logos/VTKm_Logo_Hi.png">64</a>
      </li>
    </ul>
  </td>
</tr>

结论

如果有人可以帮助我弄清楚我做错了什么，或者如何实现我想要的解决方案，我将非常感激。提前致谢！

标签： html-tablemarkdownjekylljekyll-extensionskramdown