The table macro

The table macro makes creating accessible tables easier.

Import the table macro:

{% import "macros/table/table.html" as table %}
            

Start the table:

{{ table.start_table("Table example") }}
            

The start_table function accepts four optional parameters:

start_table parameters

Order	Parameter	Description
first	table caption	What the table caption element should say
second	table summary	What the table summary should say
third	table id	id for the table tag
fourth	table classes	classes for the table tag

It's a good idea to at least pass in a table caption for accessibility purposes. The table summary is a good idea as well. If you need to use special styling or JavaScript on a table, the id and classes are handy for that.

Next, add a table heading row:

{{ table.heading_row(
    ["Heading 1",
    "Heading 2",
    "Heading 3"]) }}
            

Note: heading_row takes a list of items to put in the row. Each item will get inserted into a table cell. A list is just like an array in JavaScript or PHP. It's wrapped in square braces ([]) and each item is separated by a comma.

This will create a new table row and wrap each of the items in the list above in th tags. The output will look like this:

<tr><th scope="col">Heading 1</th><th scope="col">Heading 2</th><th scope="col">Heading 3</th></tr>
            

Now add rows:

{{ table.row(
    ["Cell 1",
    "Cell 2",
    "Cell 3"]) }}
            

The row function works just like heading_row, except it creates a row with td elements:

<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
            

Now just close the table:

{{ table.end_table() }}
            

The end_table function takes one optional parameter for table caption. If you prefer your table caption to be at the end of the table, you can pass it in here instead of passing it into start_table.

So to put it all together:

{{ table.start_table("Table example") }}

    {{ table.heading_row(
        ["Heading 1",
        "Heading 2",
        "Heading 3"]) }}

    {{ table.row(
        ["Cell 1",
        "Cell 2",
        "Cell 3"]) }}

{{ table.end_table() }}
            

Table example

Heading 1	Heading 2	Heading 3
Cell 1	Cell 2	Cell 3