| Index A-Z | Apply Now | From the Chancellor | Visitors | Alumni | People Finder | For the Media | For Parents | Jobs |

| SalukiNet | Intranet | Athletics | Public Events Calendar | Weather | Search SIUC

A Table Sampler

Printable Version

This is an introductory tutorial for HTML tables. It's intended to teach by example. Throughout the document you will see first the actual formatted table and then the HTML tags and the text that formatted it.

A BASIC 3X2 TABLE

A	B	C
D	E	F

<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

TWO DEMONSTRATIONS OF ROWSPAN

Item 1	Item 2	Item 3
Item 4		Item 5

<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

Item 1	Item 2	Item 3	Item 4
	Item 5	Item 6	Item 7

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>

DEMONSTRATION OF COLSPAN

Item 1	Item 2
Item 3	Item 4	Item 5

<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

DEMONSTRATION OF HEADERS,

Head1	Head2	Head3
A	B	C
D	E	F

<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

DEMONSTRATION OF COLSPAN AND HEADERS

Head1		Head2
A	B	C	D
E	F	G	H

<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

DEMONSTRATION OF MULTIPLE HEADERS, COLSPAN

Head1		Head2
Head 3	Head 4	Head 5	Head 6
A	B	C	D
E	F	G	H

<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

DEMONSTRATION OF SIDE HEADERS

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

<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</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>

DEMONSTRATION OF SIDE HEADERS, ROWSPAN

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

<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
</TR>
</TABLE>

SAMPLE TABLE USING ALL OF THESE

		Average

<TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Average</TH></TD>
</TR>
<TR> <TD><TH>Height</TH><TH>Weight</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Gender</TH>
<TH>Males</TH><TD>1.9</TD><TD>0.003</TD>
</TR>
<TR> <TH>Females</TH><TD>1.7</TD><TD>0.002</TD>
</TR>
</TABLE>

CLEVER USES OF ROWSPAN/COLSPAN

A	1	2
	3	4
C	D

<TABLE BORDER>
<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 ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>

ADJUSTING MARGINS AND BORDERS

A TABLE WITHOUT BORDERS

Item 1	Item 2	Item 3
Item 4		Item 5

<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

A TABLE WITH A BORDER OF 10

Item 1	Item 2
Item 3	Item 4

<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>

CELLPADDING AND CELLSPACING

A	B	C
D	E	F

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

A	B	C
D	E	F

<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

A	B	C
D	E	F

<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

A	B	C
D	E	F

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

ALIGNMENT, CAPTIONS, AND SUBTABLES

DEMONSTRATION OF MULTIPLE LINES IN A TABLE

January	February	March
This is cell 1	Cell 2	Another cell, cell 3
Cell 4	and now this is cell 5	Cell 6

<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>and now this<br>is cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

ALIGN=LEFT|RIGHT|CENTER - can be applied to individual cells or whole ROWs

January	February	March
all aligned center	Cell 2	Another cell, cell 3
aligned right	aligned to center	default, aligned left

<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR ALIGN=center>
<TD>all aligned center</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD ALIGN=right>aligned right</TD>
<TD ALIGN=center>aligned to center</TD>
<TD>default,<br>aligned left</TD>
</TR>
</TABLE>

VALIGN=TOP|BOTTOM|MIDDLE - can be applied to individual cells or whole ROWs

January	February	March
all aligned to top	and now this is cell 2	Cell 3
aligned to the top	aligned to the bottom	default alignment, center

<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR VALIGN=top>
<TD>all aligned to top</TD>
<TD>and now this<br>is cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD VALIGN=top>aligned to the top</TD>
<TD VALIGN=bottom>aligned to the bottom</TD>
<TD>default alignment,<br>center</TD>
</TR>
</TABLE>

CAPTION=TOP|BOTTOM

A top CAPTION

January	February	March
This is cell 1	Cell 2	Another cell, cell 3

<TABLE BORDER>
<CAPTION ALIGN=top>A top CAPTION</CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>

A bottom CAPTION

January	February	March
This is cell 1	Cell 2	Another cell, cell 3

<TABLE BORDER>
<CAPTION ALIGN=bottom>A bottom CAPTION</CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>

NESTED TABLES: TABLE ABCD IS INSIDE TABLE 123456

1	2	3 A B C D
4	5	6

<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>

TABLE WIDTHS

BASIC 50% WIDTH

Width=50%	Width=50%
3	4

<TABLE BORDER WIDTH="50%">
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>

Item width affects cell size	2
3	4

<TABLE BORDER WIDTH="50%">
<TR><TD>Item width affects cell size</TD><TD>2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>

WIDTH=100%	This is item 2
3	4

<TABLE BORDER WIDTH="100%">
<TR><TD>WIDTH=100%</TD><TD>This is item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>

CENTERING A TABLE ON A PAGE

A	B	C
D	E	F

< CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>

TABLE WIDTH AND NESTED TABLES

Item 1	Item 2
Item A Item B	Item 4

<TABLE BORDER WIDTH="50%">
<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>