Examples of tables

Alignment
Basic Table
Borders
captions
cell padding and spacing
Colspan
Headers
multiple Headers
nested tables
Rowspan
table width% and height%
A really complicated table

Basic Table

R1 C1	R1 C2	R1 C3
R2 C1	R2 C2	R2 C3


      <TABLE border>

        <TR>

          <TD>R1 C1</TD>

          <TD>R1 C2</TD>

          <TD>R1 C3</TD>

        </TR>

        <TR>

          <TD>R2 C1</TD>

          <TD>R2 C2</TD>

          <TD>R2 C3</TD>

        </TR>

      </TABLE>

ROWSPAN

R1 C1	R1 C2 spans 2 rows	R1 C3
R2 C1	R1 C2 spans 2 rows	R2 C2


      <TABLE border>

        <TR>

          <TD>R1 C1</TD>

          <TD ROWSPAN=2>R1 C2</TD>

          <TD>R1 C3</TD>

        </TR>

        <TR>

          <TD>R2 C1</TD>

          <TD>R2 C2</TD>

        </TR>

      </TABLE>

COLSPAN

R1 C1	R1 C2	R1 C3
R2 C1 Spans 2 Columns		R2 C2


      <TABLE border>

        <TR>

          <TD>R1 C1</TD>

          <TD>R1 C2</TD>

          <TD>R1 C3</TD>

        </TR>

        <TR>

          <TD COLSPAN=2>R2 C1</TD>

          <TD>R2 C2</TD>

        </TR>

      </TABLE>

Headers

Headers appear to have little purpose but to render in a bold font. You could choose to ignore the TH tag and use your own formatting with a TD tag.

	C1	C2	C3
R1	R1 C1	R1 C2	R1 C3
R2	R2 C1	R2 C2	R2 C3


      <TABLE border>

        <TR>

          <TH></TH>

          <TH>C1</TH>

          <TH>C2</TH>

          <TH>C3</TH>

        </TR>

        <TR>

          <TH>R1</TH>

          <TD>R1 C1</TD>

          <TD>R1 C2</TD>

          <TD>R1 C3</TD>

        </TR>

        <TR>

          <TH>R2</TH>

          <TD>R2 C1</TD>

          <TD>R2 C2</TD>

          <TD>R2 C3</TD>

        </TR>

      </TABLE>

Multiple Headers

As headers are just another form of TD, you can have as many as you like in any part of the table, you can have two rows of TH with COLSPAN to give the appearance of multiple header lines

		C1 and C2		C3
		C1	C2	C3
R1 and R2	R1	R1 C1	R1 C2	R1 C3
R1 and R2	R2	R2 C1	R2 C2	R2 C3


      <TABLE border>

        <TR>

          <TH></TH>

          <TH></TH>

          <TH COLSPAN=2 >C1 and C2</TH>

          <TH>C3</TH>

        </TR>

        <TR>

          <TH></TH>

          <TH></TH>

          <TH>C1</TH>

          <TH>C2</TH>

          <TH>C3</TH>

        </TR>

        <TR>

          <TH>R1 and R2</TH>

          <TH>R1</TH>

          <TD>R1 C1</TD>

          <TD>R1 C2</TD>

          <TD>R1 C3</TD>

        </TR>

        <TR>

          <TH>R2</TH>

          <TD>R2 C1</TD>

          <TD>R2 C2</TD>

          <TH>R2 C3</TH>

        </TR>

      </TABLE>

As you can see things can easily get very messy indeed, its a shame a better way of doing tables wasn't used eg:


	<TABLE>

		R1,C1:R1,C2:R1,C3

		R2,C1:R2,C2:R2,C3

	</TABLE>

Borders

The basic table showed the default borders that are set on a table.

table with a border of 5

R1 C1	R1 C2
R2 C1	R2 C2


      <TABLE border =5>

        <TR>

          <TD>R1 C1</TD>

          <TD>R1 C2</TD>

        </TR>

        <TR>

          <TD>R2 C1</TD>

          <TD>R2 C2</TD>

        </TR>

      </TABLE>

table with no border

R1_C1	R1_C2
R2_C1	R2_C2


      <TABLE border =0>

        <TR>

          <TD>R1_C1</TD>

          <TD>R1_C2</TD>

        </TR>

        <TR>

          <TD>R2_C1</TD>

          <TD>R2_C2</TD>

        </TR>

      </TABLE>

padded cells

padding sets the distance between the contents and the edges of a cell.

R1 C1	R1 C2
R2 C1	R2 C2


      <TABLE CELLPADDING=15 border>

        <TR>

          <TD>R1 C1</TD>

          <TD>R1 C2</TD>

        </TR>

        <TR>

          <TD>R2 C1</TD>

          <TD>R2 C2</TD>

        </TR>

      </TABLE>

spacing sets the distance between adjacent cells (in any direction)

R1 C1 R1 C2

R2 C1 R2 C2

<TABLE CELLSPACING=15 border> <TR> <TD>R1 C1</TD> <TD>R1 C2</TD> </TR> <TR> <TD>R2 C1</TD> <TD>R2 C2</TD> </TR> </TABLE>

You can choose to use CELLSPACING rather than adjust the BORDER width.

ALIGN

The ALIGN and VALIGN parameters can be used in many tags.

ALIGN Horizontal alignment

not-aligned	not-aligned	not-aligned
centre	left	right


      <TABLE border>

	.............

	...........................

        <TR>

          <TD ALIGN=CENTER>centre</TD>

          <TD ALIGN=LEFT>left</TD>

          <TD ALIGN=RIGHT>right;/TD>

        </TR>

      </TABLE>

VALIGN Vertical alignment

not vertically aligned	top
not vertically aligned	middle
not vertically aligned	bottom


      <TABLE border>

        <TR>

	  .............

          <TD VALIGN=TOP>top</TD>

        </TR>

        <TR>

	  .............

          <TD VALIGN=MIDDLE>middle</TD>

        </TR>

        <TR>

	  .............

          <TD VALIGN=BOTTOM>bottom</TD>

        </TR>

      </TABLE>

Using the ALIGN or VALIGN parameter on the TR tag will cause that alignment to become the default for that row. You can override the default alignments by using the ALIGN or VALIGN parameters on each TD.

Captions

Tables can be set captions, these are pieces of text that align centrally with the top or bottom edge of the table

Caption above

**caption above**
R1 C1	R1 C2


      <TABLE border>

        <CAPTION ALIGN=TOP>caption above</CAPTION>

        <TR>

          <TD>R1 C1</TD>

          <TD>R1 C2</TD>

        </TR>

      </TABLE>

Caption below

**caption below**
R1 C1	R1 C2


      <TABLE border>

        <CAPTION ALIGN=BOTTOM>caption below</CAPTION>

        <TR>

          <TD>R1 C1</TD>

          <TD>R1 C2</TD>

        </TR>

      </TABLE>

tables inside tables

Inside every TD tag you can put any valid HTML... this includes tables, graphics, lists

Table 1

table 2

TABLE 3

table 4

I could

go on

relative width and height

This adjusts the height and width of the table in proportion to the width of the browser window.

Width%

`<TABLE WIDTH=100%>`	This table stretches across the whole page
The width of individual cells is proportional to the size of the contents of that cell.

`<TABLE WIDTH=50%>`	This stretches half-way across the whole page
The width of individual cells is proportional to the size of the contents of that cell.

Height%

<TABLE height=50%>

This table is half the height of the page.

The height of each row is
proportional
to the contents of the cells in each row.

A really really complicated example

Check out all the examples above, I havent the heart to do any more.