A Table Sampler

The basics.

The Basic Table
Spanning rows and columns
Headers
Borders
Cell padding and spacing
Alignment
Captions
Relative table width %

Extended examples.

Multiple Headers
More Header Examples
Nested tables
A really complicated example

There are more elements, like summary, table direction, headers and footers, and column groups, in the W3C HTML 4.01 Chapter 11 on Tables. Help auditory web users by creating accessible tables. You may also find my HTML Quik Reference or special HTML characters reference useful.

Basic Table

<table> ... </table> is a table. Each row is bracketed by <tr> and </tr> (for Table Row), and cells are bracketed by <td> and </td> (for Table Data).

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>

Spanning Rows and Columns

Cells can span, or cross, many rows and columns.

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>

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>

Headers

Headers might appear to have little purpose but to render in a bold font. You could use your own formatting with a td tag, but header tags guide audio browsers for the blind and other "smart" aids.

	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 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 rowspan="2">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>

More Header Examples

Head1 Head2 Head3

A B C

D E F

Head1 Head2

A B C D

E F G H

Head1 Head2

Head 3 Head 4 Head 5 Head 6

A B C D

E F G H

Head1 Item 1 Item 2

Item 3 Item 4

Head2 Item 5 Item 6 Item 7 Item 8

Average

Height Weight

Gender Male 1.9 0.003

Female 1.7 0.002

Borders

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

table with a border of 10 pixels

R1 C1	R1 C2
R2 C1	R2 C2

      <table border="10">
        <tr>
          <td>R1 C1</td>
          <td>R1 C2</td>
        </tr>
        <tr>
          <td>R2 C1</td>
          <td>R2 C2</td>
        </tr>
      </table>

same table with no border (<table border="0"> has the same effect)

R1_C1	R1_C2
R2_C1	R2_C2

      <table>
        <tr>
          <td>R1_C1</td>
          <td>R1_C2</td>
        </tr>
        <tr>
          <td>R2_C1</td>
          <td>R2_C2</td>
        </tr>
      </table>

without borders, tables can be confusing

A		1	2
A		3	4
C	D		E
F	G	H	E

      <table>
	<tr> <td align="center" rowspan="2" colspan="2">A</td>
	     <td>1</td>
	     <td>2</td>
	</tr>
	<tr>
	     <td>3</td>
	     <td>4</td>
	</tr>
	<tr> <td align="center">C</td>
	     <td align="center" colspan="2">D</td>
	     <td align="center" rowspan="2">E</td>
	</tr>
	<tr> <td align="center">F</td>
	     <td align="center">G</td>
	     <td align="center">H</td>
	</tr>
      </table>

Cell Padding and Spacing

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>

What's the difference? Both padding and spacing N put a margin of N on all sides. However, padding N puts 2N between cells, while spacing N puts N between cells.

Lined up →

R1 C1	R1 C2
R2 C1	R2 C2

R1 C1	R1 C2
R2 C1	R2 C2

R1 C1	R1 C2
R2 C1	R2 C2

←

padding=20, spacing=0

padding=10, spacing=10

padding=0, spacing=20

Padding, spacing, and border 15 pixels

R1 C1 R1 C2

R2 C1 R2 C2

<table cellspacing="15" cellpadding="15" border="15"> <tr> <td>R1 C1</td> <td>R1 C2</td> </tr> <tr> <td>R2 C1</td> <td>R2 C2</td> </tr> </table>

Align

The align and valign (vertical alignment) attributes line up the stuff in cells.

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>

Use align or valign in tr to makes it the default for the whole row. Override the default with align or valign in each td.

January	February	March
row default is center	Override row default with left	align right
row default is bottom	valign top	middle aligned

      <table border>
	<tr>
	  <th>January</th>
	  <th>February</th>
	  <th>March</th>
	</tr>
	<tr align="CENTER">
	  <td>row<br />default is<br />center</td>
	  <td align="LEFT">Override<br />row...</td>
	  <td align="RIGHT">align<br />right</td>
	</tr>
	<tr valign="BOTTOM">
	  <td>row<br />default is<br />bottom</td>
	  <td valign="TOP">valign top</td>
	  <td valign="MIDDLE">middle aligned</td>
	</tr>
      </table>

Captions

Tables can have captions, which are pieces of text that align with the middle of the table.

The Caption
R1 C1 R1 C2 R1 C3

<table border> <caption>The Caption</caption> <tr> <td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td> </tr> </table>

Relative width

Adjust the 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 a

The width of individual cells is proportional to the size of the contents of that cell. bc

Nested tables

Inside every td tag you can put any valid HTML, including tables, graphics, lists, etc.

Table 1

Table 1, row 1 column 2

Table 1

table 2 r1

table 3

table 3, column 3

table 3

table 4, row 1

table 4

I could

go on

table 4

table 2 c3

table 2 r2

table 2, row 2 column 2

table 2 r2

Table 1

Nested tables are great for displaying tensor products.

0.8	-0.4i
+0.4i	0.2

⊗

0.999702	0
0	0.000298

0.8 ×

0.999702	0
0	0.000298

-0.4i ×

0.999702	0
0	0.000298

+0.4i ×

0.999702	0
0	0.000298

0.2 ×

0.999702	0
0	0.000298

A really complicated example

I Believe This

U
S
A

raindrops on roses
whiskers on kittens
bright copper kettles
warm woolen mittens

My
Erdos
Number

Nested Table
A	B
C	D

<table border>
  <caption>I Believe This</caption>
  <tr>
    <td rowspan="2" align="CENTER">
	<font color="RED">U</font><br />
	<font color="GRAY">S</font><br />
	<font color="BLUE">A</font>
    </td>
    <td>
      <ol> 
           <li>raindrops on roses</li>
           <li>whiskers on kittens</li>
           <li>bright copper kettles</li>
           <li>warm woolen mittens</li>
      </ol>
    </td>
    <td bgcolor="#000000"><img src="Images/orange-ball.gif"></td>
    <td align="CENTER">
	<A href="erdos.html">My<br />Erdos ...
    </td>
  </tr>
  <tr>
    <td bgcolor="#00FF00">6</td>
    <td align="CENTER" colspan="2">&Omega;
	<table border="20">
	    <tr>
		<th colspan="2">Nested ... </th>
	    <tr> 
		<td>A</td>
		<td align="RIGHT">B</td>
	    </tr>
	    <tr>
		<td>C</td>
		<td>D</td>
	    </tr>
	</table>
    </td>
  </tr>
  <tr>
	<td>8</td>
	<td colspan="2" align="CENTER">9</td>
	<td bgcolor="#FF8000">10</td>
  </tr>
</table>

Some examples from the Netscape Tutorial on Table Sampling. Visit Anne's World Web Page Resources for guides, examples, references, tools, etc.

Updated Tue Dec 31 10:23:01 2013

by Paul Black (paul.black@nist.gov)

This page's URL is http://hissa.nist.gov/~black/tableQuikRef.html

`<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	a
The width of individual cells is proportional to the size of the contents of that cell.		bc