Skip to main content Skip to secondary navigation
New Guide!

Welcome to the Stanford Sites 4.0 User Guide. 

Tables

Main content start

Tables are a great option to provide a structured way of showing large amounts of information and they make organizing information in a clean and readable way very easy. Tables should only be used for tabular data, not for layout or positioning items like images next to text.

Components of a useful table contain the following:

  • Title
  • Caption
  • Table row and/or column headers
  • Information/Data

Create a table

  1. In the Text Area, click the table icon:
  1. Decide how many rows and columns you want.
  1. Add table header and column. For your table to be accessible, unless you're creating a calendar, you'll want both a table header row and column.
  2. Delete the width and height properties (Drupal will fill the max-width based on the display device).
  3. Click OK.

Edit a table

Right-click an existing table to edit cells and the number of rows and columns. *Learn how to customize the look and feel of your tables using utility classes.

Example table

Here is an example of content that is suitable for an HTML table. 

Olympic Medals, country by the year
YearUSACHNRUS
20121048882
200811010072
20041036292

By default, the table layout is responsive to the user's screen-size and will fold into a two column layout with headers on the left for a viewport that is 640px or less.

table in mobile view

*Resize your viewport to across the 40em (640px) breakpoint to see the responsive table style. 

Related Topics

Add Font Awesome icons

Using symbols such as icons to augment the text on your website can improve comprehension and clarify your message.