<table>
    <caption>Buildit Creative Tech Tribe required viewing list</caption>

    <thead>
        <tr>
            <th>Title</th>
            <th>Director</th>
            <th>Year</th>
            <th>Key quote</th>
        </tr>
        <tr>
            <td>The name of the movie</td>
            <td>The person who directed it</td>
            <td>The year it was released</td>
            <td>A famous quote from the film</td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Snatch</td>
            <td>Guy Ritchie</td>
            <td>2000</td>
            <td>Of course fuckin' of course, I wasn't askin', I was tellin'.</td>
        </tr>
        <tr>
            <td>Office Space</td>
            <td>Mike Judge</td>
            <td>1999</td>
            <td>Hello, Peter. What’s happening? Uh, we have sort of a problem here. Yeah. You apparently didn’t put one of the new coversheets on your TPS reports.</td>
        </tr>
        <tr>
            <td>Lock, Stock and Two Smoking Barrels</td>
            <td>Guy Ritchie</td>
            <td>1998</td>
            <td>It's a deal, it's a steal. It's the sale of the fucking century. In fact, fuck it, Nick, I think I'll keep it.</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td>Aliens</td>
            <td>James Cameron</td>
            <td>1986</td>
            <td>Game over, man. GAME OVER!</td>
        </tr>
        <tr>
            <td>The Matrix</td>
            <td>The Wachowskis</td>
            <td>1999</td>
            <td>There is no spoon.</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>5 unique titles</td>
            <td>4 unique directors</td>
            <td>4 unique years</td>
            <td>5 unique quotes</td>
        </tr>
    </tfoot>
