## Default

It is possible to achieve different table stylings (default, with border, alternating, ...)
either via multiple classes on the table, td and th elements or as a convenient alternative
as auto styling class, which is applied on a table element. These auto styling classes will
style the td and th elements correctly, without the need to apply further classes.
Note: The auto styling table classes work for simple table layouts. For more complex ones or advanced use cases, the table cell classes should be used.

```html
<table class="syn-table--default">
  <thead>
    <tr>
      <th>Header content</th>
      <th>Header content</th>
      <th>Header content</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>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
</table>
```

---

## Atomic Table

Create table styles using multiple classes attached to table, td and th elements.

```html
<table class="syn-table">
  <thead>
    <tr>
      <th class="syn-table-cell--header">Header content</th>
      <th class="syn-table-cell--header">Header content</th>
      <th class="syn-table-cell--header">Header content</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="syn-table-cell">Cell content</td>
      <td class="syn-table-cell">Cell content</td>
      <td class="syn-table-cell">Cell content</td>
    </tr>
    <tr>
      <td class="syn-table-cell">Cell content</td>
      <td class="syn-table-cell">Cell content</td>
      <td class="syn-table-cell">Cell content</td>
    </tr>
    <tr>
      <td class="syn-table-cell">Cell content</td>
      <td class="syn-table-cell">Cell content</td>
      <td class="syn-table-cell">Cell content</td>
    </tr>
    <tr>
      <td class="syn-table-cell">Cell content</td>
      <td class="syn-table-cell">Cell content</td>
      <td class="syn-table-cell">Cell content</td>
    </tr>
  </tbody>
</table>
```

---

## Auto Default Table

Use default table style with the auto styling class syn-table--default.

```html
<table class="syn-table--default">
  <thead>
    <tr>
      <th>Header content</th>
      <th>Header content</th>
      <th>Header content</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>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
</table>
```

---

## Auto Alternating Table

Use alternating table style with the auto styling class syn-table--alternating.

```html
<table class="syn-table--alternating">
  <thead>
    <tr>
      <th>Header content</th>
      <th>Header content</th>
      <th>Header content</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>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
</table>
```

---

## Auto Border Table

Use border table style with the auto styling class syn-table--border.

```html
<table class="syn-table--border">
  <thead>
    <tr>
      <th>Header content</th>
      <th>Header content</th>
      <th>Header content</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>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
</table>
```
