51社区

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:

hidden table

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.

Table Template

Sortable Table

This style allows the user to sort the table by column headings.

Sortable Table

You can edit the text in the template and add additional columns and rows.

Header 1Header 2Header 3
Row 1, Column 1Row 1, Column 2Row 1, Column 3
Row 2, Column 1Row 2, Column 2Row 2, Column 3
Row 3, Column 1Row 3, Column 2Row 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.

Searchable Table

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. 鉁

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 &nbsp; in the empty cells. You can replace 鈥淣one鈥 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 鈥淩ow鈥 and 鈥淚nsert Row After鈥 will place a new row as row two.

Adding Tables from Excel Spreadsheets

New or Updated Table Copy/Paste

  1. Highlight all of the cells in your spreadsheet and press Command C (Mac) or Ctrl C (Windows) to copy them.
  2. 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.
  3. If Web CMS asks if you want to clean the document, choose OK.
  4. Highlight all of the cells in the table you just pasted and click the icon for Remove Formatting

  5. Right click inside the table and choose Table Properties

  6. Change the Headers dropdown to display First Row and click OK.

 

 

Responsive and Accessible Tables

Note the use of scope="col" and scope="row" to clarify the heading usage.

More resources for creating W3C WCAG compliant data tables: