Tables

In a world of smartphones and mobile web, HTML tables are creatures that must be approached with caution. We want you to use tables conservatively and with full knowledge of what choosing to do so will mean for your site.

It's important to evaluate why you think a table is appropriate and consider whether any other option would still achieve the same goal of communicating your information.

Reasons to avoid tables

  • Using tables to achieve a certain layout or image placement is always wrong. If you're trying to accomplish a certain look or feel with your page and you aren't able to figure it out without resorting to a table, contact us first for assistance at sitefarm@ucdavis.edu
  • Tables are not as SEO-friendly. Search engine algorithms look for human-readable content and rank it higher than content placed in tables.
  • Content in a table may not display until the entire table has loaded, giving users a delay of a second or two before the content appears.
  • Tables can create accessibility issues for people who rely on screen readers to navigate and interact with the content on your site.

The ONLY Reason to use tables

  • Displaying tabular data of an alpha-numeric nature in rows and columns to achieve maximum effect and comprehension. 

Creating a Table

If, after reading through the points above, you decide a table is an appropriate choice for your content, then here are the steps to include one:

  1. Inside the WYSIWYG section of your content type, select the Table icon: 
    Table icon available from the WYSIWYG bar
  2. A dialogue box will appear providing you with your initial starting options to create and configure the structure of your table. You will be able to set:
    1. Columns - you can change this afterward if necessary
    2. Rows - you can change this afterward if necessary
    3. Header - allows you to set the top row, first column, or both as styled title headers, or leave it as None.
    4. Caption - a one-sentence description of the table's contents. This is required for accessibility standards.
      Table configuration properties
  3. Your table structure will appear in the WYSIWYG region and will include a red warning message that reads, "WARNING: Tables will break layouts in mobile and should only be used for fluid tabular data." This message will NOT appear on your published page; this is a warning message for you, the user.
  4. At the current moment, table and cell properties are largely unavailable due to a bug in the CKEditor code. As we will eventually be adopting CKEditor5 and no work is currently being done to support properties in this version, we'll await the new iteration of CKEditor5. If you're interested, please checkout CKEditor5's tables demo.

 

Table Demo

This is a table caption.
Column 1 title Column 2 title
Lorem ipsum dolor sit amet Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Aenean vulputate eleifend tellus.

 

Table Styles

By using the Styles menu in your WYSIWYG you can apply a handful of pre-created styles to your table, providing basic options for borders, row stripes, and border colors. In all cases, the each cell's vertical alignment should have the text begin at the top of the cell regardless of how much text is in any cell in the same row.

Apply a table style

  1. Click into a cell inside of your targeted table.
  2. From your WYSIWYG bar, click on the Style menu located on the second row, on the left side.
  3. Select one of the following table style options, which you can preview on Patternlab:
  4. Complete the style application by clicking your page or block's Save button.

Smart Device Responsive

As of the 2021 Redesign, tables will now be horizontally responsive. If the width of the table exceeds the width of the device's sceen (smartphones, tablets), a scrollbar will appear to let users slide the screen back and forth to view the other table cells. A visual cue in the form of a vertical shadow will indicate more of the table exists and is available to be viewed. 

Tags