10 Tables

10Tables

Tables can be constructed in both Markdown and HTML.

It is fair to say that Markdown tables are very simplistic in nature and do not offer a great deal of flexibility: they always have a heading across the top (vertical headings cannot be accommodated), they have limited alignment capabilities (horizontal alignment is possible, but vertical alignments are not. Similarly the table alignment on the page is not possible) and they do not support the merging of cells.

Markdown tables are only suitable for very straight forward tables.

That said, Markdown tables have the appearance of tables in the Markdown and are easy to understand.

HTML tables on the other hand offer a very great deal of flexibility (they can do all the things listed in the Markdown limitations above) and allow the tables to be used as containers for other things: images, ordered and unordered lists, text blocks &c.

The disadvantage of HTML tables is that they are harder to understand when built in Markdown (each cell is on its own line, it’s harder to identify rows and columns). A second disadvantage is that HTML tables do not lend themselves to the direct import of spreadsheet cells (this may seem a slightly odd point, but it is a common activity to copy data from a spreadsheet to a Wiki page) the data has to be manipulated before it can be copied to the Markdown file.

The PracticalSeries Wikis use both types of tables, but mainly HTML ones.

⬆️ Top

---

10.1Markdown tables

Tables in Markdown are pretty simple; they use the pipe character | to separate cells and three or more dashes --- to identify the column header.

The easiest way to explain it is to show an example:

Markdown and GitHub output
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
| Head 1 | Head 2 | Head 3 | |--------|--------|--------| | Row 1a | Row 1b | Row 1c | | Row 2a | Row 2b | Row 2c | | Row 3a | Row 3b | Row 3c | | Row 4a | Row 4b | Row 4c |
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c Row 4a Row 4b Row 4c
Table 10.1 — A simple Markdown table

The header row is always in bold, and alternate table body rows are shaded light grey rgb (246,248,250), #F6F8FA.

Markdown tables are always left aligned on the page.

There is nothing that can be done about this with Markdown tables (however, there is with HTML tables, see section 10.2).

10.1.1Horizontal alignment

By default the text in the heading cells is centred and the text in the body cells is left aligned:

Markdown and GitHub output
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
| Head 1 | Head 2 | Head 3 | |-------------|-------------|-------------| | Row 1a | Row 1b | Row 1c | | Row 2a text | Row 2b text | Row 2c text |
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a text Row 2b text Row 2c text
Table 10.2 — Markdown table default alignment

The horizontal alignment can be changed by adding colons (:) to the row of dashes:

Markdown and GitHub output
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
| Head 1 | Head 2 | Head 3 | |:------------|:-----------:|------------:| | Left | Centred | Right | | Row 2a text | Row 2b text | Row 2c text |
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Left Centred Right Row 2a text Row 2b text Row 2c text
Table 10.3 — Markdown table modified alignments

The colons have the following meanings:

Symbol	Alignment
:---	Align left horizontally
:---:	Centred horizontally
---:	Align right horizontally
Table 10.4 — Markdown horizontal alignment

If the alignment is changed, the heading cells will follow the same alignment.

⬆️ Top

---

10.1.2Table construction

In the previous example, everything was nicely lined up. Most people do this when building Markdown tables (I think it’s an inherent sense of neatness).

It is not however, necessary. The following works perfectly well:

Markdown and GitHub output
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
|Head 1|Head 2|Head 3| |:---|:---:|---:| |Left| Centred|Right| |Row 2a text|Row 2b text|Row 2c text|
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Left Centred Right Row 2a text Row 2b text Row 2c text
Table 10.5 — Minimalist Markdown table

The only requirement is that there must be at least three dashes between the pipes in the column header row.

The first and last pipes on each row are not technically needed, GitHub works it out:

Markdown and GitHub output
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
Head 1|Head 2|Head 3 :---|:---:|---: Left| Centred|Right Row 2a text|Row 2b text|Row 2c text
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Left Centred Right Row 2a text Row 2b text Row 2c text
Table 10.6 — Minimalist Markdown table without start and end pipes

Even so, don’t do this, other Markdown parsers do need the start and end pipes, plus it makes the table look better in Markdown.

⬆️ Top

---

10.1.3Vertical line breaks and alignment

It is possible to add additional lines to a cell by using the
element (see section 6.2.1):

