ONE	TWO	THREE
FOUR	FIVE	SIX

Any comments: e-mail me, feedback or show your appreciation

Tables in HTML

This section describes how to create tables within your HTML documents. There are details on the <table>, <tr>, <td> and <th> tags, followed by information on captions, the column elements and adding colour and graphics to tables. For slightly more detailed tag descriptions, see Netscape's Implementation of Tables. For loads more examples and ideas, check out Netscape's page of samples.

<table>
Any table must begin and end with this tag. The basic format for creating a table is as follows:
<table> <tr> <th> <tr> <td> </table>
- border=value
  Including this attribute enables you draw borders around all table cells. You can specify the border thickness in pixels. If this attribute is left out, no borders will appear, however a gap will be left around the cells as if a border was present.
- align=left|center|right
  Used to display the table on the left or right side, or centre of the window.
- cellspacing=value
  This attribute enables you to specify the amount of space, in pixels, inserted between individual cells in a table.
- cellpadding=value
  This attribute enables you to specify the amount of space, in pixels, inserted between the border of the cell and the contents of the cell.
- width=value|percent
  This attribute enables you to describe the desired width of the table, either in pixels or in terms of percentage of the document width.
The most compact table possible would have border, cellspacing and cellpadding all set to zero.
<table border=10 cellpadding=10 cellspacing=10 width=75%> <tr><th>ONE<th>TWO<th>THREE <tr><th>FOUR<th>FIVE<th>SIX </table>

ONE TWO THREE
FOUR FIVE SIX
<tr> table row
This element is required as it tells the browser when to start a new row (see above example).
- align=left|center|right
  Used to justify all text in the row to the left or right side of the cell, or center text within the cell.
- valign=top|middle|bottom|baseline vertical align
  Used to align all text in the row to the top, middle or bottom of the cell, and also to specify that all cells should line up with the same baseline.
<td> table data
Required to tell the browser to start a data cell. It can use all the attributes available to <tr>, to describe a specific data cell's look. To make a blank cell that still has a border, trying placing a non-breaking space in it.
- width=value|percent
  This attribute enables you to describe the desired width of the data cell, either in pixels or in terms of percentage of the table width.
- colspan=value
  Used to specify how many columns a cell should span.
- rowspan=value
  Used to specify how many rows a cell should span.
- nowrap
  Inclusion of this attribute specifies that lines within the cell should not be broken (wrap) to fit the cell width.
Strictly speaking, the contents of a data cell should be closed with a </td> tag. However this is only really necessary when nesting tables (putting a table within a table).
<th> table heading
Required to tell the browser to start a heading cell. Heading and/or data cells may be used. A heading cell is essentially the same as a data cell, <td>, except that the contents are usually displayed bold and centered. It can make use of all the attributes available to <tr> and <td>.
Strictly speaking, the contents of a heading cell should be closed with a </th> tag. However this is only really necessary when nesting tables (putting a table within a table).
<caption>
An element used within the <table> tags (but not within a row) to include a title for your table.
- align=top|bottom|left|right|center
  Used to specify whether your caption appears left, right or centre justified within the boundaries of the table. Alternatively used to specify the caption to appear at the top or bottom of the table. If, for example, you require the caption to be placed at the bottom to the right then you must use the valign attribute to specify the 'bottom' part and align to specify the 'right' part.
- valign=top|bottom
  Used to specify whether your caption appears at the top or bottom of the table when the align attribute is used to specify horizontal positioning.
<center> <table border> <caption align=bottom> Gender Comparison </caption> <tr><td><th rowspan=2><th colspan=2>Average <tr><td><th>Height<th>Weight <tr><th rowspan=2>Gender<th>Males<td>1.9<td>0.003 <tr><th>Females<td>1.7<td>0.002 </table> </center>

Gender Comparison
Average
Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002
<col>
Microsoft Internet Explorer only. Used to specify the text alignment for table columns. In a manner of speaking, this tag works like <tr>. In the same way that you can apply formatting to groups of cells in row by adding attributes to their <tr> element, so you can add formatting to cells in a column by use of the <col> (or <colgroup>) element.
- align=center|justify|left|right
  This sets the text alignment within the column. The default is center.
- span=number
  This sets the number of columns that the align attribute acts upon.
<colgroup>
Microsoft Internet Explorer only. Used to group table columns together in order to align the text in the same way. Similar to the <col> element.
- align=center|justify|left|right
  This sets the text alignment within the column. The default is center.
- valign=baseline|bottom|middle|top
  This sets the vertical text alignment within the column.
- span=number
  This sets the number of columns that the align and valign attributes act upon.
<TABLE BORDER width=75%> <COL ALIGN=left> <COL ALIGN=right> <COLGROUP SPAN=2 ALIGN=center VALIGN=top> <TR> <TH>Head1</TH><TD>Item 1</TD> <TD>Item 2</TD> <TD>Item </TD> </TR> <TR> <TH>Head2</TH><TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD> </TR> <TR> <TH>Head3</TH><TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD> </TR> </TABLE>

Head1 Item 1 Item 2 Item 3

Head2 Item 4 Item 5 Item 6

Head3 Item 7 Item 8 Item 9

Gender Comparison
		Average
	Height	Weight
Gender	Males	1.9	0.003
Females	1.7	0.002

Head1	Item 1	Item 2	Item 3
Head2	Item 4	Item 5	Item 6
Head3	Item 7	Item 8	Item 9

graphics & colours

Sizzling HTML Jalfrezi
©1997 Richard Rutter
`rrutter@woodhill.co.uk`

Maintenance of this page is attempted by Richard Rutter (rrutter@woodhill.co.uk) using the gorgeous HTML Notepad and the wonderful Sizzling HTML Jalfrezi.