Insert Tables in Jekyll Website

For the website built based on Jekyll, if we insert a table in .md source file, static website generator Jekyll will render it into an HTML table while deploying. For example, a table created by Markdown syntax:

1
2
3
4
5
6
| Variable | Value | Example        |
| -------- | ----- | -------------- |
| $a$      | $2$   | $2a+4=8$       |
| $b$      | $5$   | $b-3=2$        |
| $c$      | $8$   | $2c\times4=64$ |
| $d$      | $7$   | $8d/4=14$      |

will be showed as follows:

which is an HTML table element in webpage. We can modify its style using CSS language (actually change the table style globally). For the Jekyll theme which my blog website¹ uses, “minimal-mistakes”², the corresponding .scss file is ./assets/css/main.scss³, and the table style I specify right now is from an answer of StackExchange user “ROOT”⁴:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Table style from: https://stackoverflow.com/a/61547802/22763127
// Fill the whole webpage width
table {
    color: black;
    background-color: white;
    border-color: black;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-radius: 5px;
    border-collapse: separte;
    border-spacing: 2;
    display: table; // NOTE HERE: Realize filling the whole webpage width.
    overflow: auto;
    width: 100%;
  }
  table thead th {
    color: white;
    background-color: black;
    font-weight: bold;
    font-size: 0.8em;
    // padding: 5px 10px;
    vertical-align: bottom;
  }
  table thead th:first-child {
    border-top-left-radius: 5px;
  }
  table thead th:last-child {
    border-top-right-radius: 5px;
  }
  table tbody td {
    // border-top: 1px solid gray;
    border-top: 1px solid black;
    padding: 5px 10px;
    vertical-align: top;
  }
  table tbody tr:nth-child(2n) {
    background-color: lightgray;
  }

It’s kind of difficult, at least for me, to create an HTML table using HTML syntax (i.e., HTML table tag), so above Jekyll feature, that is converting tables created by Markdown markup language to HTML table, is friendly for users.

However, a simple need of mine is to center the tables, to look more academic as in the publications. There are many on-line references providing solutions, but none of them works well for my website. Due to the lack of understanding of website-building language, like HTML, CSS or whatever, I have no idea how to solve it. Maybe some other settings go wrong. It’s a choice to directly design tables in the Markdown file by HTML <table> tag, but the same, it’s too difficult for me.

Finally, I choose a style that makes tables fill the whole webpage width, as shown before. Coming to centering the tables, I find a compromise, that is creating table in the MathJax array environment, which is functional in both Markdown files and webpages, like:

1
2
3
4
5
6
7
8
9
10
\begin{array}{ccc}
\hline
\hspace{1cm}\text{Variable}\hspace{1cm} & \hspace{1cm}\text{Value}\hspace{1cm} &\hspace{1cm}\text{Example}\hspace{1cm}\\ 
\hline
a&2&2a+4=8\\
b&5&b-3=2\\
c&8&2c\times4=64\\
d&7&8d/4=14\\
\hline
\end{array}\notag

where \hspace{1cm} put in the table head is to adjust the column width, making it more good-looking. Besides \hspace command, \quad, \qquad also can be used to create blank space, but \hspace is more flexible to use.

That being said, there are some limitations for this method.

The first one is that we can’t create a row/column that spans multiple rows/columns, which is feasible in LaTeX array environment but not supported by MathJax rendering engine⁵⁶⁷:

1
2
3
4
5
6
\begin{array}{|c|r|r|}
	\hline
	\multirow{2}*{Name} & \multicolumn{2}{c|}{\text{Scores}} \\ \cline{2-3}
	& \text{Chinese} & \text{Mathematics} \\ \hline
	\text{Zhang} & 87 & 100 \\ \hline
\end{array}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
\documentclass{article}
\usepackage{amsmath,multirow}

\begin{document}

\begin{equation*}
\begin{array}{|c|r|r|}
	\hline
	\multirow{2}*{Name} & \multicolumn{2}{c|}{\text{Scores}} \\ \cline{2-3}
	& \text{Chinese} & \text{Mathematics} \\ \hline
	\text{Zhang} & 87 & 100 \\ \hline
\end{array}
\end{equation*}

\end{document}

Another one is that this kind of table can’t be automatically adjusted as webpage zooms in and out.

References