An Introduction To TablesS2C Home « 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 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.

save table

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.

table

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 - Advanced Tables

CSS 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.

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