Jekyll: unordered list inside table

Question

I am trying to build a table for a jekyll site that, in one column, holds an image and in the next column holds an unordered list of links associated with that image.
The markdown syntax for unordered lists (*,-,+) is not working, nor is the html when mixed in with markdown table.
Does anyone know how to make this work for jekyll? (note: images and links are working correctly)
See code below:

 <style>
    table { border: 1px solid black; width: 100%; }
    td, th {border: 1px solid black;width: 50%;}
</style>

|         Image           |                    Image Links                         |
|-------------------------|--------------------------------------------------------|
| <img src="image1.png"/> | *[Image1 link1][1]<br> *[Image1 Link2][2]              |
| <img src="image2.png"/> | <ul><li>Image2 Link1</li><li>Image2 Link2</li></ul>    |

Puhh, there must be a solution, see https://stackoverflow.com/questions/26844701/lists-in-markdown-table-with-jekyll - in our project we use `markdown: kramdown` in the config.yml and `- bullet point 1
-bullet point` works. — Christian, Mar 22 '22 at 22:44

score 1 · Accepted Answer · answered Mar 22 '22 at 17:54

In general, table implementations in Markdown tend to be fairly simplistic. I'm not aware of any that support Markdown-style lists inside tables.

As a result, I believe you'll have to use HTML for your table:

table {
  border: 1px solid black;
  width: 100%;
}

td, th {
  border: 1px solid black;
  width: 50%;
}

<table>
  <thead>
    <tr>
      <th>Image</th>
      <th>Image Links</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="http://placekitten.com/200/100"></td>
      <td>
        <!-- this _might_ work, but I'd use an HTML image even if it does -->
        <ul>
          <li>[Image1 link1][1]</li>
          <li>[Image1 Link2][2]</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><img src="http://placekitten.com/200/100"></td>
      <td>
        <ul>
          <li><a href="">Image2 Link1</a></li>
          <li><a href="">Image2 Link2</a></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Jekyll: unordered list inside table

1 Answers1