How to Create a Simple Table on Your Web Page

Tables let you organize information on your Web page and give it an organized look that your visitors will find useful. When used as intended, tables have rows and columns. For each spot where a row and column intersect, you have a table cell. Each cell can have its own formatting: the data in it can be aligned left, center, or right, formatted, and so on. Tables also have header-data cells, in which you put the column headings. You can create a table in Notepad. Here’s the HTML code for a simple table of this type:

<TABLE BORDER=2>
<TR><TH><B>Production (tons)</B></TH><TH><B>% of goal</B></TH></TR>
<TR><TD><I>>North 40</I></TD><TD>87</TD><TD>102%</TD></TR>
<TR><TD><I>South 40</I></TD><TD>93</TD><TD>110%</TD></TR>
</TABLE>

This is how this simple table looks in HTML and when viewed in Internet Explorer.

A simple Web table and its simple HTML source.
A simple Web table and its simple HTML source.

Here’s what each part of the HTML code does:

  • <TABLE BORDER=2>: The TABLE tag begins and ends the table. The BORDER attribute creates a 2-pixel-wide border around the table. Don’t forget to include a border, so other text and graphics in your Web page don’t crowd too close to the table.

  • <TR>, </TR>: These tags begin and end the table row.

  • <TH>, </TH>: These tags surround table header data. Table header data is automatically formatted as bold and centered.

  • <TD>, </TD>: These tags begin and end the table data item.

So creating a table in HTML is fairly simple but also fairly tedious. You just create the rows and data items; if you get the data items right, the columns take care of themselves.

Getting the data items right can be a problem, though. To make your table look just right, you have to use alignment and formatting options. Making mistakes becomes way too easy, and updating the table’s appearance becomes very hard. That’s why so many people use an HTML editor like CoffeeCup to create and manage tables and then, in some cases, do final tweaking in HTML to get them just right.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.