Markdown and GitHub output
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
| Head 1 | Head 2 | Head 3 | |--------|--------|--------| | Line 1<br>Line 2<br>Line 3 | Row 1b | Row 1c | | Row 2a | Row 2b | Row 2c |
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Line 1 Line 2 Line 3 Row 1b Row 1c Row 2a Row 2b Row 2c
Table 10.7 — Line breaks in a Markdown table

The <br> forces a line break within the cell.

The vertical alignment of cells in a Markdown table is always centred, this can be seen in the alignment of text in the cells Row 1b and Row 1c. There is nothing that can be done about this alignment in Markdown (vertical alignment can be changed in HTML tables, see section 10.2.7).

⬆️ Top

---

10.1.4Making columns wider

By default, the width of a column in a table is determined by the longest text in any cell in the column.

It is possible to force a column to a given width by adding special space characters (see section 7.2) such as the em-space   to cells in the header row (it works in the body text too, but the header row is the most obvious place):

Markdown and GitHub output
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽
| Wide 1     | Head 2 | Head 3 | |--------|--------|--------| | Row 1a | Row 1b | Row 1c | | Row 2a | Row 2b | Row 2c |
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Wide 1     Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c
Table 10.8 — Changing the width of a column

It has to be the special space characters, if the cell is padded with multiple spaces (from the space bar), these will be ignored (see section 6.1.3)

⬆️ Top

---

10.1.5Other elements in a table

All the normal forms of emphasis (bold, italic &c.) can be used in tables. Block quotes and alerts however, cannot.

All escape characters, emojis and escape sequences can also be used, as can code fragments (see section 13) and footnotes (see section 12.6).

All types of links (see section 9) and figures (see section 11) can be used in tables.

⬆️ Top

---

10.1.6Markdown table restrictions

This is a list of the things you can’t do with Markdown tables:

❶	The header row cannot be absent (Markdown tables always have a header row)
❷	Headers cannot be arranged down a column
❸	Cells cannot be merged together or spanned
❹	The table cannot be centred on a page (always left-aligned)
❺	Cells cannot be vertically aligned
	List 10.1 — Markdown table restrictions

HTML tables do not have any of these restrictions and generally offer much more flexi-bility.

⬆️ Top

---

10.2HTML tables

HTML tables are very dated now (in HTML terms), they have largely been overtaken by grids and flexbox arrangements, unfortunately both of these require CSS and that is forbidden on GitHub markdown pages.

This leaves us with the old-fashioned HTML <table>, this has been around pretty much from the start of HTML (sometime in the 90s) and has remained largely unchanged ever since. GitHub operates a restricted version of the HTML <table> tag (there are something it can’t do, such as change fonts or colours), but even with these restrictions HTML tables are much more flexible than Markdown tables.

I’m going to assume a degree of knowledge about HTML tables and how they work, just the basics. If you are completely unfamiliar with HTML tables, I have a website that explains them: PracticalSeries Basic Guide to HTML tables.

⬆️ Top

---

10.2.1A basic HTML table

Tables are defined with the <table>...</table> element. Each row of a table is enclosed in <tr>...</tr> elements and these are stacked one on top of the other. Within a given row, each cell is enclosed in either <th>...</th> tags or <td>...</td> tags.

The <th> tags contain a single cell that acts as a header (table header is what it stands for) or label for the column. The <td> tags (table data) are standard cells within a table that contain some information.

Look at this table for example:

Mileage	Birmingham	Liverpool	London	Manchester	Newcastle
Birmingham	0	113	126	87	146
Liverpool	113	0	221	34	174
London	126	221	0	209	283
Manchester	87	34	209	0	145
Newcastle	146	174	283	145	0
Figure 10.1 — A basic table

This table has 6 rows and each row has 6 cells (it’s a 6×6 table). The top row is acting as a header for each of the columns and the first cell in each row is also a header.

At the most basic level, the HTML would be constructed as follows:

Figure 10.2 — HTML structure for a basic table

