Skip to content
Toyota Motor Europe

Table

Tables display structured data in rows and columns.

<table class="tng-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3

Overflow

Section titled “Overflow”

If you have a table that is wider than its container, you can wrap it in a container with the overflow utility to enable horizontal scrolling.

<div class="tng-overflow-scroll">
  <table class="tng-table">
    <!-- … -->
  </table>
</div>
Aankoopprijs Betaling Te financieren bedrag Jaarlijkse kostenpercentage Debetrentevoet Looptijd Maandbedrag Slottermijn Totaal te betalen bedrag
€ 28.000,- € 0,- € 28.000,- 7.9% 7.9% 60 maanden € 551,- € 875,- € 33.918,90
€ 35.780,- € 0,- € 35.780,- 7.9% 7.9% 60 maanden € 707,- € 875,- € 43.301,-

Accessibility

Section titled “Accessibility”

Semantic markup

Section titled “Semantic markup”

Use semantic <table>, <thead>, <tbody>, <th>, and <td> elements — they give screen readers row / column context automatically.

Table identification

Section titled “Table identification”
  • Add <caption> (or aria-label on <table>) to describe the table’s purpose.
  • Use scope="col" on column headers and scope="row" on row headers to make the relationships explicit.