Tables

Tables are great … for data

Using a WYSIWYG editor, you can copy-and-paste a table or add one from scratch by using the Table tool. Remember, though, that tables are for tabular data, not for layout or effect.

Table Basics

Tables are for data and only data.

The purpose of data tables is to present tabular information in a grid, or matrix, and to have column[s] or rows that show the meaning of the information in the grid.

WebAim, "Creating Accessible Tables"

Before you add a table, ask yourself:

  • Does this table have multiple columns and rows?
  • Does this table have (or can you add) row and/or column headers? A header describes what's in a related row or column. For example: "Class," "Date," "Time," and "Location" might be headers for a table that lists available training opportunities.

If you answered no to either question, you don't have a table. Use other methods to get the effect you're looking for.

For example, if you want similar content to appear in different columns, consider using:

The WYSIWYG editor lets you easily edit and meet accessibility requirements for simple tables. A simple table has a header row, a header column, or both. Simple tables do not include irregular or multiple-level headers or merged cells.

The table tools will let you add complex tables, but setting them up correctly and making them accessible and user-friendly can be difficult. Unless you have an overwhelming desire to tweak the HTML to make your table work properly, we recommend breaking any complex table into a few simple tables or finding a different way of displaying your information. Contact us if you have a complex table and aren't sure how to deal with it. See “Cell Options” if you want to try adding a complex table.

Examples of Simple Tables

Table with column headers
Date Time Location
May 12 8:30 a.m. Rosenfield Center, Room 101
May 13 4:40 p.m. Bucksbaum Arts Center, Roberts Theatre
    Table with row headers
    Date May 12 May 13
    Time 8:30 a.m. Noon
    Location Rosenfield Center, Room 101 Bucksbaum Arts Center, Roberts Theatre

    For accessibility, your table must:

    • Be used for tabular data. Don't use tables as a way to layout columns or add white space.
    • Indicate row and column headers.
    • Be simple or, if the table is complex, include full header information, an excellent summary, and proper <tr>, <th>, and <td> tags and construction. 

    Your table should:

    • Include a caption and/or a summary explaining what the table contains. This will help people with screen readers quickly figure out if a table has content they are interested in.

    Our tables are:

    • Responsive: they resize to fit the user's browser window. The browser determines the optimal width of each column.
    • Standardized: captions, headers, and data look the same throughout the site.

    The published table will look different from what you see in the editor.

    • When you paste a formatted table from elsewhere, it may look like you kept formatting such as background colors or column widths, but these will be ignored in the published version.
    • The table properties appear to allow you to set properties that will later be removed or overridden when the table is published.

    A few things that are different when the table is published include:

    • Table captions will appear above the table, styled to look like a part of the table.
    • Table headers will automatically be styled to stand out from the rest of the table. Do not try to bold them or otherwise try to distinguish them. Just make sure they are marked as headers.
    • Table properties such as cell spacing, padding, and border size will be overridden by the site styles. They will show up in the WYSIWYG editor, but be ignored on the published page.
    • Cell properties, such as vertical and horizontal alignment and border and background color, will be stripped or overridden in the published table.

    What does this mean for you?

    It means you need to focus on making sure your tables are simple, are used for tabular data, and have headers that are marked correctly.

    It means don't bother tweaking the width of a column, setting a background color, or adding a deep border to a table.

    Working With Tables

      Table icon

      To add a new table:

      1. Place your cursor where you want the table to appear.
      2. Click the Table icon. Drupal will display the Table Properties dialog box.
      3. Select the number of rows and columns you need (you can add more later if needed).
      4. Indicate the headers (first row, first column, or both).
      5. Add a caption or summary (optional for simple tables).
      6. Click OK.

      See "Table Properties" for more information.

      Tip:

      Collapsed table
      Collapsed table

      When Drupal adds the table, it will be collapsed and your cursor will be in the top left cell.

      If you are uncomfortable working with a collapsed table, you can add a space in each cell of the first row to make it easier. To do so, press the Spacebar, press Tab to go to the next cell, and repeat.

      You can copy a table from an email, Word document, Excel spreadsheet, or other location and paste it into the WYSIWYG editor.

      Recommendations if you do so:

      • Simplify your tables before you copy them. This makes it easier to make them accessible.
      • Use Table Properties to check for table headers and set them if needed. These are rarely correct on copy-and-paste tables.
      • Select the entire table and then click Remove Format in the icon bar (it looks like a capital T with a subscript x). This will remove a lot of underlying code that would get stripped out when the table is published, which makes it easier to work with the table in the editor.

      To delete a table:

      1. Right-click on the table (or CTRL+click).
      2. Select Delete table.

      Drupal will delete the entire table. 

      Note: If you normally select a table and then click delete, you may delete the whole table, or you might find that you deleted the data in the table but the table remains. That is because you may or may not have picked up the full table. The directions above will delete the entire table every time.

      Table Icon, Properties, and Options

      See what table options will work, and which you should ignore.

      Table icon

      Use the Table tool in the WYSIWYG editor to:

      • Add a table. See "Creating a Table From Scratch."
      • Access table properties for an existing table. To do so, place your cursor in the table and click Table. Drupal will display the table properties.
      Table properties dialog box

      Use Table Properties to set basic elements for the entire table.

      You can see table properties when:

      • You add a new table from scratch.
      • You right-click on a table and select Table Properties.
      • You select a table and click the Table icon.
      Table Properties
      Property Name Describes … Notes
      Rows Number of rows

      Use when creating a new table.

      Not available on tables that have been created already.
      Columns Number of columns

      Use when creating a new table.

      Not available on tables that have been created already.
      Headers Which cells are header cells Select first row if cells in the first row describe what is in each column.
      Select first column if cells in the first column describe what is in each row.
      Border size Not applicable Ignore this field or set it to 1. Any entry will be removed when the table is published.
      Cell Spacing Not applicable Ignore this field or set it to 1. Any entry will be removed when the table is published.
      Cell Border Not applicable Ignore this field or set it to 1. Any entry will be removed when the table is published.
      Caption The table caption (Optional) The caption appears on the site and is like a label for the table. Use it to tell readers what the table is about. A caption isn't necessary if it's obvious from a nearby header exactly what the table is, but it is useful in most circumstances.
      Summary The table summary

      (Optional) The summary doesn't appear on the site, but is read by screen readers. Use it to describe the table, including how it's organized. E.g. "Column one has names of the events. The remaining columns describe details about each event, including the date, time, location, and ticket requirements."
      Cell properties dialog box

      You can see the Cell options if you right-click or Ctrl+click on a table cell and hover over Cell.

      Cell options are useful for complex tables. They include:

      • Tools to add and delete cells.
      • Tools to merge and split cells.
      • Cell properties, all of which will be ignored except the choice between a cell being a data cell or a header cell.

      If you know what you're doing and know how to check and fix accessibility for complex tables, you're welcome to use them. If not, however, please simplify your tables. You can then do all that you need to do without using these options.

      Open menu of row options

      To see Row options, right-click or Ctrl+click on a table cell and hover over Row.

      Row options are:

      • Add a row before
      • Add a row after
      • Delete a row
      Open menu of column options

      To see Column options, right-click or Ctrl+click on a table cell and hover over Column.

      Column options are:

      • Add a column before
      • Add a column after
      • Delete a column

      We use cookies to enable essential services and functionality on our site, enhance your user experience, provide better service through personalized content, collect data on how visitors interact with our site, and enable advertising services.

      To accept the use of cookies and continue on to the site, click "I Agree." For more information about our use of cookies and how to opt out, please refer to our website privacy policy.