Jump to Main Content

Creating tables

Colspans

Using a colspan in a table does exactly what it says; it allows a cell to span multiple columns. For example, we can do the following:

<head>
<style type="text/css">
<!--
table#animals tr.fourth{
background-color:#963;
font-family:Verdana,  Helvetica, sans-serif;
color:#660000;
font-weight:bold; 
}
</style>
</head>
<body>
…
<tr align="center" class="fourth">
<td  colspan="3">Dogs are awesome!</td>
</tr>
…

Let’s examine the code in greater detail:

  • First, we add a new CSS rule which will format our new fourth row
  • We add an additional row before our closing table tag

Save your file and preview the results.

Colspans

Rowspan

Using a rowspan in a table does exactly what it says; it allows a cell to span multiple rows. For example, we can do the following:

<tr align="center" class="first">
<td>Pet Breed</td>
<td>Pet Name</td>
<td>Pet Age</td>
<td rowspan="4">My  rowspan of 4</td>
</tr>

We add an additional table cell, set rowspan to four and enter appropriate content. Do note, since we have four rows, you need to set rowspan to a value of four.

Rowspan

 Simple table layout

In order to be fair and show you it’s possible to produce a simple layout with a table, open tablelayout.html in your text editor. This table uses CSS to set many properties as indicated below:

  • body
    • Sets default margin, padding, font family and size
  • table#layout
    • Sets default width
    • Sets top and bottom margins to 10 pixels, left and right margins to auto which centers our table
    • Sets a border on our table to a color of black
  • table#header
    • Sets property-values for our header
  • table#layout td#leftcontent
    • Sets width on the left content navigation panel
  • table#layout td#rightcontent
    • Set width on the right content panel
  • table#layout td#footer
    • Sets property-values for our footer

The rest of the CSS should be explanatory, but if you have questions, feel free to contact me.

Summary

In this article we introduced tables. You also learned a little bit about:

  • Creating a table, table row and cell
  • Setting a border, padding and spacing to improve the visual appearance of a table
  • Setting a width and centering our table in the browser
  • Using CSS to apply formatting changes
  • Nesting a table inside an original table
  • Making a cell span multiple columns
  • Making a cell span multiple rows
  • Creating a simple table layout using CSS

Take the knowledge gained here and produce any table of your imagination!

If you have questions, contact me.

top of page