HTML 101

By Scot Hacker, Lisa Pickoff-White
Published May 16, 2007 in Web Development

Tables

Tables can be used to arrange "columnar" data, anywhere you have multiple rows and columns of text. An HTML table is a series of nested tags for identifying rows and cells (columns are implied, never declared). A table cell can contain any type of data – plain text, images, video, etc. Table rows and cells can have independent background colors, which gives you a great deal of formatting potential.

First we have the outer <table> tag, which can take several attributes. Much like the <body> tag, you can give the table a background color using style="background-color:#99ccff" . You can also specify the table's width, using width="number" where the number is a pixel value.

The cellpadding attribute creates space within cells. The cellspacing attribute creates space outside of the border of a cell. You can give a table a visible border using border="number" (set the border attribute to 0 for a borderless table).

Let's see an example of table attributes in action.

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<h1>My First HTML Page</h1>

<p>With cellpadding:</p>

<table border="1" cellpadding="10" style="background-color:#D4EBF4">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>

An example with cellspacing:

<table border="1" cellspacing="10" style="background-color:#D4EBF4">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>

</body>
</html>

Basic tables

In this example, we have a <table> container tag with some attributes. Within the <table> tag, we have two sets of <tr> container tags ("tr" stands for "table row"). And within each <tr> container, we have two sets of <td> containers ("td" stands for "table data," but you should think "cell"). Inside each <td> container we place the content we want to appear in that cell.

Working with more advanced tables can become tricky. For example, you may want the top two cells to be merged into a single wide cell that spans two or more columns. You may want to specify table header rows that appear with a different background color and font size, and so on. While it's important to learn about table tags and what they do, this is definitely an area where graphical HTML tools such as Dreamweaver make life a lot easier (just try moving all of column 13 over to column 16 in a big complicated table when editing HTML by hand!).

To learn more about HTML tables, see the tables section of the W3Schools tutorial.

Note: For years, web developers used tables to create entire Web site layouts. Rather than just putting tabular data into cells, a developer might use one cell to contain the top banner image, another to hold the left navigation sidebar, another to hold the main content, and another the footer. This is a simple solution to basic page layout, but it has many problems, especially as tables become complex and sites grow large. Cascading Style Sheets were introduced to get around these problems, and are now used to lay out most web sites. You might want to start with table-based layout when learning HTML because it's easy. But keep in mind that table-based layouts will almost certainly cause you heartache down the road. If you don't have time to learn CSS layout, consider downloading a pre-fab CSS layout, which you can then modify to suit your needs. Just keep in the back of your mind: "Tables are for displaying columnar data, not page layout!"

Add your comment

Login to post a comment.