Tables serve to provide structured display of information and vary in type from simple to very complex. 

Table

Tables can contain text and images as well as actions and other components. 

Tables consist solely of horizontal lines which are interrupted between the columns. The table head is highlighted with thicker lines. Individual columns, lines or cells can be graphically highlighted in the defined grey scales.

In the case of more extensive tables, a sorting by column function is recommended. Sorting capability is indicated by means of an arrow icon.

If a table becomes too wide for a viewport, it is possible to scroll horizontally through the columns or else the table is subdivided into several smaller, stacked tables.

Table caption
Header 1 Header 2 Header 3 Header 4
Footer 1 Footer 2 Footer 3 Footer 4
Row1, Column1 Row1, Column2 Row1, Column3 Row1, Column4
Row2, Column1 Row2, Column2 Row2, Column3 Row2, Column4
Row2, Column1 Row2, Column2 Row2, Column3 Row2, Column4
HTML
<div class="aui-table aui-table--stretched">
  <table>
    <caption>Table caption</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tfoot>
      <tr class="aui-table__cell--last-row">
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
      </tr>
    </tfoot>
    <tr>
      <td>Row1, Column1</td>
      <td>Row1, Column2</td>
      <td>Row1, Column3</td>
      <td>Row1, Column4</td>
    </tr>
    <tr>
      <td>Row2, Column1</td>
      <td>Row2, Column2</td>
      <td>Row2, Column3</td>
      <td>Row2, Column4</td>
    </tr>
    <tr>
      <td>Row2, Column1</td>
      <td>Row2, Column2</td>
      <td>Row2, Column3</td>
      <td>Row2, Column4</td>
    </tr>
  </table>
</div>
Table caption
Header 1 Header 2 Header 3 Header 4
Row1, Column1 Row1, Column2 Row1, Column3 Row1, Column4
Row2, Column1 Row2, Column2 Row2, Column3 Row2, Column4
Row2, Column1 Row2, Column2 Row2, Column3 Row2, Column4
HTML
<div class="aui-table aui-table--padded">
  <table>
    <caption>Table caption</caption>
    <thead>
      <tr>
        <th class="aui-table__cell--colored">Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tr>
      <td class="aui-table__cell--colored">Row1, Column1</td>
      <td>Row1, Column2</td>
      <td>Row1, Column3</td>
      <td>Row1, Column4</td>
    </tr>
    <tr>
      <td class="aui-table__cell--colored">Row2, Column1</td>
      <td>Row2, Column2</td>
      <td>Row2, Column3</td>
      <td>Row2, Column4</td>
    </tr>
    <tr class="aui-table__cell--last-row">
      <td class="aui-table__cell--colored">Row2, Column1</td>
      <td>Row2, Column2</td>
      <td>Row2, Column3</td>
      <td>Row2, Column4</td>
    </tr>
  </table>
</div>
Table caption
Header 1 Header 2 Header 3 Header 4
Row1, Column1 Row1, Column2 Row1, Column3 Row1, Column4
Row2, Column1 Row2, Column2 Row2, Column3 Row2, Column4
Row3, Column1 Row3, Column2 Row3, Column3 Row3, Column4
HTML
<div class="aui-table aui-table--responsive">
  <table>
    <caption>Table caption</caption>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tr>
      <td data-label="Header 1">Row1, Column1</td>
      <td data-label="Header 2">Row1, Column2</td>
      <td data-label="Header 3">Row1, Column3</td>
      <td data-label="Header 4">Row1, Column4</td>
    </tr>
    <tr>
      <td data-label="Header 1">Row2, Column1</td>
      <td data-label="Header 2">Row2, Column2</td>
      <td data-label="Header 3">Row2, Column3</td>
      <td data-label="Header 4">Row2, Column4</td>
    </tr>
    <tr class="aui-table__cell--last-row-responsive">
      <td data-label="Header 1">Row3, Column1</td>
      <td data-label="Header 2">Row3, Column2</td>
      <td data-label="Header 3">Row3, Column3</td>
      <td data-label="Header 4">Row3, Column4</td>
    </tr>
  </table>
</div>
Table caption
Header 1 Header 2 Header 3 Header 4
Row1, Column1 Row1, Column2 Row1, Column3 Row1, Column4
Row2, Column1 Row2, Column2 Row2, Column3 Row2, Column4
Row3, Column1 Row3, Column2 Row3, Column3 Row3, Column4
HTML
<div class="aui-table aui-table--stretched aui-table--responsive">
	<table>
		<caption>Table caption</caption>
		<thead>
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
				<th>Header 3</th>
				<th>Header 4</th>
			</tr>
		</thead>
		<tr>
			<td data-label="Header 1">Row1, Column1</td>
			<td data-label="Header 2">Row1, Column2</td>
			<td data-label="Header 3">Row1, Column3</td>
			<td data-label="Header 4">Row1, Column4</td>
		</tr>
		<tr>
			<td data-label="Header 1">Row2, Column1</td>
			<td data-label="Header 2">Row2, Column2</td>
			<td data-label="Header 3">Row2, Column3</td>
			<td data-label="Header 4">Row2, Column4</td>
		</tr>
		<tr class="aui-table__cell--last-row-responsive">
			<td data-label="Header 1">Row3, Column1</td>
			<td data-label="Header 2">Row3, Column2</td>
			<td data-label="Header 3">Row3, Column3</td>
			<td data-label="Header 4">Row3, Column4</td>
		</tr>
	</table>
</div>
Audi UI Kit Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 MB

Examples

Dos & Don’ts

Columns can be emphasised.
Highlights should be applied sparingly and be limited specifically to one line or column or a manageable number of cells.
Rows can be emphasised.
Don’t place a table with highlight against a red background.