Tables present information in a grid or matrix, with columns and rows that show the meaning of the information in the grid.

Often, rearranging your content to avoid using tables altogether will provide a better experience for your readers. When you do use tables, ensure that they are both accessible and responsive.

All tables must have a header row or column for accessibility and responsiveness, so put labels for each of your columns in the first row (or vice versa).

Create a New Table

1. Place your cursor where you want your new table to appear.
2. Use the "Table" button in the toolbar.
3. Set the number of "Rows" and "Columns" that you want (you can add or remove these later).
4. Table captions are recommended to summarize the purpose of the table. Use the table's toolbar to toggle the caption and enter brief, descriptive text.
5. Enter your text in each table cell. Use the first row for your column headers. You can use the "Tab" key to navigate from one cell to the next.
6. With your cursor in the first row or column, use the table's "Row" or "Column" dropdown menu to toggle one as a header.

Browser support for merged cells and complex headers varies. When possible, try to 'flatten' the table: avoid spanned cells and multiple levels of header cells.

Make your browser window larger or smaller to see how well it adapts at different screen sizes.

Style & Alignment Examples

You can use the edit (or ask the Web Team to edit) the page's "Source" code to add classes to tables or table cells in order to change their styles or alignment. The following classes are supported (separately or together).

On <table> elements, you can change the look of the whole table:

• <table class="table-sm"> will condense the space within the table to make it smaller.
• <table class="table-striped"> will add different background colors to alternating rows.

On <th> for header cells <td> for regular cells, you can change the text alignment from middle (vertical) and left (horizontal) to top/bottom vertical or right (horizontal):

• <td class="align-top"> will put a regular cell's text at the top.
• <th class="align-bottom"> will put a header cell's text at the bottom.
• <td class="text-end"> will right-align text within the cell.

Basic

By default, tables on UUA.org have a transparent background and generous padding. Header cells (required) have a light gray background and bold text.

Small Table

Add the "table-sm" class to make a table more compact by cutting cell padding in half. The second column is right-aligned by using the "text-end" class on each cell.

Striped Rows

Use the "table-striped" class to add zebra-striping to any table. This table includes a caption.

Small Striped Table

Add the "table-sm: and "table-striped" classes to add zebra striping and make tables more compact. In this table, both the first row and column are marked as headers.