</table>
{# Local helper macro for rendering TRs and TD / THs #}
{%- macro renderRows(rows) -%}
  {%- for row in rows -%}
    <tr>
      {% for col in row -%}
        {%- if col.isHeaderCell -%}
          <th>
            {{- col.htmlContent | safe -}}
          </th>
        {%- else -%}
          <td>
            {{- col.htmlContent | safe -}}
          </td>
        {%- endif %}
      {% endfor -%}
    </tr>
  {% endfor -%}
{%- endmacro -%}

{# Reusable macro for other templates to import: #}
{%- macro table(tableData) -%}
<table>
  {%- if tableData.caption %}
    <caption>{{tableData.caption}}</caption>
  {% endif -%}

  {# Header rows #}
  {%- if tableData.head %}
  <thead>
    {{ renderRows(tableData.head.rows) | safe -}}
  </thead>
  {% endif -%}

  {# Plain table rows (not inside a <tbody>) #}
  {{- renderRows(tableData.rows) | safe -}}

  {# <tbody> groups of rows #}
  {%- for body in tableData.body %}
  <tbody>
    {{ renderRows(body.rows) | safe -}}
  </tbody>
  {% endfor -%}

  {# Footer rows #}
  {%- if tableData.foot %}
  <tfoot>
    {{ renderRows(tableData.foot.rows) | safe -}}
  </tfoot>
  {% endif -%}
</table>
{%- endmacro -%}

{# Example rendering: #}
{{- table(tableData) | safe -}}
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
  "url": "#",
  "listItems": [
    {
      "htmlContent": "Some list item content"
    },
    {
      "htmlContent": "More list item content"
    },
    {
      "htmlContent": "Even more list item content"
    },
    {
      "htmlContent": "I can't believe there's still more list item content"
    },
    {
      "htmlContent": "Seriously?! That's enough now."
    }
  ],
  "footer": {
    "copy": "&copy; 2019 <strong>Buildit</strong>. All rights reserved.",
    "linksA": [
      {
        "label": "Stories",
        "url": "#"
      },
      {
        "label": "People",
        "url": "#"
      },
      {
        "label": "Jobs",
        "url": "#"
      }
    ],
    "linksB": [
      {
        "label": "Terms",
        "url": "#"
      },
      {
        "label": "Accessibility",
        "url": "#"
      },
      {
        "label": "Privacy & Cookie Policy",
        "url": "https://wiprodigital.com/privacy-policy"
      }
    ]
  },
  "hero": {
    "pullout": "Big, attention-grabbing headline",
    "paragraph": "Witty subtitle",
    "cta": {
      "text": "Clickbaity label",
      "url": "#"
    }
  },
  "img": {
    "random": {
      "src": "/images/img-random-1.png",
      "alt": "A placeholder image with an arbitrary aspect ratio."
    },
    "square": {
      "src": "/images/img-1x1.png",
      "alt": "A placeholder image with a perfect square (1:1) aspect ratio."
    },
    "tv": {
      "src": "/images/img-4x3.png",
      "alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
    },
    "widescreen": {
      "src": "/images/img-16x9.png",
      "alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
    },
    "logo": {
      "src": "/images/img-random-2.png",
      "alt": "A test image for a logo with an arbitrary aspect ratio."
    }
  },
  "title": "Page title",
  "header": {
    "url": "./homepage",
    "links": [
      {
        "text": "Jobs",
        "url": "./jobs"
      },
      {
        "text": "Locations",
        "url": "./locations"
      }
    ],
    "externalLinks": [
      {
        "text": "Fancy external website",
        "url": "./error-page"
      }
    ]
  },
  "sections": [
    {
      "title": "Example section",
      "class": "grav-o-full-bleed__content",
      "content": [
        {
          "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
        }
      ]
    }
  ],
  "section": {
    "title": "This is the title for a section",
    "class": "grav-o-full-bleed__content",
    "content": [
      {
        "paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
      },
      {
        "twoColumnsList": [
          {
            "htmlContent": "Vestibulum auctor dapibus neque."
          },
          {
            "htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
          },
          {
            "htmlContent": "Aliquam tincidunt mauris eu risus."
          },
          {
            "htmlContent": "Labore et dolore magna aliqua."
          },
          {
            "htmlContent": "Phasellus tempus, orci non mattis sagittis."
          }
        ]
      },
      {
        "inlineRow": [
          {
            "text": "First link",
            "url": "#"
          },
          {
            "text": "Second link",
            "url": "#"
          },
          {
            "text": "Third link",
            "url": "#"
          }
        ]
      },
      {
        "imgCards": [
          {
            "title": "Some fascinating, attention-grabbing headling",
            "content": "Ideally, with a click-baity tagline that entices to you to visit!",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Brief description of this fascinating image"
            }
          },
          {
            "title": "Labore et dolore magna aliqua",
            "content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Phasellus tempus, orci non mattis"
            }
          },
          {
            "title": "Nanotechnology immersion along the information highway",
            "content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Bring to the table win-win survival strategies"
            }
          }
        ]
      },
      {
        "imgLinks": [
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Image linke #1"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-2.png",
              "alt": "Image linke #2"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-3.png",
              "alt": "Image linke #3"
            }
          }
        ]
      }
    ]
  },
  "tableData": {
    "rows": false,
    "caption": "Buildit Creative Tech Tribe required viewing list",
    "head": {
      "rows": [
        [
          {
            "htmlContent": "Title",
            "isHeaderCell": true
          },
          {
            "htmlContent": "Director",
            "isHeaderCell": true
          },
          {
            "htmlContent": "Year",
            "isHeaderCell": true
          },
          {
            "htmlContent": "Key quote",
            "isHeaderCell": true
          }
        ],
        [
          {
            "htmlContent": "The name of the movie"
          },
          {
            "htmlContent": "The person who directed it"
          },
          {
            "htmlContent": "The year it was released"
          },
          {
            "htmlContent": "A famous quote from the film"
          }
        ]
      ]
    },
    "body": [
      {
        "rows": [
          [
            {
              "htmlContent": "Snatch"
            },
            {
              "htmlContent": "Guy Ritchie"
            },
            {
              "htmlContent": "2000"
            },
            {
              "htmlContent": "Of course fuckin' of course, I wasn't askin', I was tellin'."
            }
          ],
          [
            {
              "htmlContent": "Office Space"
            },
            {
              "htmlContent": "Mike Judge"
            },
            {
              "htmlContent": "1999"
            },
            {
              "htmlContent": "Hello, Peter. What’s happening? Uh, we have sort of a problem here. Yeah. You apparently didn’t put one of the new coversheets on your TPS reports."
            }
          ],
          [
            {
              "htmlContent": "Lock, Stock and Two Smoking Barrels"
            },
            {
              "htmlContent": "Guy Ritchie"
            },
            {
              "htmlContent": "1998"
            },
            {
              "htmlContent": "It's a deal, it's a steal. It's the sale of the fucking century. In fact, fuck it, Nick, I think I'll keep it."
            }
          ]
        ]
      },
      {
        "rows": [
          [
            {
              "htmlContent": "Aliens"
            },
            {
              "htmlContent": "James Cameron"
            },
            {
              "htmlContent": "1986"
            },
            {
              "htmlContent": "Game over, man. GAME OVER!"
            }
          ],
          [
            {
              "htmlContent": "The Matrix"
            },
            {
              "htmlContent": "The Wachowskis"
            },
            {
              "htmlContent": "1999"
            },
            {
              "htmlContent": "There is no spoon."
            }
          ]
        ]
      }
    ],
    "foot": {
      "rows": [
        [
          {
            "htmlContent": "5 unique titles"
          },
          {
            "htmlContent": "4 unique directors"
          },
          {
            "htmlContent": "4 unique years"
          },
          {
            "htmlContent": "5 unique quotes"
          }
        ]
      ]
    }
  }
}

Purpose

The table element represents data with more than one dimension, in the form of a table.

Authors are encouraged to provide information describing how to interpret complex tables.

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

See also