Alexander Spiteri's Home Page

HTML
 Tables
 
Examples
 
This page introduces you to 2 very simple examples of what tables can do for you.
We've designed them to help you in further understanding the main table attributes.
Example #1 - Using tables to format tabular data
 

VirtualCo Annual Report
Region Sales* Income
North 10.5 2.2
South 7.5 1.6
* Values in Millions of US Dollars

Here's the HTML code:

<table border=1 cellpadding=3 cellspacing=1>
<caption>VirtualCo Annual Report</caption>
<tr bgcolor="#cccccc">
  <th align="center">
  <font face="Arial" size=2>Region</font>
  </th>
  <th align="center">
  <font face="Arial" size=2>Sales*</font>
  </th>
  <th align="center">
  <font face="Arial" size=2>Income</font>
  </th>
</tr>
<tr>
  <td bgcolor="#cccccc" align="center">
  <font face="Arial" size=2>North</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>10.5</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>2.2</font>
  </td>
</tr>
<tr>
  <td bgcolor="#cccccc" align="center">
  <font face="Arial" size=2>South</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>7.5</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>1.6</font>
  </td>
</tr>
</table>
<small>* Values in Millions of US Dollars</small>

This example shows how HTML do what they were primitively designed to: formatting tabular data in HTML pages.
You should also notice:
  • the use of TH elements to insert row headers;
  • the BGCOLOR attributes in TR and TD;
  • the fact that each cell was formatted with a FONT element. You should always remember to apply to each table the font format. Tables tags, as implemented by today's browsers, block the effect of other character formatting elements outside the table.
Example #2 - ROWSPAN and COLSPAN

Here's an enhancement of the previous report:

 

VirtualCo Annual Report
Region Sales Income
Total* % Total* %
North 10.5 58.3 2.2 57.9
South 7.5 41.6 1.6 42.1
* Values in Millions of US Dollars

Here's the HTML code:

<table border=1 cellpadding=3 cellspacing=1>
<caption>VirtualCo Annual Report</caption>
<tr bgcolor="#cccccc">
  <th rowspan=2 align="center">
  <font face="Arial" size=2>Region</font>
  </th>
  <th colspan=2 align="center">
  <font face="Arial" size=2>Sales</font>
  </th>
  <th colspan=2 align="center">
  <font face="Arial" size=2>Income</font>
  </th>
</tr>
<tr bgcolor="#cccccc">
  <td align="center">
  <font face="Arial" size=2>Total*</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>%</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>Total*</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>%</font>
  </td>
</tr>
<tr>
  <td bgcolor="#cccccc" align="center">
  <font face="Arial" size=2>North</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>10.5</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>58.3</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>2.2</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>57.9</font>
  </td>
</tr>
<tr>
  <td bgcolor="#cccccc" align="center">
  <font face="Arial" size=2>South</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>7.5</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>41.6</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>1.6</font>
  </td>
  <td align="center">
  <font face="Arial" size=2>42.1</font>
  </td>
</tr>
</table>
<small>* Values in Millions of US Dollars</small>

This example illustrates the use of two very useful attributes: ROWSPAN and COLSPAN.
  • ROWSPAN indicates the number of table rows the cell spans.
  • COLSPAN indicates the number of table columns the cell spans.
That's it. We've showed you the most important notions about HTML tables. Off course that there is a lot more to learn but it's better for you to try it for yourself.
That is the best way to learn!
 
Related Topics
 
TR element - TD element - TH element - FONT element
 
Index
 
 

Introduction
Table Sintax
Tricks
Examples

 
Back to Alexander Spiteri's Home