NWE Help: Web: Authoring: HTML: Tables

NWE Home :: Help :: Web :: Authoring :: HTML

Tables are the bomb. They can be used to dramatically increase the design flexibility of HTML, which isn't really a layout language at all, but a markup language. This document and the one which follows should help you get a much better sense of design from your hypertext*.

What's here...

The table tags
Getting started
<TH> </TH> -- table header
ALIGN and VALIGN -- alignment
<BORDER="n"> -- table border
<CELLPADDING="n"> -- inside margin of cell
<CELLSPACING="n"> -- spacing between cells
<CAPTION></CAPTION> -- Table caption
The source
Learning more

The table tags

A table is made using three or four basic tags. These are:

<TABLE></TABLE>: Any text between these tags is included within the table. If you omit these tags anything in table row or data tags will NOT be rendered.
<TR></TR>: TR stands for Table Row. These are horizontal divisions. Everything within these tags will be on the same row of the table.
<TD></TD>: TD stands for Table Data, also known as Table Cell. All data fields must be individually contained within a TD tag.
<TH></TH>: TH is Table Header. Any text in these special data cells appears centered and in bold or strong type.

Consider a small bit of data. Using <PRE> and </PRE> tags to format the data, it looks like:

      Monday       3
      Tuesday      2
      Wednesday    0

Using a table, the data can look like this:

Monday	3
Tuesday	2
Wednesday	0

Here is the HTML used to make that table. You don't need to format your table with indents and extra spaces. However, the readability of the table is improved with the extra spacing. It's a lot easier to proofread your code when it's in nice columns.

  <table>
      <tr>
          <td> Monday    </td>
          <td> 3         </td>
      </tr>
      <tr>
          <td> Tuesday   </td>
          <td> 2         </td>
      </tr>
      <tr>
          <td> Wednesday </td>
          <td> 0         </td>
      </tr>
  </table>

Getting started

Generally speaking, this is a good way to make tables:

Draw out the table by hand. Then mark the rows and cells.
Write up the table in your text editor. Make sure to use a BORDER=2 attribute (see below) so you can see the table's edges.
Preview your HTML and tweak the table as needed.
When you're done making adjustments, turn off the BORDER if you want, and you're done.

You can also add the attribute BORDER="n" to the <TABLE> tag. When used, this will give the table a border around each cell, so the above table would now look as follows, if started with <TABLE BORDER="1">

Monday	3
Tuesday	2
Wednesday	0

Now it looks more like a table. There are a number of attributes or tags which can be added to a table to change its appearance; we'll go over them one by one. The HTML code for the tables will be displayed at the end of the page.

<TH> </TH> -- table header

TH stands for Table Header. Header cells are identical to data cells, but the text in them is shown in bold type, and the data is centered. Adding headers to the table used in the above example makes it look as follows:

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

Like any table cell, the alignment of table headers can be changed from centering by adding an ALIGN attribute.

ALIGN and VALIGN

You can control the horizontal and vertical alignment of the contents of your table. ALIGN and VALIGN attributes can be added to <TABLE>, <TR>, <TH>, and <TD>. The table below contains examples.

The ALIGN attribute controls horizontal alignment. Possible values are "left", "center" and "right". Left is the default.

The VALIGN attribute is similar. Possible values are top, middle, or bottom. Middle is the default.

ALIGN="left"
VALIGN="top"

ALIGN="center"
VALIGN="middle"

ALIGN="right"
VALIGN="bottom"

<BORDER="n"> -- table border

We have already seen that by adding the BORDER attribute to the TABLE tag we can add a border to each cell. Setting a different value for BORDER will change the width of the border around the edge of the entire table.

Border=2

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

Border = 5

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

Border = 10

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

<CELLPADDING="n"> -- inside margin of cell

This attribute is also set within the <TABLE> tag, and used to define the amount of space between the border of the cell and the cell contents.

CELLPADDING=0

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

CELLPADDING=5

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

CELLPADDING=10

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

<CELLSPACING="n"> -- spacing between cells

Like CELLPADDING, this attribute is also used within the <TABLE> tag. It defines the amount of space between the individual cells in a table.

CELLSPACING=0

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

CELLSPACING=5

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

CELLSPACING=10

Day	Hours
Monday	3
Tuesday	2
Wednesday	0

<CAPTION></CAPTION> -- Table caption

A CAPTION tag defines a caption for the table which will appear above the table (by default). This tag should be used within the TABLE, but NOT within the rows or cells.

Number of hours worked
Day	Hours
Monday	3
Tuesday	2
Wednesday	0

The attribute ALIGN="top" or ALIGN="bottom" can be added within a CAPTION tag to define where the caption should appear.

The source

Here's the table and HTML source for the table with a border, cellpadding, cellspacing, headers, and a caption:

Number of hours worked
Day	Hours
Monday	3
Tuesday	2
Wednesday	0

<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="3">
	<CAPTION>Number of hours worked</CAPTION>
	<TR>
		<TH>Day    </TH>
		<TH>Hours  </TH>
	</TR>
	<TR>
		<TD>Monday  </TD>
		<TD>3       </TD>
	</TR> 
	<TR>
		<TD>Tuesday  </TD>
		<TD>2        </TD>
	</TR>
	<TR>
		<TD>Wednesday  </TD>
		<TD>0          </TD>
	</TR>
</TABLE>

Learning more

This is just a start. There's Yet Another Document on advanced tables available close by. Take a look.

* The HTML code on this page is represented in Blue to make it easier to read.

Back: Color
Next: Advanced Tables