Tables | Alt Text Editor

Support for tables is not defined by the CommonMark spec, but markdown tables are widely used and the community has adopted the Github Flavored Markdown (GFM) spec to represent them.

Confluence has deep support for tables and Alt Text Editor supports them with the GFM table syntax, where possible. Where the Confluence Storage Format for a table contains attributes that cannot be represented by GFM, a custom table directive exists to contain the raw Storage Format of the table.

Examples

A table with 2 rows and 2 columns, including a heading. This example uses pure GFM markup without directives

| cats     | *dogs* |
| -------- | -------- |
| felix    | scooby   |
| garfield | hooch    |

<table>
  <tbody>
    <tr>
      <th>
        <p>cats</p>
      </th>
      <th>
        <p><em>dogs</em></p>
      </th>
    </tr>
    <tr>
      <td>
        <p>felix</p>
      </td>
      <td>
        <p>scooby</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>garfield</p>
      </td>
      <td>
        <p>hooch</p>
      </td>
    </tr>
  </tbody>
</table>

Like the previous example, this one contains a table with 2 rows and 2 columns, including a heading. This example also wraps the markup in a directive that allows specifying the Confluence-specific attributes size (340 by 340) and ac-local-id

:::table[340x340]{#123 data-layout=default}
| cats     | *dogs* |
| -------- | -------- |
| felix    | scooby   |
| garfield | hooch    |
:::

<table data-layout="default" ac:local-id="123">
  <colgroup>
    <col style="width: 340.0px;" />
    <col style="width: 340.0px;" />
  </colgroup>
  <tbody>
    <tr>
      <th>
        <p>cats</p>
      </th>
      <th>
        <p><em>dogs</em></p>
      </th>
    </tr>
    <tr>
      <td>
        <p>felix</p>
      </td>
      <td>
        <p>scooby</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>garfield</p>
      </td>
      <td>
        <p>hooch</p>
      </td>
    </tr>
  </tbody>
</table>

Markdown tables support alignments by adding colons to the corresponding position on the header delimiter line:

left (:--)
right (--:)
center (:--:)

| cats     |   dogs |  ducks |
| :------- | -----: | :----: |
| felix    | scooby | daffy  |
| garfield |  hooch | donald |

<table>
  <tbody>
    <tr>
      <th>
        <p style="text-align:left;">cats</p>
      </th>
      <th>
        <p style="text-align:right;">dogs</p>
      </th>
      <th>
        <p style="text-align:center;">ducks</p>
      </th>
    </tr>
    <tr>
      <td>
        <p style="text-align:left;">felix</p>
      </td>
      <td>
        <p style="text-align:right;">scooby</p>
      </td>
      <td>
        <p style="text-align:center;">daffy</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="text-align:left;">garfield</p>
      </td>
      <td>
        <p style="text-align:right;">hooch</p>
      </td>
      <td>
        <p style="text-align:center;">donald</p>
      </td>
    </tr>
  </tbody>
</table>

When Alt Text Editor encounters Storage Format for a table that cannot be represented in markdown, it will wrap the Storage Format in a table directive and specify that it is too complex using an attribute.

For example, as seen in the above example, specifying an alignment will apply that alignment to the entire column. If Confluence Storage Format indicates that cells from different rows of the same column have differing alignments, a complex table directive is used

<table>
  <tbody>
    <tr>
      <th>
        <p style="text-align:left;">cats</p>
      </th>
    </tr>
    <tr>
      <td>
        <p style="text-align:right;">felix</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="text-align:left;">garfield</p>
      </td>
    </tr>
  </tbody>
</table>

:::table{.complex}
<table>
  <tbody>
    <tr>
      <th>
        <p style="text-align:left;">cats</p>
      </th>
    </tr>
    <tr>
      <td>
        <p style="text-align:right;">felix</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="text-align:left;">garfield</p>
      </td>
    </tr>
  </tbody>
</table>
:::