Tables

About Tables

Another HTML element that is commonly used by departments is the table. When you have tabular data to display, or other information that must be in rows and columns, the <table> tag is where you start.

Unfortunately, the WYSIWYG editor can’t build a table for you, and we don’t recommend copy/pasting a table directly from Word(or other word processors) because test editors often add additional metadata which can cause tables to render strangely.

How to build a table in HTML

Building a table is a little more complicated than lists, but is easy to understand. If you have problems, don’t hesitate to contact your web intern to assist with building tables.

The HTML table is composed of three parts: the table container, <table>; the table rows, <tr>; and the table data <td>, which is each of the cells within the row.

Here’s how we would write the markup (remember to write all HTML in the “text” editor, HTML written in the “visual” editor is rendered as text or sometimes stripped out)


<table>
<tr>
<td>Pet Name</td>
<td>Pet Type</td>
<td>Pet Age</td>
<td>Pet Color</td>
</tr>
<tr>
<td>Yuki</td>
<td>Cat</td>
<td>12</td>
<td>cream/flame-point</td>
</tr>
<tr>
<td>Baby</td>
<td>Cat</td>
<td>2</td>
<td>Black</td>
</tr>
</table>

And here is the rendered table

Pet Name Pet Type Pet Age Pet Color
Yuki Cat 12 cream/flame-point
Baby Cat 2 Black

As you can see, we have three rows of four cells, just like in the code, where we have three sets of <tr>’s and four sets of <td>’s inside each one.

Table Headers

If you look at the table above, it’s hard to tell the difference between column names and the column data. We have special tags we can use to define what the column names are. The simplest way to define a column heading is to use the <th> or table heading tag. Simply replacing the <td>’s in the first row with <th>’s is all you have to do. Below you can see the difference.

Pet Name Pet Type Pet Age Pet Color
Yuki Cat 12 cream/flame-point
Baby Cat 2 Black

You can also build more complicated table structures using the <thead> and <tbody> elements to separate table rows and header rows, but for 90% of tables this much hierarchy is not necessary. If you would like to use them more information can be found here:

Mobile Design & Tables

If you have a big table with many columns, you might be wondering how it will look on a phone. By default, a table will stay as wide as it needs to show all the columns, and the mobile user will have to scroll horizontally to see it all. However, we have special scripts running on our site to format all tables to be mobile friendly.

Tables on our site are converted to a single column in mobile view, and the column name is added to each cell. Here’s a screenshot of what how demo table looks like on mobile. Great right? You don’t have to do anything special to your table. Just make sure that your row of table headings is the first row of your table, and that the heading row has at least as many cells as the other rows(no colspans or missing cells in header row).

mobile-table

A caveat however, is that if you use colspans or rowspans, our scripts may not know what is the correct column heading to add, so you may have unexpected results on mobile.

Using Tables for Non-tabular Data

Lastly, remember how earlier we mentioned that <table>s should only be used for tabular data? Our mobile responsive scripts are part of the reason why. If you try to use tables for design purposes, WEIRD THINGS WILL HAPPEN ON MOBILE. Our script can’t tell the difference between a table made to show information in columns versus a table made because you want one block of text to the right of another block of text (we have better ways of doing that!).

If for some reason, you must have a table for non-tabular data, we do have a special class you can add to your table to tell the script to ignore it. Simply add class=“no-table-header” to your opening <table> tag.

If it’s rendering funny on mobile, check the documentation for our mobile table scripts.