HTMLx

HTMLx

HTMLx2

HTMLx3

HTMLx4

CSSx1

Image Garden

Photo Sandbox

HTMLx

0=∞=1

tables

One column:

100

One row and three columns:

100

200

300

Two rows and three columns:

100	200	300
400	500	600

Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.

table borders

Normal border:

First	Row
Second	Row

Thick border:

First	Row
Second	Row

Very thick border:

First	Row
Second	Row

no borders

100	200
300	400

100	200
300	400

headings

Table headers:

Name	Telephone	Telephone
Bill Gates	555 77 854	555 77 855

Vertical headers:

First Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

empty cells

Some text	Some text
	Some text

As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.

The trick is to insert a no-breaking space in the cell.

No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.

The no-breaking space entity starts with an ampersand ("&"), then the letters "nbsp", and ends with a semicolon (";")

caption

This table has a caption:

My Caption

100	200	300
400	500	600

span more than one row/column

Cell that spans two columns:

Name	Telephone
Bill Gates	555 77 854	555 77 855

Cell that spans two rows:

First Name:	Bill Gates
Telephone:	555 77 854
	555 77 855

tags inside of tables

This is a paragraph This is another paragraph	This cell contains a table: A B C D
This cell contains a list apples bananas pineapples	HELLO

cell padding

Without cellpadding:

First	Row
Second	Row

With cellpadding:

First	Row
Second	Row

cell spacing

Without cellspacing:

First	Row
Second	Row

With cellspacing:

First	Row
Second	Row

background color and image

A background color:

First	Row
Second	Row

A background image:

First	Row
Second	Row

cell color/bckground

Cell backgrounds:

First	Row
Second	Row

align content

Money spent on....	January	February
Clothes	$241.10	$50.20
Make-Up	$30.00	$44.45
Food	$730.40	$650.00
Sum	$1001.50	$744.65

frames

If you see no frames around the tables in these examples, your browser is too old, or does not support it.

With frame="border":

First	Row
Second	Row

With frame="box":

First	Row
Second	Row

With frame="void":

First	Row
Second	Row

With frame="above":

First	Row
Second	Row

With frame="below":

First	Row
Second	Row

With frame="hsides":

First	Row
Second	Row

With frame="vsides":

First	Row
Second	Row

With frame="lhs":

First	Row
Second	Row

With frame="rhs":

First	Row
Second	Row

columns in a table

This example shows a colgroup that has three columns of different widths:

<colgroup span="3"> <col width="20"></col> <col width="50"></col> <col width="80"></col> </colgroup>

1

2

3

4