Tabellen dienen der strukturierten Darstellung von Informationen und werden nach Bedarf von einfachen bis zu sehr komplexen Ausprägungen variiert.

Tabelle

Tabellen können neben Text und Bildern auch Aktionen und andere Komponenten enthalten. 

Tabellen bestehen ausschließlich aus horizontalen Linien, die zwischen den Spalten unterbrochen werden. Der Tabellenkopf wird mit stärkeren Linien betont. Einzelne Spalten, Zeilen oder Zellen können grafisch in den definierten Grauabstufungen hervorgehoben werden.

Bei umfangreicheren Tabellen ist eine Implementierung mit Sortierbarkeit nach Spalten empfehlenswert. Eine mögliche Sortierbarkeit wird durch ein Pfeil-Icon angezeigt.

Wird eine Tabelle zu breit für einen Viewport, kann entweder horizontal durch die Spalten gescrollt werden oder die Tabelle wird in mehrere kleinere, gestapelte Tabellen aufgeteilt.

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: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Anwendungsbeispiele

Dos & Don’ts

Spalten können betont werden.
Hervorhebungen sollten sparsam Verwendung finden und sich gezielt auf eine Zeile, Spalte oder eine übersichtliche Anzahl von Zellen beschränken.
Zeilen können betont werden.
Tabelle mit Hervorhebung nicht auf Rot platzieren.