Tables
Last modified: 07 August 2024Use 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>
element, add rows using <tr>
, and cells using <td>
.
tip
You can start typing
table
or press 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
attribute to change the table header.
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 |
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 |
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 |
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.
<table>
<tr>
<td>Column</td>
<td>Wide column</td>
<td>Very wide column</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
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 attribute in the <td>
element to set the width of a column in pixels:
<table>
<tr>
<td width="300">Column</td>
<td>Wide column</td>
<td>Very wide column</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
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 attribute in the <table>
element to disable auto-adjustment of column widths:
<table column-width="fixed">
<tr>
<td>Column</td>
<td>Wide column</td>
<td>Very wide column</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
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:
<table column-width="fixed">
<tr>
<td width="300">Column</td>
<td>Wide column</td>
<td>Very wide column</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
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 |
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 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>
element.
Convert Markdown table to semantic markup
With the caret inside the table, press 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.