The HTML Table

Guest Author - Diane Cipollo

The HTML table was originally added to the HTML language to allow for the formatting of columns and rows of information such as you see in a spreadsheet or account ledger. However, it wasn't long before web designers discovered another use for the HTML table. These web designers began using HTML tables to control the layout and design of a webpage.

shadowbox

You can think of an HTML table like a curio cabinet hanging on the wall which has rows of boxes to put little collectibles into. But instead of little collectibles, you will put parts of your webpage into each square. In this way you can force the placement of text and images as you design your page to be pleasing and easy to read.A table is created with a combination of three HTML tags working together. Let's start out with a simple table. It will have 3 rows and 1 box in each row. Here is the basic code.

The opening <table> and closing </table> table tags establish the outside wall of the table. (Brown colored square)

Next the three sets of opening <tr> and closing </tr> table row tags establish the walls for the three rows inside the table walls. (Red colored squares)

Finally the opening <td> and closing </td> table cell tags establish the walls for the box (called a cell) within each row. (Green colored squares)

Now that we have created the table you will want to have more control over this table besides just the walls. We need to discuss the attribute/value pairs for each of these 3 HTML tags. You will use these attribute/value pairs to control more features of the table. We cannot cover all of the attribute/value pairs in this HTML Basics tutorial, but we will discuss the ones used most often.

Next →

|