The motivation for this recipe was a shortcoming in Markdown. Markdown is the name of the markup language used here on GitHub... actually, that's not entirely true because GitHub has changed the Markdown syntax to create what is usually called GitHub-Flavored Markdown, or GFM. And there are other flavors of Markdown - each with something a bit different from the others. Whatever...
The shortcoming I'm referring to is in the rendering of Tables in GFM. The syntax for tables is simple enough - an example is shown below. However, this table is rendered in a fashion that makes for a really ugly Table!
| Column1 | Column2 |
|---|---|
| Some text goes in Column 1 | More text goes in Column 2 |
| But the question is this: | Why is the table rendered in a lopsided fashion? |
| This may be a consequence of the | fact that Markdown tables do not provide a mechanism to allow the writer to control the width of the columns |
The Markdown source code for the table above follows. It's simple, and it produces acceptable results occasionally. But often the column widths assigned by the rendering engine aren't well-suited to the content:
| Column1 | Column2 |
| ------------- | -------------- |
| Some text goes in Column 1 | More text goes in Column 2 |
| But the question is this: | Why is the table rendered in a lopsided fashion? |
| This may be a consequence of the | fact that Markdown tables do not provide a mechanism to allow the writer to control the width of the columns |
The solution is to fall back on HTML for tables. Good results are obtained when the table is rendered IAW a style sheet, or CSS. This recipe illustrates how to do that. An HTML table is shown below for comparison.
| Column1 | Column2 |
|---|---|
| Some text goes in Column 1 | More text goes in Column 2 |
| But the question is this: | Why is the table rendered in a lopsided fashion? |
| This may be a consequence of the | fact that Markdown tables do not provide a mechanism to allow the writer to control the width of the columns |
| In this HTML table OTOH | Column 1 has been allocated 40% of the width, while Column 2 gets the remaining 60% |
| And this control | makes a difference in the way the table looks. |
How is this done? You can discover that by looking at the source code for this page, and observing that there is a folder named css in this repo (see it at the top of this page). The folder css contains a file - the CSS style sheet used to render some of the tables in this repo. Feel free to copy any or all of this.