University of Utah

Table Code Basics

Updated on

This page outlines the basic parts of a table, associated tags, and how to use them, along with an example table, example code, quick tip, and best practice for tables.

<table style="border-collapse: collapse; width: 97.8537%;" border="0">
  <caption>Table Code Tutorial Example Table</caption>
  <thead>
    <tr>
       <th style="border: 1px solid #000000; width: 20%; text-align: center;" scope="col">Types of Things</th>
       <th style="border: 1px solid #000000; width: 40%; text-align: center;" scope="col">Header 1</th>
       <th style="border: 1px solid #000000; width: 40%;" scope="col">Header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr style="border-top: 1px solid #000000;">
      <td style="text-align: center; font-size: 10pt; width: 99.9225%; color: #BE0000;" colspan="3">[FOOTER TEXT HERE]</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th style="border: 1px solid #000000; width: 20%; text-align: center;" scope="row">Thing 1</th>
      <td style="border: 1px solid #000000; width: 40%; text-align: center;">1</td>
      <td style="border: 1px solid #000000; width: 40%; text-align: center;">2</td>
    </tr>
    <tr>
      <th style="border: 1px solid #000000; width: 20%; text-align: center;" scope="row">Thing 2</th>
      <td style="border: 1px solid #000000; width: 40%; text-align: center;">4</td>
      <td style="border: 1px solid #000000; width: 40%; text-align: center;">5</td>
    </tr>
    <tr>
      <td style="border: 1px solid #000000; width: 20%; text-align: right;"><strong>Total</strong></td>
      <td style="border: 1px solid #000000; width: 40%; text-align: center;">5</td>
      <td style="border: 1px solid #000000; width: 40%; text-align: center;">7</td>
    </tr>
  </tbody>
</table>
Click to copy

Table Tags

Anything between the opening (<table>) tag and a closing (</table>) tag is part of your table. When you change formatting that applies to your entire table, the RCE will add it in the table tag or you can add it manually in HTML view.

Caption

An opening (<caption>)tag and a closing (</caption>) tag comes immediately after the table tags and designates where your caption starts and stops. The caption is centered by default. It should inform the reader of the title and purpose of the table. Be sure that your table includes a caption that describes the data and differentiates the table from other tables that may be on the same page. Also consider whether you need to include numbering in your caption titles (e.g., Table 1.1).

Table Head

The column headers go between an opening (<thead>) tag and closing (</thead>) tag.

The table footer, often designating copyright, table source, or footnotes, go between an opening (<tfoot>) tag and closing (</tfoot>) tag. If you want your footer to span across all of your columns, use a (colspan=X) tag where X equals the total number of columns in your table. Colspan should be used with caution since it merges cells and this can be an accessibility issue. However, it is okay to use colspan in the footer area since a footer is generally associated with the entire table. To add a border to your footer, change (border="0") to (border="1")in the style area of your table tag.

Table Body

An opening (<tbody>) tag and closing (</tbody>) tag is inserted after the caption tags and designate where the table body starts and stops. The table body is the row and column portion of your table.

Scope

  • Tables are coded by rows. If you follow the code versus the table in the example, you will see that while the code reads down, the information in the table reads across.
  • The table row (<tr>) and (</tr>) tags are a pair of table tags that designate where a row starts and stops. If nothing is between these two tags, the row will be blank. Table row tags are used for all table rows, whether a header row or general table data rows.
  • The table head (<th>) and (</th>) tags are a pair of table tags that defines a header cell. The text between these tags are centered and bolded by default.Don't leave the upper left cell blank. Instead, include column header text where appropriate.
  • Use the scope attribute to specify header columns, (scope="col"), and header rows, (scope="row"). A scope attribute indicates whether a header cell is a header for a column or row and is used by screen readers in order to detect the format of the information in the table. Specifying headers is a required item for accessibility. Where is the indexing information for your table at the top of the columns, down the side of the rows, or both?

Data Rows

  • A pair of table row tags, (<tr>) and (</tr>), designate where each row starts and stops.
  • Next is a pair of table head tags, (<th>) and (</th>),which indicate the header for that row. The text of the header goes between the tags.
  • This is followed by pairs of table data tags, (<td>) and (</td>), which indicate each of the table data cells in the row. The text for each data cell goes between the tag pairs.
  • Avoid empty cells. Instead, use a "-" or n/a to indicate that the cell is purposefully empty or not applicable.

Quick Tip: Getting Out of a Table

Have you found yourself unable to add text under a table (or an image)? If so, it's likely that a tag needed for text, such as a paragraph<p>tag, needs to be added to your desired location. Here are three methods for adding <p> tags under a table or an image:

  • When you start a page, add a couple of returns [enter, enter] then arrow up to the top of your page. Each return will produce a blank <p> tag that looks like (<p>&nbsp;</p>) and keeping your work above these blank <p> tags will keep you from getting stuck without a place to type your text.
  • In HTML view, go to the bottom of your table (or desired location) and type (<p>(some desired text that is at least one letter in length)</p>).
  • In HTML view, find and copy/paste or type a blank <p> tag (<p>&nbsp;</p>)into your desired location.

Best Practice: Maintain a Consistent Style and Design

Create a consistent style for your tables and document your styles so that you can easily maintain consistency and professionalism throughout your design. This also saves time in revising and applying styles as you build your course. If desired, you can keep documentation with your course in an unpublished module or an unpublished file. Also consider testing how your table displays on a mobile device by viewing your page in Canvas mobile.

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Specialized Table Designs
Next Article Table Margins and Padding