HTML Tables


HTML Table Basics

HTML tables are controlled with five basic tabs. The <table> tag that encompasses a table, the <tr> tag that creates a row, the <th> and <td> tags that define a header cell and a data cell respectively. In addition, one might want to use the <caption> tag. The following table gives an overview of the most important attributes to the <table> tag:

alignleft, center, right
bgcolorEither an RGB color value or a standard color name
borderThickness of the border in pixels
bordercolor, bordercolorlight,bordercolordarkBrowsers like to draw the border in a 3-d manner, using the latter two values to create shading.
cellspacingGives amount of space drawn around a table in pixels.
cellpaddingAmount of space between cell contents and cell border.
width, heightWidth, height either in pixels or in percent.

The most common layouts for tables are:

The attribute <table width="500"> tells the browser to make the table 500 pixels wide. This type of specification could be a bad idea because the webpage writer does not know the display or the preferred browser window size of the reader. An attribute <table width="80%"> is sometimes disregarded by the browser, but allows the webpage writer some control over the outlay of the webpage.

We make a new row in a table by using the <tr> tag.

Attribute Meaning

default horizontal alignment of table contents: left, right, center, justify,
char (in order to line up numbers on top of char '.', for example:
ALIGN="char" CHAR="." CHAROFF="50%"

bordercolor, bordercolordark, bordercolorlight  
valign vertical alignment: values are: top, bottom, baseline

The individual cells are made with the <th> tag for header and the <td> tag for data cells. The most important attributes to learn are the colspan and rowspan attributes that allow you to build very nifty tables. Since table cell contents can be almost anything in html, including paragraphs and images, you can use a single table as a layout tool for webpages. If the webpage is very complicated, then this is not the best idea, and it does not offer the same type of consistency across a website as frames do, but it is quite simple to code and works well.

Attribute Meaning
align left, right, center, justify
bgcolor see above
bordercolor, bordercolordark, bordercolorlight see above
char, charoff used with alignment on a character
colspan colspan=n means that this cell spans over n columns
height specifies minimum amount of cell height in pixels.
rowspan rowspan=n means that this cell spans over n columns
valign vertical alignment, values are top, bottom, baseline
width width=400 or width=80%

Let's look at a simple example for using colspan and rowspan.

Example 1

<table align="center" width="90%" border=1 cellspacing="4" bgcolor="#99FFFF">
 <tr align="center">
  <th rowspan="2" align="center">Team</th><th colspan=3 align="center">Standings</th>
 <tr align="right">
  <th >Won</th><th>Tied</th><th>Lost</th>
  <td>Borussia Evergreen</td><td align="right">6</td><td align="right">4</td ><td align="right">0</td>
  <td>1FC Santa Clara</td><td align="right">7</td><td align="right">0</td><td align="right">3</td>
  <td>Eintracht Willow Glen</td><td align="right">5</td><td align="right">1</td><td align="right">4</td>

The first cell is one column wide and two rows high. The second cell is three columns wide and one column high. Here is the result

Borussia Evergreen640
1FC Santa Clara703
Eintracht Willow Glen514

And now a more complicated example, where a single cell, in this case the first header cell, contains both colspan and rowspan. As a consequence, it extends over three columns and two rows:

<table width="90%" border="1" cellspacing="1" cellpadding="1">
   <th colspan=3 rowspan=2 align="center">Header</th><th>Second Header</th>

HeaderSecond Header
3,1 3,2 3,3 3,4
4,1 4,2 4,3 4,4
©2007 Thomas Schwarz, S.J., COEN, SCU SCU COEN COEN1 T. Schwarz