HTML - Advanced Tables

In the previous lesson, you learned how to create tables. In this lesson, we will expand that knowledge futher to include more advanced techniques with the attributes of the table cell, <td></td>. Namely, rowspan="" and colspan="". Rowspan refers to a cell "spanning" across multiple rows. Colspan refers to a cell "spanning" across multiple columns. These attributes are difficult to implement because they change the very structure of the table they pertain to. Let's take a look:

<table border="1">
 <tr>
  <td width="150">Normal Cell</td>
  <td width="150">Normal Cell</td>
  <td rowspan="3" width="150">Cell with rowspan="3"</td>
 </tr>
 <tr>
  <td width="150">Normal Cell</td>
  <td width="150">Normal Cell</td>
 </tr>
 <tr>
  <td colspan="2" width="300">Cell with colspan="2"</td>
 </tr>
</table>

This would display as:

Normal Cell Normal Cell Cell with rowspan="3" Normal Cell Normal Cell Cell with colspan="2"

This is a table with 3 rows and 3 columns with equal width, but notice that in the above code, there aren't 3 <td></td> sets for every row. This is because when you use a colspan="" or rowspan="" you do not put a <td></td> where another cell is set to span over that area. This is extremely important. So, make sure you have the right number of cells when you are creating tables of your own. Also, to keep the cells all the right width, you have to change the value of the width="" attribute (if specified) in every <td></td> that has a colspan="". Likewise, the height="" attribute (if specified) would need to change for a rowspan="". Try this out before you move on.

Practice

Now that you know how to do some advanced tables, why not put those skills to practical use? Using advanced tables with the bgcolor="" attribute, you can control the layout of an entire Web page. bgcolor="" stands for background color, you can use it to change the color of table cells within your page. Some of the possible values are: Black, Silver, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal and Aqua. Here's an example of a colored table:

<table border="1">
 <tr>
  <td width="100" bgcolor="maroon">Maroon</td>
  <td width="100" bgcolor="red">Red</td>
  <td width="100" bgcolor="purple">Purple</td>
 </tr>
 <tr>
  <td width="100" bgcolor="green">Green</td>
  <td width="100" bgcolor="blue">Blue</td>
  <td width="100" bgcolor="navy">Navy</td>
 </tr>
 <tr>
  <td width="100" bgcolor="yellow">Yellow</td>
  <td width="100" bgcolor="aqua">Aqua</td>
  <td width="100" bgcolor="silver">Silver</td>
 </tr>
</table>

Here's what it displays as:

Maroon Red Purple Green Blue Navy Yellow Aqua Silver

Now let's try to control the layout of a Web page. First, set border="0", width="100%", cellspacing="0" and cellpadding="0". Remember, you can also place images in the table instead of just coloring the table cells.

<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
  <td colspan="4" bgcolor="blue"><h2 align="center">My Web Page</h2></td>
 </tr>
 <tr height="20">
  <td rowspan="4" bgcolor="blue" width="20"></td>
  <td rowspan="4"></td>
  <td></td>
 </tr>
 <tr height="20">
  <td bgcolor="silver" align="right">John Smith, (555) 555-5555</td>
 </tr>
 <tr height="20">
  <td></td>
 </tr>
 <tr height="50" valign="top">
  <td>This is my content area.</td>
 </tr>
</table>

The is a special character called a non-breaking space, you must use it in table cells that you don't put any content in. The page would display as:

My Web Page       John Smith, (555) 555-5555   This is my content area.

This code will take some tweaking to get it to work for your own page, but using a table to lay out your page can be extremely useful. This is quite an advanced technique, so feel free to spend some time practicing it.

More Practice

Try out Forms next.

Introduction | Basic Formatting | Images | Linking
Additional Formatting | Lists/Bullets | Basic Tables
Advanced Tables | Forms | HTML Cheat Sheet