The HTML for the above table is:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th>Mileage</th><th>Birmingham</th><th>Liverpool</th><th>London</th><th>Manchester</th><th>Newcastle</th> </tr> <tr> <th>Birmingham</th><td>0</td><td>113</td><td>126</td><td>87</td><td>146</td> </tr> <tr> <th>Liverpool</th><td>113</td><td>0</td><td>221</td><td>34</td><td>174</td> </tr> <tr> <th>London</th><td>126</td><td>221</td><td>0</td><td>209</td><td>283</td> </tr> <tr> <th>Manchester</th><td>87</td><td>34</td><td>209</td><td>0</td><td>145</td> </tr> <tr> <th>Newcastle</th><td>146</td><td>174</td><td>283</td><td>145</td><td>0</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Mileage Birmingham Liverpool London Manchester Newcastle Birmingham 0 113 126 87 146 Liverpool 113 0 221 34 174 London 126 221 0 209 283 Manchester 87 34 209 0 145 Newcastle 146 174 283 145 0
Table 10.9 — HTML for a basic table

Once again, we can see that GitHub does certain things: the headings (everything within a <th> tag) is in bold and centred, the data cells (everything within a <td> tag) are left-aligned and alternate rows are shaded just like the Markdown table.

Note

One slight difference between the Markdown table and the HTML table; with a Markdown table the heading row always has a white background and so does the first row of the cells below the heading. With HTML, the first row (irrespective of whether it is a header row or not) is always white and the second row always shaded. I.e. with a Markdown table the shading starts on the third row, with HTML tables, the shading starts on the second row.

There is no requirement for a table to have any heading <th> cells, the whole thing could be constructed using <td> cells.

⬆️ Top

---

10.2.2Aligning a table on a page

Unlike Markdown, HTML tables can be aligned on the GitHub web page. By default HTML tables are left-aligned on a page (just like the Markdown tables).

Consider the following:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> <tr> <td>Row 3a</td><td> Row 3b</td><td> Row 3c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c
Table 10.10 — HTML default table alignment

This is the default arrangement, the table is aligned to the left side of the page.

