html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Intermediate

Lesson 6 - An Introduction To Tables

We need a way to show tabular data on our web pages in neat rows and columns, possibly with headers and footers. We can do this in HTML using the </table> element. This element has several tags associated with it and numerous attributes available to alter the table dynamics. This lesson goes into the basics of table formation and how to use the tags.

The table Tag

The <table> tag and its' closing </table> tag are used to define a table.

The tr Tag

The <tr> tag and its' closing </tr> tag are used to define a table row within a table and must be enclosed within the <table></table> element.

The th Tag

The <th> tag and its' closing </th> tag are used to define heading data within a table row and must be enclosed within the <tr></tr> element.

The td Tag

The <td> tag and its' closing </td> tag are used to define table data within a table row and must be enclosed within the <tr></tr> element.

Let's take a look at some tables and their usage.

Open the file with Notepad we created and tested in Lesson: 5 More About Links

You saved the file to your computer in the C:\_HTMLIntermediate folder as lesson_5_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 - Intermediate HTML Lesson 6 - An Introduction To Tables
</title>
</head>
<!--Tables -->
<body>
<h2>Using Tables</h2>
<h3>Bordered Table</h3>
<table border="2">
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
<h3>Table With Headers, But No Border</h3>
<table>
  <tr>
    <th>Fruit</th>
    <th>Colour</th>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
</body>
</html>

Save the file in the C:\_HTMLIntermediate folder as lesson_6_webpage.html and close the Notepad.

notepad

Viewing Our Changed File

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

notepad

Reviewing Our Changes

The border attribute allows us to specify a width for the table borders and is a numeric value defining the pixel width.

The table header <th> element allows us to enter a heading for each column and the entries will be centered in the column in bold type.

The table data <td> element is where we enter the data for each column of a row in our table.

The table header <th> and table data <td> elements are always nested within a table row <tr></tr> element.

Lesson 6 Complete

Modify the HTML and maybe create your own tables to become confident with table usage.

Related Tutorials

HTML4 Advanced Tutorials - Lesson 5 - A Final Trip To Tablesville

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

What's Next?

Until now we haven't seen how a user can enter information onto the web page. We can do this using the <form> tag and this is the topic of the next tutorial.



More About Links  << Prev          Next >>  Getting To Grips With Forms

HTML4 Reference

The <table> table tag

The <td> table data cell tag

The <th> table header cell tag

The <tr> table row 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>