Tables

In a world of smart phones 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.

Tables, used in their native, unaltered form, can and will break your site layout in smaller devices, like tablets and phones. It is 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 screenreaders 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: Insert Table icon.
  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 options dialogue box
  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. To edit rows and cells, and change your table's properties, click anywhere inside of your table and then right-click to activate the table's submenu offerings. Users will be able to:
    1. Add, delete, and merge rows and columns
    2. Delete the entire table
    3. Adjust the table's properties
    4. Edit cell properties:
      Table cell properties dialogue box
  5. When you have finished working on your table, you can click Save to finish.

Etiquetas