How to build HTML Tables

by Mike Roam, Chairman of Computer Department, Saint Ann's School, Brooklyn, USA

Tables in HTML are useful when you want to ensure that several columns of writing (or pictures) remain side by side. (Here is a sample of the look, created using a sophisticated 'style' technique.) Just keep in mind that not everybody has the same size screen, and some people prefer (or require) large fonts: therefore, a wide table might not fit on the screens of some of your visitors.

Tables can be thought of as a collection of boxes or "data cells", and the borders can be thick or thin or even invisible. Here's an example:

This is a table,

with two boxes.

Getting Started

To create a HTML table, we have to know just three things:

A "TABLE" is made of ROWS.
ROWS are made of "TD" (table data) cells.
TD's can have anything inside.
(Images, links, text, even other tables.)

Let's look at the basic "tags" used in making a table:

Tag	Function
<table> ... </table>	Surrounds a whole table.
<tr> ... </tr>	Surrounds a whole row within the table.
<td> ... </td>	Surrounds a single cell within the table.

Every single table you construct will consist of the above three tags, no matter the complexity.

The below shows the syntax of the most basic form of table, with only one row and cell:

Code behind the scenes

How it looks in public

<table>
	<tr>
		<td> Shawunga! </td>
	</tr>
</table>

Shawunga!

We began this construction project with the <table> tag. Continuing on, we used the <tr> tag to define a row, and used one <td> tag inside to specify that this row should contain only one cell. All content, such as text ("Shawunga" in the above example) or pictures, is enclosed between <td> tags.

This will get more clear as we actually start to build tables.

More code behind the scenes

How it looks in public

<table border="5">
	<tr>
		<td> I'm box 1 </td>
		<td> I'm box 2 </td>
	</tr>
</table>

I'm box 1

I'm box 2

To continue on with this table madness, lets now create a table with two rows, each with two cells in them (4 cells in total). Take note of how the <tr> and <td> tags are positioned:

Even more code behind the scenes

How it looks in public

<table>
	<tr>
		<td> Cell #1 "What light"</td>
		<td> Cell #2 "through yon-"</td>
	<tr>
		<td> Cell #3 "der win-"</td>
		<td> Cell #4 "dow breaks?"</td>
	</tr>

</table>

Cell #1 "What light"	Cell #2 "through yon-"
Cell #3 "der win-"	Cell #4 "dow breaks?"

Since we want two rows, there are two <tr> tags present. Since we want two cells in each of the rows, there are two <td> tags present in each <tr>. Simple as that!

Table Attributes

Tables, like many tags in HTML, accept various attributes that control appearance. Here are some of the basic table attributes:

Attributes	Function
border="?"	Specifies the thickness of the borderlines of the table, in pixels. [This table has border="1"]
width="?"	Specifies the width of the table, in pixels or %. (Percent is best: what good is specifying pixels unless you know what size of font and screen your visitors all have, including people who like or need large fonts, and (someday) cell phones?) [This table has width="71%"] (Note: tr's and td's aren't allowed to use the "width=..." attribute. See the note for information about how to control column width.) (PS: there used to be a height command but it isn't allowed anymore for tables, tr's nor td's.)
cellpadding="?"	Specifies the distant between the cell and the content inside. [This table has cellpadding="5"] (Note: this can only be used in <table ...>, not in tr's nor td's.)

Here's an example that uses some of the above attributes, (and also a STYLE command):

Code behind the scenes

How it looks in public

<table border="3" width="10%" cellpadding="20" summary="sample">
      <tr>
          <td style="background-color:silver;" > 
              Cell #1 
          </td>
      </tr>
	<tr>
		<td> Cell #2  </td>
	</tr>
</table>

Cell #1

Cell #2

That pretty much covers table-making, which is definitely not rocket science but can still be engaging and fruitful. Here are a few last recommendations:

Make sure your start-table tag <table... includes a summary=".." so that people who can't see are able to tell from the start whether they need to have their computer read the whole table out loud, or whether it is skippable. (This is just part of making sure that your page is accessible to all kinds of visitors.)
Sample:
<table border="3" width="10%" cellpadding="20" summary="list of foreign distributors">
If you want the first row of your table to be a bunch of distinct bold column headings, use "<th>" and "</th>" tags instead of td tags. (The "th" means Table Heading.)
Test your completed pages by changing your browser's window size or font size, and watch whether your tables adjust gracefully or not.
You can use "view source" to see how I built this page, with tables inside of tables.
Don't forget to "validate" your pages by having them checked at validator.w3.org.
Note: immediately following this is the code for a table that explicitly specifies the widths of its columns. The first column will take up 25% of the screen, and the second column will be twice as wide. (Any remaining columns will split the 25% that is left over.

Code behind the scenes

How it looks in public

<table border="3" summary="col width sample">
      <col width="25%" />
      <col width="50%" />
     <tr>
          <td>Cell in column 1 </td>
          <td>Column #2 </td>
          <td>Column #3 </td>
      </tr>
      <tr>
           <td>Second row... </td>
          <td>Looking good </td>
          <td>Feeling sharp </td>
      </tr>
      <tr>
          <td>Extra trick: </td>
          <td colspan="2"> Combining two td's! </td>
      </tr>
</table>

Cell in column 1	Column 2	Column 3
Second row	Looking good	Feeling sharp
Extra trick:	Combining two td's!

page revised by mjr for xhtml, 2 oct 03