Simple Tables

Introducing Tables

• Tables are intended to be used for holding tabular information (data in rows and columns), but have also been misused for layout purposes since they were introduced.
• The first set of tags are: <table></table>
• Tables are organized primarily by rows (<tr></tr>).
• Within each row is a cell or cells containing data:
  • <th></th> are header cells
  • <td></td> are data cells
• There are usually multiple sets of <th></th> or <td></td> tags, one set for each cell in the table.
• The <table>, <tr>, <th>, and <td> tags are all blocks (meaning that when nesting these tags, they should not be inside inline tags, such as <span>, <strong>, etc.).
• A simple table (one row, two cells) is coded as:

  <table border="1">
    <tr>
      <td>50</td>
      <td>75</td>
    </tr>
  </table>
  

• This table renders as:

  50

  75

• Increasing the complexity a bit (two rows, three cells):

  <table border="1">
    <tr>
      <td>50</td>
      <td>75</td>
      <td>60</td>
    </tr>
    <tr>
      <td>40</td>
      <td>60</td>
      <td>15<br />25</td>
    </tr>
  </table>
  

• This more complex table renders as:

  50	75	60
  40	60	15 25

• Note the symmetry of the table:
  • Cells in the same column share the same width
  • Cells in the same row share the same height

The <table> Tag

<table> Attributes Not in Specification:

Browsers still render these but they will not validate. I recommend against using them but you may encounter them in legacy code:

• background - This is specified as background="imagename.gif" (or imagename.jpg / imagename.png). Generally inserting a background image in a table is a bad idea; the results can be less than attractive, depending on the size of the image, the size of the table, and the browser used.
• height - Do not specify this attribute in the <table> tag. It is better to allow the content in the cells to determine the table height naturally.

The <tr> Tag

The <th> and <td> Tags

<th> and <td> Attribute Not in Specification:

Browsers still render this but it will not validate. I recommend against using this but you may encounter the attribute in legacy code:

• background - This attribute specifies an image that will fill in the cell area. If the cell dimensions are larger than the image, the image will repeat horizontally and/or vertically (referred to as tiling). Specify background="imagename.gif" (or imagename.jpg / imagename.png).

Colors in HTML5

• Colors are often expressed in amounts of red, green, and blue (RGB). Other approaches to colors, such as CMY(K), are used in print and are not generally used for websites (although CSS3 changes this).
• For HTML5 these RGB combinations are expressed as hexadecimals, which are six-character values. These range from #ffffff (white) to #000000 (black; that is 6 zeros).
  • Be sure to specify the # sign or some browsers will not display the color.
• There are also predefined color names that can be used. Over time the predefined names have expanded, but originally just sixteen were supported (if you specify a predefined name other than one of these sixteen, be sure to test cross-browser and cross-platform to determine support). The original names:
  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • purple
  • red
  • silver
  • teal
  • white
  • yellow

Table Examples

Table Example 1: Rows Rules and Banded Backgrounds

See the Pen Simple Table Example 1 by Jason Withrow (@jwithrow) on CodePen.

Table Example 2: Outer Border Appearance, Cell Heights, and Percentage-Based Cell Widths

See the Pen Simple Table Example 2 by Jason Withrow (@jwithrow) on CodePen.

Table Example 3: Fluid (Percentage-Based) Table and Cell Widths

See the Pen Simple Table Example 3 by Jason Withrow (@jwithrow) on CodePen.

Table Example 4: Dangers of Mixing 100% Width Cells and Fixed Width Cells

See the Pen Simple Table Example 4 by Jason Withrow (@jwithrow) on CodePen.

Note how the 100% width cell smashes the other cells up against the edge of the table - this is a problematic approach because the 100% width does not respect the fixed width cells. The default rendering algorithm for tables allows that cell to consume as much of the width as it can.