html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Advanced

Lesson 5 - A Final Trip to Tablesville

In lesson 6 of the HTML4 Intermediate Tutorials we started learning about tables, to make our tabular data look neat and tidy. We used table header and data information within table rows for basic table formation. In this lesson we revisit tables and look at the HTML tags associated with tables we haven't used so far.

The caption Tag

The <caption> tag and its' closing </caption> tag are used within the <table> </table> element to define a table caption and must be placed after the opening <table> tag.

The col Tag

The <col /> tag is a self closing tag used within the <colgroup> </colgroup> or <table> </table> elements, to define attributes for one or more columns.

The colgroup Tag

The <colgroup> tag and its' closing </colgroup> tag are used within the <table> </table> element to group columns together.

The thead Tag

The <thead> tag and its' closing </thead> tag are used within the <table> </table> element to group the header content of the table together. The <thead> </thead> element should precede the <tfoot> </tfoot> and <tbody> </tbody> elements.

The tfoot Tag

The <tfoot> tag and its' closing </tfoot> tag are used within the <table> </table> element to group the footer content of the table together. The <tfoot> </tfoot> element should follow the <thead> </thead> element and precede the <tbody> </tbody> elements.

The tbody Tag

The <tbody> tag and its' closing </tbody> tag are used within the <table> </table> element to group the body content of the table together. The <tbody> </tbody> element should follow the <thead> </thead> and <tfoot> </tfoot> elements.

Columns and Captions

There's a lot of tags here to learn, so lets take a look at the captions and columns tags first.

Open the file with Notepad we created and tested in Lesson: 4 Embedded Objects

You saved the file to your computer in the C:\_HTMLAdvanced folder as lesson_4_webpage.html

Copy and paste the following code into the reopened file, overwriting the existing contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML Tutorials - Advanced HTML Lesson 5 - A Final Trip to Tablesville
</title>
</head>
<body>
<!--Tables -->
<h2>Advanced Tables</h2>
<h3>Table Using Caption and Column Group Tags</h3>
<table border="1">
  <caption>Caption Names A Table</caption>
  <colgroup span="2" width="200"></colgroup>
  <colgroup  width="75"></colgroup>
  <tr>
    <th>Fruit</th>
    <th>Colour</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
    <td>50</td>
  </tr>
</table>
<h3>Table Using The Table Column Tag</h3>
<table border="2">
  <col width="250" />
  <col width="150" />
  <col width="75" />
  <tr>
    <th>Fruit</th>
    <th>Colour</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
    <td>50</td>
  </tr>
</table>
</body>
</html>

Save the file in the C:\_HTMLAdvanced folder as lesson_5_webpage.html and close the Notepad.

notepad

Viewing Our Changed File

From the C:\_HTMLAdvanced folder, double click on the saved file and it will appear in your default web browser something like the following image.

notepad

Reviewing Our Changes

The textual contents<caption> element precedes the table and gives the table a title. The <caption> </caption> element should always immediately follow the opening <table> tag.

The <colgroup> tag identifies a group of columns to apply changes to. In our example we are applying a width of 200 pixels to the first two columns using the <width> and <span> attributes. We then apply a width of 75 pixels to the third column using the <width> attribute.

The <col /> tag identifies a column to apply changes to. In our example we apply different widths to each column using the <width> attribute.

Table Header, Footer and Body Tags

Reopen file lesson_5_webpage.html from the C:\_HTMLAdvanced folder with Notepad. Copy and paste the following code into the reopened file, overwriting the existing contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML Tutorials - Advanced HTML Lesson 5 - A Final Trip to Tablesville
</title>
</head>
<body>
<!--Tables -->
<h2>Advanced Tables</h2>
<h3>Using Table Header, Footer and Body Tags</h3>
<table border="2">
  <thead style="color:red;">
    <tr>
      <th>Fruit</th>
      <th>Colour</th>
    </tr>
  </thead>
  <tfoot style="color:green;">
    <tr>
      <td>Salad</td>
      <td>Rainbow</td>
    </tr>
  </tfoot>
  <tbody style="color:blue;">
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Pea</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Save the file in the C:\_HTMLAdvanced folder as lesson_5_webpage.html and close the Notepad.

notepad

Viewing Our Changed File

From the C:\_HTMLAdvanced folder, double click on the saved file and it will appear in your default web browser similar to the following screenshots:

Internet Explorer

notepad

Firefox and Opera

notepad

Chrome and Safari

notepad

Well as you can see the table renders differently in most major browsers and although the browsers are more similar than they used to be this is one of those things you have to get used to as a web developer. In the CSS Tutorials we cover ways to mimimize changes between browsers but now seemed a good time as we near those lessons to mention the disparity in browsers. As you can see IE puts no edging around the cell, Firefox and Opera edge the cells with the style colours we used. Chrome and Safari just edge the cells with a default colour.

Reviewing Our Changes

So the <thead></thead>, <tfoot></tfoot> and <tbody></tbody> elements allow us to apply different values to the table cells dependant upon which tag they are enclosed in.

What isn't apparent is that these tags are also useful when printing tables. A header and footer will appear on each page which is a very useful feature when printing off long tables.

Lesson 5 Complete

Edit the HTML to repeat the table rows within the <tbody></tbody> element until your table spans a printable page, to see the printed header/footer feature at work. Also mess around with the tags from this lesson to get really competent with table content.

Related Tutorials

HTML4 Intermediate Tutorials - Lesson 6 - An Introduction To Tables

CSS 1/2 Advanced Tutorials - Lesson 4 - Styling Tables

What's Next?

In the next lesson we take a final look at forms and their more advanced features.



Embedded Objects  << Prev          Next >>  Advanced Forms

HTML4 Reference

The <caption> table caption tag

The <col /> table column tag

The <colgroup> table column group tag

The <thead> table header tag

The <tfoot> table footer tag

The <tbody> table body tag

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>