Publications Office of the EU
Tables - Publications Office Web Guide
DisplayCustomHeader
MyPortal
BasketSummary
Dockbar

Tables

Last updated: 9/12/2022

When to use tables

Tables should be used only to organise a structured set of data in rows and columns (tabular data). Basically, to present information that would be best suited for a spreadsheet. Tables should not be used for layout purposes.

Learn more about when to use tables:

External link: The Benefits and Drawbacks of HTML Tables

External link: HTML Tables: Find Out When To Use Them (And When To Avoid)

Tables with one header

Header cells top row.

Table caption
Header 1 Header 2 Header 3
Cell content Cell content Cell content
Cell content Cell content Cell content
Cell content Cell content Cell content

HTML code

<table>
    <caption>Table caption</caption>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
          </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </tbody>
</table>

Tables with two headers

Header cells top row and first column.

Table caption
  Header 1 Header 2 Header 3
Header 4 Cell content Cell content Cell content
Header 5 Cell content Cell content Cell content
Header 6 Cell content Cell content Cell content

HTML code

<table>
    <caption>Table caption</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
            <th scope="col">Header 3</th>
          </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Header 4</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
        <tr>
            <th scope="row">Header 5</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
        <tr>
            <th scope="row">Header 6</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </tbody>
</table>

Responsive tables

Tables are not natively responsive. But a horizontal scroll bar may be added for wide tables so they can be viewed on smaller screens such as mobile devices.

To do so, wrap the table inside a div tag with a style="overflow-x: auto;". On the Publications Office portal, you may also use External link: Bootstrap responsive classes. Additionally, set a table min-width; this will tell the browser to never make the table narrower than the indicated value and to activate horizontal scrolling.

Scroll horizontally to see the responsive behaviour.

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
Cell content Cell content Cell content Cell content Cell content Cell content Cell content Cell content
Cell content Cell content Cell content Cell content Cell content Cell content Cell content Cell content
Cell content Cell content Cell content Cell content Cell content Cell content Cell content Cell content

HTML code

<div style="overflow-x: auto;">
    <table style="min-width: 1300px;">
        [...]
    </table>
</div>

Options

Tables without captions

A table caption is not compulsory if a heading (an h1, h2, h3, etc.) right before the table conveys the general idea of the table content. Simply delete or do not add a caption tag such as <caption>Table caption</caption>

External link: Learn more about captions

Header 1 Header 2 Header 3
Cell content Cell content Cell content
Cell content Cell content Cell content
Cell content Cell content Cell content

Setting column widths

Header 1 (width 60%) Header 2 (width 20%) Header 3 (width 20%)
Cell content Cell content Cell content
Cell content Cell content Cell content
Cell content Cell content Cell content

HTML code

<table>
    <thead>
        <tr>
            <th style="width:20%;">Header 1 (width 20%)</th>
            <th style="width:20%;">Header 2 (width 20%)</th>
            <th style="width:70%;">Header 3 (width 70%)</th>
          </tr>
    </thead>
    [...]
</table>

Removing alternating row colours

Add the class gs-row-color-none to the table tag.

Header 1 Header 2 Header 3
Cell content Cell content Cell content
Cell content Cell content Cell content
Cell content Cell content Cell content

HTML code

<table class="gs-row-color-none">
    [...]
</table>

Highlighting columns

Make the column background colour gray-5. You may do this in-line in the td tags or with CSS. Do not forget to also remove alternating row colours as indicated above.

  Header 1 Header 2 Header 3
Header 4 Cell content Cell content Cell content
Header 5 Cell content Cell content Cell content
Header 6 Cell content Cell content Cell content

HTML code

<table class="gs-row-color-none">
    <thead>
        <tr>
            <td></td>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
            <th scope="col">Header 3</th>
          </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" style="background-color: var(--gs-base-color-gray-5);">Header 4</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
        <tr>
            <th scope="row" style="background-color: var(--gs-base-color-gray-5);">Header 5</th>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
        [...]
    </tbody>
</table>
DisplayCustomFooter

Info Corner

Follow us

This site is managed by

publication office of the european union

Other publications