_           _                 
 | |_ ___  __| |____  ___ _   _ 
 | __/ _ \/ _` |_  / / _ \ | | |
 | ||  __/ (_| |/ / |  __/ |_| |
  \__\___|\__,_/___(_)___|\__,_|

Markdown table styling experiments

Creating a table in markdown is easy, but you just get a completely plain HTML table (arguably a good thing), so I've been experimenting with adding some CSS styling to include borders etc.

First experiment

This markdown...

<style>
table {border-collapse: collapse;}
tr {border-bottom: 1px solid black;}
</style>

| Setting           |   | Value    |
| :---              | - | :---     |
| Text:             | : | jotz.eu  |
| Font:             | : | Standard |
| Character width:  | : | Default  |
| Character height: | : | Default  |

...produces this table...

Online tool for generating markdown table from csv

• Markdown Table maker

The CSS used to style the example output table on that web page is something like this...

th {
    border: 1px solid #DDDDDD;
    border-collapse: collapse;
    font-weight: normal;
    white-space: nowrap;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

td {
    text-align: -webkit-center;
    display: table-cell;
    vertical-align: inherit;
}