The <table> tag accepts the ${\large \color{#00B050}\text{align}}$ attribute and this can reposition the whole table horizontally on the web page:

                    <th align="left">${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽</th>
                </tr>

HTML and GitHub output
<table align="center"> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> <tr> <td>Row 3a</td><td> Row 3b</td><td> Row 3c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c
Table 10.11 — HTML centred table alignment

The ${\large \color{#00B050}\text{align="center"}}$ in the first line of the above centres the table on the page.

Note

Center uses the American spelling

Using ${\large \color{#00B050}\text{align="right"}}$ positions the table on the right of the page:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table align="right"> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> <tr> <td>Row 3a</td><td> Row 3b</td><td> Row 3c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c
Table 10.12 — HTML right aligned table

Finally ${\large \color{#00B050}\text{align="left"}}$ is the same as the default arrangement:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table align="left"> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> <tr> <td>Row 3a</td><td> Row 3b</td><td> Row 3c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c
Table 10.13 — HTML left aligned table

⬆️ Top

---

10.2.3Text wrap and side-by-side tables

Hmm, I found this out by accident and I’ve not seen it referenced anywhere else (and I’ve done a lot of searches in the course of writing this).

It is possible to have two (or more) tables side by side on the page. Look at the following:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th>Table 1 H1</th><th> Table 1 H2</th><th> Table 1 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table> <table <tr> <th>Table 2 H1</th><th> Table 2 H2</th><th> Table 2 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Table 2 H1 Table 2 H2 Table 2 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c
Table 10.14 — HTML two tables one above the other

Two tables one above the other. Pretty much what you would expect.

Now change the <table> tab for the first table to include the ${\large \color{#00B050}\text{align="right"}}$ attribute:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table align="right"> <tr> <th>Table 1 H1</th><th> Table 1 H2</th><th> Table 1 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table> <table> <tr> <th>Table 2 H1</th><th> Table 2 H2</th><th> Table 2 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Table 2 H1 Table 2 H2 Table 2 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c
Table 10.15 — HTML two tables side by side

Table 1 has moved over to the right (like it was told it to), but Table 2 has sort of moved up into the gap it left on the other side.

This is slightly peculiar behaviour. Try it with some text instead of Table 2:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table align="right"> <tr> <th>Table 1 H1</th><th> Table 1 H2</th><th> Table 1 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.
Table 10.16 — HTML right aligned table followed by text

Changing ${\large \color{#00B050}\text{align="right"}}$ to ${\large \color{#00B050}\text{align="left"}}$ does this:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table align="left"> <tr> <th>Table 1 H1</th><th> Table 1 H2</th><th> Table 1 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.

And finally, ${\large \color{#00B050}\text{align="center"}}$ gives:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table align="center"> <tr> <th>Table 1 H1</th><th> Table 1 H2</th><th> Table 1 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.

So what is going on?

It seems that when the ${\large \color{#00B050}\text{align}}$ attribute is used, it makes the table into a floating object (what in HTML terms is called an inline block element).

Normally, when defining a table it starts on a new line and anything that follows it starts on the next new line after the table. HTML elements like this are called block elements.

Inline block elements do not do this. Inline block elements only take up as much space on a line as they need for their width, the remaining space on the line is taken up with whatever follows the inline block element (I have a website explaining this here).

It seems that when we use the ${\large \color{#00B050}\text{align}}$ attribute, the table is turning from a block element to an inline block element and then floating to whichever position is requested.

At first, I thought this was a peculiarity of GitHub (I thought GitHub might be doing something either intentionally or unintentionally to make the table an inline object), but it is not. When I created my own web page (a proper web page, not anything to do with GitHub or Markdown) with a table and did the same experiment, the browser did exactly the same thing. Without the ${\large \color{#00B050}\text{align}}$ attribute, the table is a block element and with it, it is an inline element. Go figure.

With ${\large \color{#00B050}\text{align="center"}}$ the table remains an inline element and nothing wraps around it (I guess this may be because the browser doesn’t know which side to wrap the text to).

What this means in practice     

What this means is that it is possible to wrap text around a table and this can look quite nice if that is what you want to do:

Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.

Figure 10.3 — HTML text wrap around a table

And, as we saw earlier, it also allows two tables to be side by side:

Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Table 2 H1 Table 2 H2 Table 2 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c
Figure 10.4 — HTML two tables side by side

The Table 1 has the ${\large \color{#00B050}\text{align="left"}}$ attribute, Table 2 has the ${\large \color{#00B050}\text{align="right"}}$ attribute.

The problem with the align attribute     

Yes, there is a problem. Once you open up the inline block elements and have them floating left and right, things get a bit carried away. Look at the following:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table align="left"> <tr> <th>Table 1 H1</th><th> Table 1 H2</th><th> Table 1 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table> <table align="right"> <tr> <th>Table 2 H1</th><th> Table 2 H2</th><th> Table 2 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Table 2 H1 Table 2 H2 Table 2 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.
Table 10.17 — HTML problems with floating tables

This is the code for the side-by-side, but with some lorem ipsum text afterwards.

It probably isn’t what is wanted.

The problem is that once you start down the route of making elements float (turn them into inline elements), it’s hard to put the genie back in the bottle.

How to stop text wrapping     

Fortunately it is quite easy to stop the text (and anything else) from wrapping around these floating inline objects (although it took me ages to find out how).

To stop text wrapping around a floating inline object, use a special form of the line break command <br>.

The <br> tag supports the ${\large \color{#00B050}\text{clear}}$ attribute. The clear attribute forces a gap until either the ${\large \color{#00B050}\text{left}}$ side, the ${\large \color{#00B050}\text{right}}$ side or ${\large \color{#00B050}\text{all}}$ sides are clear. The ${\large \color{#00B050}\text{all}}$ option is the best one to use:

    ${\LARGE \color{#C00000}\text{<br\ clear="all">}}$

Using this, the previous example becomes:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table align="left"> <tr> <th>Table 1 H1</th><th> Table 1 H2</th><th> Table 1 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table> <table align="right"> <tr> <th>Table 2 H1</th><th> Table 2 H2</th><th> Table 2 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table> <br clear="all"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Table 2 H1 Table 2 H2 Table 2 H3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur tortor a tortor ornare, non pretium diam faucibus. Morbi ut mollis dolor, nec pretium tellus. Suspendisse ornare neque placerat orci aliquam, eu sodales dui blandit.
Table 10.18 — HTML fixing the text wrap problem

Using the ${\large \color{#C00000}\text{<br\ clear="all">}}$ tag after any floating element will force whatever follows it onto the next new line (it puts the genie back in the bottle).

This is it between a left aligned table and right aligned table:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table align="left"> <tr> <th>Table 1 H1</th><th> Table 1 H2</th><th> Table 1 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> </table> <br clear="all"> <table align="right"> <tr> <th>Table 2 H1</th><th> Table 2 H2</th><th> Table 2 H3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Table 1 H1 Table 1 H2 Table 1 H3 Row 1a Row 1b Row 1c Table 2 H1 Table 2 H2 Table 2 H3 Row 1a Row 1b Row 1c
Table 10.19 — HTML left and right align table without wrap

Note

There doesn’t have to be blank lines around the <br clear="all"> tag.

⬆️ Top

---

10.2.4Setting the width of a table column

With Markdown tables the width of the table could only be adjusted by adding special space characters to for the columns to be wider.

With HTML things are a bit more sophisticated, the <th> and <td> tags support the ${\large \color{#00B050}\text{width}}$ attribute, this can be used to specify the width of the cell (and thus the column) in pixels^💠1. The ${\large \color{#00B050}\text{width}}$ attribute is in the form ${\large \color{#00B050}\text{width="w"}}$ where ${\large \color{#00B050}\text{w}}$ is the required width in pixels:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th width="300">Head 1</th><th width="250">Head 2</th><th width="200">Head 3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c
Table 10.20 — Setting the width of table columns in pixels

Looking at this table in detail:

Figure 10.5 — Measured width of table columns in pixels

The first column (left side) is exactly 300 px wide, the second (middle) is exactly 250 px wide and the third (right side) column is exactly 200 px wide.

Note

The maximum width of a table is 896 px (see section 6.1.1). If the width values add up to more than this, then the widths will reduce in proportion (ish) until they fit the page area . This reduction feature is done by the browser rather than GitHub and the exact result depends on the browser being used.

⬆️ Top

---

10.2.5Setting the height of a table row

Unlike Markdown, it is possible to set the hight of a cell in HTML tables to a specific value (analogous to the ${\large \color{#00B050}\text{width}}$ attribute for setting the width of a column in the previous section).

Like the ${\large \color{#00B050}\text{width}}$ attribute, the <th> and <td> tags support the ${\large \color{#00B050}\text{height}}$ attribute, this works in exactly the same way as the ${\large \color{#00B050}\text{width}}$ attribute, but sets the height of the cell (and consequently the height of that table row) in pixels.

The height attribute is in the form ${\large \color{#00B050}\text{height="h"}}$ where ${\large \color{#00B050}\text{h}}$ is the required height in pixels:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> <tr> <td height="100">Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c
Table 10.21 — HTML setting the height of table row in pixels

Looking at this table in detail:

Figure 10.6 — Measured height of table rows in pixels

Row 1 (middle) is exactly 100 px high.

Note

There is no restriction on the height of a cell (unlike the width where the table has a maximum width to fit on a page), the web page just gets longer to accommodate it.

The height attribute can also be applied to a whole row from within the <tr> tag. E.g. <tr height="100">. Under these circumstances, the row height will be overridden if a particular cell, has its own height attribute with a greater height value.

⬆️ Top

---

10.2.6Horizontal alignment

The ${\large \color{#00B050}\text{align="left"}}$, ${\large \color{#00B050}\text{align="center"}}$ and ${\large \color{#00B050}\text{align="right"}}$ attributes of section 10.2.2 and section 10.2.3 that were used to align the table on the page can also be used in the

and tags to align text within a cell:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th>Wide Heading 1</th><th>Wide Heading 2</th><th>Wide Heading 3</th> </tr> <tr> <td td align="left">Row 1a</td><td align="center"> Row 1b</td><td align="right"> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Wide Heading 1 Wide Heading 2 Wide Heading 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c
Table 10.22 — HTML setting the horizontal alignment of text in a cell

The wide headings are just to make the columns wider and the effects more visible.

The first cell in row 1 is left-aligned, the second centred and the third right-aligned.

Note

The align attribute can also be applied to a whole row from within the <tr> tag. E.g. <tr align="center">. Under these circumstances, the row alignment will be overridden for a particular cell, if that cell has its own align attribute.

⬆️ Top

---

10.2.7Vertical alignment

Vertical alignment wasn’t possible with Markdown tables. HTML tables, however, do support vertical alignment with the use of the ${\large \color{#00B050}\text{valign}}$ attribute.

The ${\large \color{#00B050}\text{valign}}$ attribute works just like the ${\large \color{#00B050}\text{align}}$ attribute but has the values ${\large \color{#00B050}\text{top}}$, ${\large \color{#00B050}\text{middle}}$ and ${\large \color{#00B050}\text{bottom}}$. It works with the <th> and <td> tags:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th>Wide Heading 1</th><th>Wide Heading 2</th><th>Wide Heading 3</th> </tr> <tr> <td height="100" valign="top">Row 1a</td><td valign="middle"> Row 1b</td><td valign="bottom"> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Wide Heading 1 Wide Heading 2 Wide Heading 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c
Table 10.23 — HTML setting the vertical alignment of a cell

The ${\large \color{#00B050}\text{height="100"}}$ just makes the row higher so the effects can be seen. This results in the following table:

The first cell is top-aligned, the second aligned in the middle and the third bottom-aligned.

It is perfectly possible to mix horizontal and vertical alignments:

    ${\large \color{#0050C0}\text{<td\ }\color{#C00000}\text{valign="middle"\ }\color{#1F883D}\text{align="center"}\color{#0050C0}\text{>\ Row\ 1b<}\text{td>}}$

Would centre the text both horizontally and vertically.

Note

The valign attribute can also be applied to a whole row from within the <tr> tag. E.g. <tr valign="top">. Under these circumstances, the row alignment will be overridden for a particular cell, if that cell has its own valign attribute.

⬆️ Top

---

10.2.8Spanning columns and rows

With HTML tables, it is possible to make a cell span multiple columns or multiple rows using either the ${\large \color{#00B050}\text{colspan}}$ or ${\large \color{#00B050}\text{rowspan}}$ attributes:

The <th> and <td> tags support the ${\large \color{#00B050}\text{colspan}}$ and ${\large \color{#00B050}\text{rowspan}}$ attributes, these can be used to specify the how many rows or columns the cell is to span. The colspan attribute is in the form ${\large \color{#00B050}\text{colspan="n"}}$ and roespan attribute is in the form ${\large \color{#00B050}\text{rowspan="n"}}$ where ${\large \color{#00B050}\text{n}}$ is number of rows or columns the cell is to span:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th>Heading 1</th><th>Heading 2</th><th>Heading 3</th><th>Heading 3</th> </tr> <tr> <td colspan="2">Row 1a/b</td><td>Row 1c</td><td rowspan="2">Row 1d/2d</td> </tr> <tr> <td>Row 2a</td><td>Row 2b</td><td>Row 2c</td> </tr> <tr> <td>Row 3a</td><td colspan="3">Row 3b/c/d</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Heading 1 Heading 2 Heading 3 Heading 3 Row 1a/b Row 1c Row 1d/2d Row 2a Row 2b Row 2c Row 3a Row 3b/c/d
Table 10.24 — HTML merging cells in a table

There are two ${\large \color{#00B050}\text{colspan}}$ (row 1 and row 3) and one ${\large \color{#00B050}\text{rowspan}}$ (row d).

When using ${\large \color{#00B050}\text{colspan}}$ and ${\large \color{#00B050}\text{rowspan}}$ remove any other cells into which the expanded cells are encompassing (in the case of ${\large \color{#00B050}\text{colspan}}$ in row 1, this is cell Row 1b and in the case of the ${\large \color{#00B050}\text{colspan}}$ in row 3 it is cells Row 3c and Row 3d. The ${\large \color{#00B050}\text{rowspan}}$ in row d encompasses cell Row 2d).

⬆️ Top

---

10.2.9Table border

This is an oddball thing; I think it exists more by accident than anything else.

Generally, all tables in a Wiki look the same when rendered by GitHub:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> <tr> <td>Row 3a</td><td> Row 3b</td><td> Row 3c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c
Table 10.25 — HTML basic table in GitHub

Headings in bold, alternate rows shaded and all cells have a 1-pixel border in a slightly darker shade of grey than the shading rgb (209,217,224) #D1D9E0.

There is a very old HTML tag called ${\large \color{#00B050}\text{border}}$ (it is either set to 1 or 0, 1 for a border, 0 for no border). If it is added to the table tag and set to 1, like this:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table border="1"> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> <tr> <td>Row 3a</td><td> Row 3b</td><td> Row 3c</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c
Table 10.26 — HTML setting the border of a table

The table gets a darker border rgb (44,44,44) #2C2C2C around the outside. Setting border="0" just puts the table back how it was.

That is it, that is all that can be done in terms of modifying the border of a table.

⬆️ Top

---

10.2.10Giving a table a navigable name

It is often useful to be able to navigate to a table if it is reference elsewhere in the Wiki, this was explained in section 9.5, but is covered here specifically in terms of a table.

To make a table a navigable point (something that can be linked to from another point in the Wiki or even from an external website), the <table> tag is assigned a ${\large \color{#00B050}\text{name}}$. Like this:

HTML
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table name="idName">

The ${\large \color{#00B050}\text{t-10-09}}$ in this case is just a text string, it could be anything you want, the only restriction being that it must be unique within the page. The format above is the PracticalSeries format, the t- indicates that it is a table (as opposed, say, to a figure) and the two numbers reflect the table number (table 10.9 in this case).

This is a worked example:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table name="t-10-51"> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> <tr> <td>Row 3a</td><td> Row 3b</td><td> Row 3c</td> </tr> <tr> <td colspan="3">Table 10.51</td> </tr> </table> Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a link to [Table 10.11](#t-10-11)
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c Table 10.51 Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a link to Table 10.51
Table 10.27 — HTML assigning a name to a table

The link: [Table 10.51](#t-10-51) is the standard form of Markdown link covered in detail in section 9.5.

⬆️ Top

---

10.2.11Additional HTML tags

The HTML tags used in all the previous examples are:

HTML tag	Meaning
<table>...</table>	Defines the start and end of a table
<tr>...</tr>	Defines the start and end of a table row
<th>...</th>	Defines the start and end of a table heading cell
<td>...</td>	Defines the start and end of a table data cell
Table 10.28 — Standard HTML table tags

HTML supports some additional table tags:

HTML tag	Meaning
<thead>...</thead>	Used to group the heading content of a table
<tbody>...</tbody>	Used to group the body of a table
<tfoot>...</tfoot>	Identifies any footer that the table may have
Table 10.29 — Additional HTML table tags

A typical table (exactly like all the ones we have used so far) would have the code:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> <tr> <td>Row 3a</td><td> Row 3b</td><td> Row 3c</td> </tr> <tr> <td colspan="3">Table 10.52</td> </tr> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c Table 10.52
Table 10.30 — HTML a typical type of table

Using the additional tags, this would become:

HTML and GitHub output
${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽
<table> <thead> <tr> <th>Head 1</th><th>Head 2</th><th>Head 3</th> </tr> </thead> <tbody> <tr> <td>Row 1a</td><td> Row 1b</td><td> Row 1c</td> </tr> <tr> <td>Row 2a</td><td> Row 2b</td><td> Row 2c</td> </tr> <tr> <td>Row 3a</td><td> Row 3b</td><td> Row 3c</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Table 10.52</td> </tr> </tfoot> </table>
${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Head 1 Head 2 Head 3 Row 1a Row 1b Row 1c Row 2a Row 2b Row 2c Row 3a Row 3b Row 3c Table 10.52
Table 10.31 — A table with the additional tags

These additional tags were introduced to better define the different areas of the table to make the HTML more definitive.

These additional tags make absolutely no difference to how the table looks.

Use them if you wish (it’s probably better HTML). The PracticalSeries Wikis does not use them, more for historical reasons rather than anything else.

---

Footnotes:     

Note

^💠1 The width attribute usually sets the width of the element in pixels, this is the default. It can also set the width as a percentage of the containing element width. This percentage measure is no longer supported (it was very confusing) and only the default pixel measurement is now used.↩

---

• 10Tables
  • 10.1Markdown tables
    • 10.1.1Horizontal alignment
    • 10.1.2Table construction
    • 10.1.3Vertical line breaks and alignment
    • 10.1.4Making columns wider
    • 10.1.5Other elements in a table
    • 10.1.6Markdown table restrictions
  • 10.2HTML tables
    • 10.2.1A basic HTML table
    • 10.2.2Aligning a table on a page
    • 10.2.3Text wrap and side-by-side tables
      • What this means in practice     
      • The problem with the align attribute     
      • How to stop text wrapping     
    • 10.2.4Setting the width of a table column
    • 10.2.5Setting the height of a table row
    • 10.2.6Horizontal alignment
    • 10.2.7Vertical alignment
    • 10.2.8Spanning columns and rows
    • 10.2.9Table border
    • 10.2.10Giving a table a navigable name
    • 10.2.11Additional HTML tags