Web Team: Contribute Resource Guide
Working With Tables
- When to Use Tables
- Creating Tables
- Adding Content to Tables
- Selecting Columns, Rows, and Tables
- Adding Accessibility Features to Tables
- Table Formatting
When to Use Tables
Tables should primarily be used for tabular data or items that would typically be displayed in a spreadsheet form. Examples include: fees-for-services, telephone directories, diagnostic tools, etc.
Avoid using tables as a means to manipulate the content or control the layout of text and images on the page. Improper use of tables can create inaccessible content for users accessing the web with alternative browsers.
Creating Tables
In order to create a table in a draft:
- Place your cursor where you would like to insert a new table (in the editable content region)
- Choose the table icon to open the "Insert Table" dialog box.
Fill in the following information to prepare for proper table formatting:
- Determine the number of rows and columns for your table (you can adjust this later if you don't know)
- Table width- Specific width: 100%
- Border thickness: 0
- Cell padding: 0
- Cell spacing: 0
- Choose "OK"
- A new table has been added to your content.
Selecting Columns, Rows, and Tables
You may wish to select multiple elements of a table to apply specific styles, add new content, or delete items.
Select a table, table column, or row by dragging your mouse over the items you wish to select.
Alternatively, you can select
- an entire table by moving your mouse over the upper left corner of the table until you see a hand icon, left-click to select;
- an entire row by moving your mouse over leftmost edge of the row until you see a horizontal arrow pointing to the right, left-click to select;
- an entire column by moving your mouse over topmost edge of the column until you see a vertical arrow pointing down, left-click to select.
Adding Content to Tables
You can type directly into each table cell, much like you might in a word-processing program. For each column and row, be sure that the first column and row cell is descriptive of the contents.
For instance, in the table below, each column is described with category names: name, phone number, and email address. Each row can be described by the person's name, since the phone number and email address are associated with them.
| Name | Phone Number | Email Address |
| Jane | 555-1212 | jane@uga.edu |
| Joe | 555-2121 | joe@uga.edu |
Adding Columns
Select an entire column and choose the "Table Column" icon from your toolbar. This will add a new column to the right of the chosen one.
Adding Rows
Select an entire row and choose the "Table Row " icon from your toolbar. This will add a new row beneath the chosen one.
Adding Accessibility Features to Tables
It's important to make your content accessible for people using assistive technologies. In Contribute, you can make your table more legible by assigning "headers" to table columns and rows. If you've already created headings in your table, you're halfway there.
- Use your cursor to select the top row of your table, this should contain headings that describe each column (if not, add this info first).
- Choose the "Table" icon from your toolbar, this opens the "Table Properties" dialog box.
- The "Row"/"Column" tab should be highlighted
- Select "Header row"/"Header column" at the bottom of the dialog box.
- Choose OK
- Your heading text should turn to bold and be centered in the column.
- Select the first column of your table and repeat steps 2 and 3.
In the table below, each column and row heading have been re-assigned "header" status.
| Name | Phone Number | Email Address |
|---|---|---|
| Jane | 555-1212 | jane@uga.edu |
| Joe | 555-2121 | joe@uga.edu |
Table Formatting
Tables within the CAES templates can be formatted using the style drop-down menu in Contribute. Based on the styles outlined below, you may apply a style to an entire table or isolate it to a specific table row or column.
For entire tables
The CAES stylesheets provide for two basic table views that format the table spacing and borders. These are "grid" and "horiz".
grid: (grid, grid2, grid3)
- outlines all table cells with a light gray grid
- cell padding = 3 pixels
- width automatically 100% of content area
- type size varies from 100% (grid) to 80% (grid3) of regular text size.
- Example of table with class "grid" applied:
content row some text some text content row some text some text
horiz: (horiz, horiz2, horiz3)
- outlines all table rows with a light gray horizontal line
- cell padding = 3 pixels
- width automatically 100% of content area
- type size varies from 100% (horiz) to 80% (horiz3) of regular text size.
- Example of table with class "horiz" applied:
content row some text some text content row some text some text
To apply "grid", "horiz" or one of its variations to an ENTIRE TABLE:
- select the table
- select the chosen style from the style drop-down menu
For rows and columns:
The CAES stylesheets provide for two basic variations for table rows and columns using the grid/horiz formatting. The "head" and "highlight" styles help to focus the user on the headings of a table, as well as distinguish many lines from each other.
head:
- makes table heading bold, black and applies gray background color
- typically applied to the first row or column of a table
- linked text in head class automatically red.
- Example of table row with class "head" applied:
header row head2 head3 content row some text some text
highlight:
- this class can be used to highlight alternating rows columns a light yellow color.
- Example of table rows with class "highlight" applied:
content row some text some text content row with class highlight applied some text some text content row some text some text content row with class highlight applied some text some text
To apply "head" or "highlight" to a table row or column:
- select the table row or column
- select the chosen style from the style drop-down menu