Two column layout with markdown

Question

I am working on a side-by-side text. I have to prepare this with two column layout. For example one column contains English text and other column/right column contains translation of preceding (English) text. Markdown does not support table marking but Github Flavored Markdown supports. I have made a few attempts, but unfortunately could not solve. It looks bad. Even I put two columns, I should make table border unseen.

Hillell

This appears to be a duplicate of https://mcmap.net/q/264171/-have-two-columns-in-markdown/866026 and possibly https://mcmap.net/q/408526/-can-i-word-wrap-long-columns-in-github-compatible-markdown/866026 – Noemi

This may be relevant as well: https://mcmap.net/q/266334/-how-to-render-multiple-columns-with-markdown-in-github-readme/866026 – Noemi

Possible duplicate of Two columns code in Markdown – Narghile

Answer 1

In a .md file html code can be put. A very easy mode to get this effect is doing a table without borders,

<table border="0">
 <tr>
    <td><b style="font-size:30px">Title</b></td>
    <td><b style="font-size:30px">Title 2</b></td>
 </tr>
 <tr>
    <td>Lorem ipsum ...</td>
    <td>Lorem ipsum ...</td>
 </tr>
</table>

Hopple

The problem with this solution is that markdown dosen't work inside <td> – Fantastically

You are right, but this question is about making columns of text and this solution works for that problem. – Hopple

Unfortunately border="0" doesn't work on GitHub markdowns – Mohock

There are many problems with this solution, the first being that it uses tables for layout formatting instead of semantic formatting. That concept of "use tables for layout" is really broken in modern CSS engines and the use of it will basically create tons of technical debt that will just need undone to make your page modern. – Playoff

Answer 2

No pure markdown way to do it.

Columns don't exist in markdowns.

Bacteriolysis

Answer 3

Found this thread trying to solve a similar issue while using Logseq and what worked in my case was to create a markdown table, with the header containing only "-".

| - | - |
| **Text**: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum | **Text** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum |

While it does not work well in StackOverflow, it does look nice in Logseq.

Battology

Answer 4

I found this issue when working on my GH profile and to build on the answer: https://mcmap.net/q/397533/-two-column-layout-with-markdown by @Castel.

I wanted my profile's readme to contain two columns, the left should contain text and the right should contain github stats based on this repo: github-readme-stats

What worked for me was to have the markdown table like this:

|**Information A**|**Information B**|
|:---:|:---:|
| Text1 <br/> Text2 | ![stats-one](https://github-readme-stats.vercel.app/api?... |
| Text3 <br/> Text4 | ![stats-two](https://github-readme-stats.vercel.app/api?... |

Frowzy

Answer 5

You don't use tables. Instead you embed <div> tags.

There are three popular approaches

• Floating the second column with CSS to the side of the first.
• Using Flexbox to pack the second column to the side of the first.
• Using the CSS grid layout to place the second column to the right of the first

Tutorials on how to implement these approaches can be found here.

By itself, Markdown doesn't support two columns in text that render to two columns in HTML, and due to Markdown's history as "a lightweight representation of HTML" Markdown was designed to support embedded HTML tags.

While this means that your Markdown will look a little cluttered with the embedded HTML tags, your HTML rendering of the markdown will contain the appropriate <div> elements to attach the CSS necessary to get the desired presentation.

Unlike the table suggestions above, this will have your markdown functional within the columns, and the only concerns you will need is to ensure that you don't forget to close your div tags.

Playoff

Answer 6

this is how I implemented my markdown github readme file and it works fine for me.

<div align="center">
    <table >
     <tr>
        <td><b>Latest Tweets</b></td>
        <td><b>daily.dev</b></td>
     </tr>
     <tr>
       <td><a href="https://twitter.com/sunilsapkota09"><img src="https://github-readme-twitter-gazf.vercel.app/api?id=sunilsapkota09" alt="sunil sapkota twitter" > </img></a></td>
        <td> <a href="https://app.daily.dev/sunil-9"><img src="https://api.daily.dev/devcards/426421ecec8c4819927d5698b72edced.png?r=5tr" width="400" alt="sunil sapkota's Dev Card"/></a></td>
     </tr>
    </table>
    </div>

Benavidez

Answer 7

As Rados mentioned before, you can use html to make tables, but if you want to use markdown inside html code chunks add this line before <table>

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

Seems to work for all cells in my jupyter notebook

Captive