Search code examples
markdownjekyllhtml-lists

Jekyll: unordered list inside table



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>    |

Solution

  • 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>