Tables

Available on
CKEditor 5
Faculty Sites
Sites+

HTML tables are used to arrange data that is best understood arranged in corresponding rows and columns.

Accessibility best practice: Tables should not be used for making page layouts because assistive technology relies on tables for communicating information relationships to non-visual users.

Create a table

The table button is the first thing in the toolbar

Begin creating a table by placing your cursor where you want the table to go, then clicking the table icon in the editor toolbar.

This will open a dropdown box containing a grid that will highlight small boxes in the wake of your cursor, indicating the size of your table and displaying the number of rows and columns at the bottom of the dropdown. Click when you’re satisfied with the size of your table. An empty table will appear in the text editor, ready for content. (You can edit the number of rows and columns any time; this is just to get started.)

Animation showing how to use the highlight grid to start a table.

Edit table properties

Customize an existing table by clicking anywhere in the table to open the table properties.

Table properties dropdown

Column options

Column optionsDesignate the column as a Header

Insert a column to the left or right of the selected cell

Delete currently selected column

Select the whole column


Row options

Row options

Designate the row as a header

Insert a row above or below the selected cell

Delete the currently selected row

Select the whole row


Cell options

Cell options

Merge sells up, down, left, or right

Split cells vertically or horizontally


Caption

Caption the table with the caption button

Caption button

Responsive tables

Tables will automatically adjust to work well on screens of any width. Basic tables will re-arrange into a single column. Tables with merged cells will scroll horizontally without stretching the page, to preserve that formatting.