Working with Tables
Tables should only be used for presenting data to your website visitors. They should never be used simply to control layout and design elements of a web page. When using the WYSIWYG editor in Drupal, there is a button that will create a table for you.
You can use one of the Table Templates in the Web CMS to include sorting and searching capabilities.
Table advantages: Responsive design and conform to digital accessibility standards when created correctly.
Best practices: Include caption explaining table's purpose. For searchable/sortable tables, include info on how to filter or search. Use column headings for clarification and accessibility.
For tables that have too many columns to fit on the screen, the additional columns will be hidden within a container that can be displayed when an icon is clicked:
Using a Table Template
You can start creating a Searchable or Sortable table using the Table Template. Choose the one you want from the dropdown.
Sortable Table
This style allows the user to sort the table by column headings.
You can edit the text in the template and add additional columns and rows.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 |
Searchable Table
This style allows the table to be searched by any data in the table. The columns will also be sortable.
Creating Tables from Scratch
Selecting the Table icon in the text editor will bring up a Table Properties window. This window has options for:
- Rows
- Columns
- Headers - Select from None, First Column, First Row, and Both. Table headers tell users how the data should be read. A row and/or column should be denoted as a header if it acts as a descriptor for the data.
- Caption - while not every table needs to have a caption, it acts as a short description of what data the table contains.
Once the fields are completed, click OK to create the table.
The editor will then display an empty table with dashed lines to indicate cells. Clicking within a cell will allow data to be entered. Editors can navigate through the cells with their mouse, the arrow keys, or the Tab key.
Special Formatting
If you want to use a checkmark to mark something: You can simply copy and paste the checkmark into the editor. ✓
View supported HTML checkmarks
To format blank spaces appropriately for screenreaders: using the Source editor, you can put <span class="visually-hidden">None</span> in place of all of the in the empty cells. You can replace “None” with whatever text you want in there. Ex: no, no data, empty, etc.
Editing Tables
While in a text editor, table cells can be edited by clicking within the desired cell and changing the data.
Each table has a menu accessible by right-clicking within the body of the table. This gives the following options:
- Cell: This menu allows you to merge, split, add, remove, and edit properties are cells
- Row: Allows you to insert or delete rows
- Column: Allows you to insert or delete columns
- Delete Table: Deletes the entire table
- Table Properties: Edit properties for the entire table. This is the same properties window that appears when creating a new table.
For items 1-4, the cell in which you right-clicked is the one the actions takes place in. For instance, right- clicking in the top left-most cell and then selecting “Row” and “Insert Row After” will place a new row as row two.
Adding Tables from Excel Spreadsheets
New or Updated Table Copy/Paste
- Highlight all of the cells in your spreadsheet and press Command C (Mac) or Ctrl C (Windows) to copy them.
- In your Web CMS content editor, click where you want the cells to appear and press Command V (Mac) or Ctrl V (Windows) to paste all the cells from the spreadsheet.
- If Web CMS asks if you want to clean the document, choose OK.
Highlight all of the cells in the table you just pasted and click the icon for Remove Formatting:
Right click inside the table and choose Table Properties:
Change the Headers dropdown to display First Row and click OK.
Responsive and Accessible Tables
Example code for table with top row headers
Example code for table with top row header and first column header
Note the use of scope="col" and scope="row" to clarify the heading usage.