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.
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.
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.
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.
The <table> table tag
The <td> table data cell tag
The <th> table header cell tag
The <tr> table row tag