Creating Tables

Creating fancier tables

Because tables hold data, it's useful to label the columns and/or rows that are holding the information. That way, both the sighted viewer and the non-graphical environment understand better what the table is trying to communicate.

Table 1

We'll use the th (table header) tag to define a set of header cells in a table that contains information about HTML color names. The screenshot in this exercise will show you what your table will look like, so you can see what you're attempting to build. Build your table as follows. It will have 4 columns and 10 rows. Put a border of 1 on this table.

• The top row will have headers for the following information (don't forget the scope attribute):
  • Color Name
  • RGB Value
  • Hexadecimal Value
  • Color Swatch
• Column 1 will have the color names:
  • grey
  • silver
  • blue
  • yellow
  • pink
  • purple
  • orange
  • green
  • black
• Column 2 will have the RGB values of each color
• Column 3 will have the hexadecimal values for each color
• Column 4 will have the character entity for the non-breaking space. You'll use an inline style in that cell to put in the background color that matches color of the row you're on. Screenshot will show you how this looks.
• color info:
  • grey: 128,128,128 (RGB) #808080 (Hex)
  • silver: 192, 192, 192 (RGB) #c0c0c0 (Hex)
  • blue: 0, 0, 255 (RGB) #0000ff (Hex)
  • yellow: 255, 255, 0 (RGB) #ffff00 (Hex)
  • pink: 255, 192, 203 (RGB) #ffc0cb (Hex)
  • purple: 128, 0, 128 (RGB) #800080 (Hex)
  • orange: 255, 165, 0 (RGB) #ffa500 (Hex)
  • green: 0, 128, 0 (RGB) #008000
  • black: 0, 0, 0 (RGB) #000000 (Hex)

When you are putting in the background-color, alternate using the color name, the hexidecimal and rgba(r, g, b, a) syntax for specifying a color. This gives you experience using all three.

The purpose of the non-breaking space is to have some content in the td tags even though all we want to see is the background color, not any text information. You shouldn't ever have empty tags. Compare the following:
<td></td> (empty tag)
<td>&nbsp;</td> (not empty tag).

Why don't we put any data in the final column? Color is only presentational, so there is nothing for the non-graphical environment to "see." You won't need to put character entities in any table other than this one, because any table you make probably has data in each cell. I put this in here as an example of a legitimate use of the non-breaking space character entity.

Table 2

This table will use table headers, rowspan, and background colors to make a visualization of a schedule. See the screenshot and emulate this as closely as you can.

Table 3

This table will have images as some of its table data. The screenshot will help you locate the content in the proper place, and communicate where table headers are being used.

Know Your Viburnums

Guelder Rose
Burkwood
Southern Arrowwood

Completing the table with thead and tbody

Let's go back and add a table header to the tables. Once we add a table header, we'll want to also mark up the table body. The thead and tbody are important for usability and styling; they don't "show up" by default.

Adding caption to the tables

Let's go back and add a caption to the tables. The caption goes at the top of the table, before the thead. You can control where the caption displays with a style. The property is caption-side and the value you want is bottom, if you'd like to swap the caption from the top of the table to the bottom of the table. Move at least one of your captions to the bottom of the table.

Validate your work

The border attribute will cause an error on every table that uses it, but otherwise there should be no errors.