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 – Integration into Sketch library

To ensure designers are using the most up-to-date components in their products, the Audi UI Kit was created as a sketch library. Integrate this UI Kit to get the latest Audi Sketch Library. Updates will be made regularly and users will be informed when new versions of the Library are available.

 

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.