Tables help you organize information to make it easier for readers to skim. However, if your table becomes too long, follow the "five to nine" guideline and consider restructuring the information in other ways.
Use sentence case for text in every table column unless it's a specific file name or code value that requires lower case or all caps.
Tip
The Keyboard Maestro macro for the Table component is kktable
Table syntax
Our tables are built as MDX React components. In practice, they're quite similar to HTML tables:
<table> <thead> <tr> <th style={{ width: "200px" }}> **Item** </th> <th> **Description** </th> </tr> </thead> <tbody> <tr> <td> Item name </td> <td> Description of item </td> </tr> </tbody></table>Tip
The docs site technically supports Markdown tables, but we avoid using them for a few reasons:
- There are multiple flavors of Markdown, and different flavors use different table syntaxes. This is because John Gruber's original Markdown spec did not include tables.
- Markdown tables don't support elements that span multiple lines, and most of our tables include code blocks, bulleted lists, or other elements that require multiple lines.
Setting column width
You can set column width with a style rule on the <th> element:
<th style={{ width: "200px" }}>In general, for two-column tables on the docs site:
- Set the first column as 200 pixels:
style={{ width: "200px" }}. - To allow the table to adjust automatically to the remaining page width, do not set a width for the second column.
Tables to describe UI functions
When using tables to describe available functions, give readers a roadmap. They may know what they want to find or accomplish, but they may not know what it's called or how to do it.
For example, to provide a list of features for a particular UI page, label the header's first column If you want to... and label the second column Do this.