# Tables
Use tables to structure information into rows and columns for easy comparison. For example, to compare features in different editions of a product or to document the responsibilities of different roles.
To insert a table, use the [<table>](semantic-markup-reference.html#table) element, add rows using [<tr>](semantic-markup-reference.html#tr) , and cells using [<td>](semantic-markup-reference.html#td) .
> **Tip:**
> You can start typing `table` or press `Ctrl+J` (Windows), `⌘ J` (macOS), `⌘ J` (IntelliJ IDEA Classic (macOS)), `⌘ J` (macOS System Shortcuts), `Ctrl+J` (XWin), `Ctrl+J` (GNOME), `Ctrl+J` (KDE), `Ctrl+J` (Emacs), `Ctrl+J` (Sublime Text), `Ctrl+J` (Sublime Text (macOS)), `Ctrl+J` (NetBeans), `Ctrl+K, X` (Visual Studio), `⌘ E, L` (Visual Studio (macOS)), `Ctrl+Alt+Shift+J` (Eclipse), `Ctrl+J` (Eclipse (macOS)) to bring up the list of live templates and insert a table with three rows and three columns.
>
>
>
> 
## Header rows and columns
By default, Writerside renders tables with the first row as the header. Use the [style](semantic-markup-reference.html#table_style) attribute to change the table header.
header-row:
`style="header-row"` is the default value, which renders the table with a header row at the top:
| Column Name | Column Name | Column Name |
| --- | --- | --- |
| Lorem ipsum dolor sit amet | Consectetur adipiscing elit | Mauris feugiat euismod sapien at iaculis |
header-column:
Set `style="header-column"` to render the table with the first column as the header:
| Row Name | Lorem ipsum dolor sit amet | Consectetur adipiscing elit |
| Row Name | Mauris feugiat euismod sapien at iaculis | Sed vel turpis quam |
both:
Set `style="both"` to render both a header row and a header column:
| | Column Name | Column Name |
| --- | --- | --- |
| Row Name | Lorem ipsum dolor sit amet | Consectetur adipiscing elit |
| Row Name | Mauris feugiat euismod sapien at iaculis | Sed vel turpis quam |
none:
Set `style="none"` to render the table without headers:
| Consectetur adipiscing elit. | Lorem ipsum dolor sit amet. |
| Mauris feugiat euismod sapien at iaculis | Sed vel turpis quam |
## Column width
By default, Writerside automatically adjusts row and column sizes according to the size of the content in a table.
```XML
| Column |
Wide column |
Very wide column |
| one |
two |
three |
| one |
two |
three |
```
As you change the width of the window, this table will always automatically adjust the first column to be the smallest and the third one to be the widest:
| Column | Wide column | Very wide column |
| --- | --- | --- |
| one | two | three |
| one | two | three |
You can use the [width](semantic-markup-reference.html#td_width) attribute in the [<td>](semantic-markup-reference.html#td) element to set the width of a column in pixels:
```XML
| Column |
Wide column |
Very wide column |
| one |
two |
three |
| one |
two |
three |
```
Other columns will still be automatically adjusted according to their content:
| Column | Wide column | Very wide column |
| --- | --- | --- |
| one | two | three |
| one | two | three |
Use the [column-width](semantic-markup-reference.html#table_column-width) attribute in the [<table>](semantic-markup-reference.html#table) element to disable auto-adjustment of column widths:
```XML
| Column |
Wide column |
Very wide column |
| one |
two |
three |
| one |
two |
three |
```
Setting `column-width="fixed"` forces all column widths to be equal:
| Column | Wide column | Very wide column |
| --- | --- | --- |
| one | two | three |
| one | two | three |
You can still set the width of specific columns:
```XML
| Column |
Wide column |
Very wide column |
| one |
two |
three |
| one |
two |
three |
```
However, in a fixed-width table, other columns will take equal portions of the remaining width:
| Column | Wide column | Very wide column |
| --- | --- | --- |
| one | two | three |
| one | two | three |
## Sticky headers
Use `` for long tables to force the header row to remain visible while scrolling through the table.
| Table | With | Sticky | Header |
| --- | --- | --- | --- |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Table header row will scroll until the last row. | Table header row will scroll until the last row. | Table header row will scroll until the last row. | Table header row will scroll until the last row. |
## Sortable tables
Add `sortable="true"` to a [<table>](semantic-markup-reference.html#table) element to let readers sort rows interactively by clicking a column header. Clicking a header once sorts the column in ascending order; clicking it again reverses the order.
Sorting is text-based with numeric collation, so values like 1, 2, and 10 sort in natural numeric order.
Sortable tables must use header-row semantics (the default `style="header-row"`).
```XML
| Name |
Score |
| Alice |
42 |
| Bob |
7 |
```
| Name | Score |
| --- | --- |
| Alice | 42 |
| Bob | 7 |
| Carol | 10 |
To disable sorting for a specific column, add `sortable="false"` to the corresponding header-row cell:
```XML
```
## Markdown tables
For simple tables in a Markdown file, use hyphens `---` to separate the header row, and pipes `|` to separate each column.
```
| Foo | Bar | Baz |
|--------|--------|----------|
| One | Two | Three |
| Higher | Faster | Stronger |
```
Alternatively, press `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Alt+Insert` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Visual Studio), `⌘ ⌃ N` (Visual Studio (macOS)), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)) to open the Insert menu, and then select Table to generate a Markdown table of any size.
Markdown tables have certain limitations. For example, they must always have a header row, you cannot break lines in cells, you cannot span a cell across multiple rows or columns. If you need a more complex table, use the [<table>](semantic-markup-reference.html#table) element.
Procedure: Convert Markdown table to semantic markup
* With the caret inside the table, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) and select Convert Markdown table to XML format.
> **Tip:**
> When you paste a Markdown table into a semantic `.topic` file, Writerside will suggest converting it automatically.