Using Tables for Layout

Look at the source code for some of your favorite Web pages and I bet that you'll find they were created using tables. Following are some of my favorite Web pages that use tables to control the page layout:

• www.ibm.com/us/ The columns of search categories are created with tables.

• www.cnn.com/ This site is essentially a three column table.

• www.microsoft.com/ office/ editions/ prodinfo/ default.mspx Microsoft, too, uses tables to design the layout of its Web site.

• www.idolonfox.com/ The Americal Idol Web site demonstrates another creative use of tables in layout.

Tip

Even if you don't plan to place a border around the cells in your table, it's much easier to see how your HTML commands are interpreted by your Web browser when you have the borders turned on (<table border="1">). After you are satisfied that the table is formatted correctly and your content is where you want it to be, you can remove the border attribute, leaving just the <table> tag.

Table 7.2 lists the HTML tags that were discussed in this lesson.

Table 7.2. HTML Tags Used in This Lesson

HTML Tag	Closing	Description of Use
<table>	</table>	Identifies the beginning and ending of a table. All table content must be contained within this tag.
<td>	</td>	Table data cell. Similar to a column.
<th>	</th>	Table heading.
<tr>	</tr>	Table row. Surrounds table cells (<td>) and headings (<th>).

In this lesson, you've learned:

• Tables can control the layout of HTML document elements (such as text, navigation, and images).

• Extra spaces in your HTML documents help you keep track of the table tags. Web browsers ignore any extra spaces.

• The colspan and rowspan attributes merge cells so that you can create complex tables.