33

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.

esquare
  • 3,947
  • 10
  • 34
  • 37
  • 5
    This appears to be a duplicate of http://stackoverflow.com/q/30514408/866026 and possibly http://stackoverflow.com/q/30811491/866026 – Waylan Jul 24 '15 at 13:33
  • 2
    This may be relevant as well: http://stackoverflow.com/q/28201503/866026 – Waylan Jul 24 '15 at 13:36
  • 1
    Possible duplicate of [Two columns code in Markdown](https://stackoverflow.com/questions/30514408/two-columns-code-in-markdown) – dee-see Aug 27 '17 at 14:36

6 Answers6

24

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>

enter image description here

Radost
  • 845
  • 7
  • 11
  • 4
    The problem with this solution is that markdown dosen't work inside `` – S.R Nov 07 '18 at 17:18
  • 1
    You are right, but this question is about making columns of text and this solution works for that problem. – Radost Nov 08 '18 at 09:05
  • 4
    Unfortunately `border="0"` doesn't work on GitHub markdowns – brillout Dec 14 '19 at 15:08
  • 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. – Edwin Buck May 03 '23 at 14:38
17

No pure markdown way to do it.

Columns don't exist in markdowns.

Ani Menon
  • 27,209
  • 16
  • 105
  • 126
2

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.

Castel
  • 21
  • 2
1

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>
Sunil Sapkota
  • 918
  • 2
  • 11
  • 24
1

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.

Edwin Buck
  • 69,361
  • 7
  • 100
  • 138
0

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

xenakas
  • 31
  • 1