CS03 | Beginning Web Design

DEMO: Tables Basics

Table Tutorial Quick Reference

<TABLE> Table Elements

BORDER Sets the border size. <table border="0">

CELLPADDING Pixels between the cell data and cell wall. <table cellpadding="5">

CELLSPACING Pixels between cells. <table cellspacing="3">

WIDTH Width of overall Table in pixels or percent. <table width="90%">

HEIGHT Height of overall Table in pixels or percent. <table height="100">

ALIGN Aligns the Table to the LEFT, RIGHT, or CENTER. <table align="center">

BGCOLOR Specifies the background color of the Table. <table bgcolor="#808080">

<TR> Table Row Elements

ALIGN Aligns the Row to the LEFT, RIGHT, or CENTER. <tr align="right">

VALIGN Vertically aligns the Row to the TOP, BOTTOM, BASELINE, or CENTER. <tr valign="top">

BGCOLOR Specifies the background color of the Table. <tr bgcolor="black">

<TD> Table Cell Elements

ALIGN Aligns the Cell to the LEFT, RIGHT, or CENTER. <td align="center">

VALIGN Vertically aligns the Cell to the TOP, BOTTOM, BASELINE, or CENTER. <td valign="bottom">

WIDTH Width of the Cell in pixels or percent. <td width="25%">

HEIGHT Height of the Cell in pixels or percent. <td height="40">

NOWRAP Doesn't wrap the contents of the Cell. <td nowrap>

BGCOLOR Specifies the background color of the Table. <td bgcolor="#00FF23">

COLSPAN Spans Cell columns. <td colspan="2">

ROWSPAN Spans Cell rows. <td rowspan="2">

<TR> - Table Headings can be used anywhere <TD></TD> is. They act exactly the same and can be used as <TD> is, except the Default is bold and centered.

This is intended to be a tutorial by example of Tables. This covers most of the new tags in tables, though it doesn't necessarily show some of the really creative capabilities available in tables.

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, <TH>

Head1 Head2 Head3

A B C

D E F

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

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

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

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

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

Height Weight

Gender Males 1.9 0.003

Females 1.7 0.002

		Average
	Height	Weight
Gender	Males	1.9	0.003
Females	1.7	0.002

<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

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

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

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

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

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>

HEIGHT=15%

HEIGHT=15% Item 2

3 4

<TABLE BORDER WIDTH="50%" HEIGHT="15%">
        <TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
        </TR>
        <TR><TD>3</TD><TD>4</TD>
        </TR>
</TABLE>

<TABLE> Table Elements
BORDER	Sets the border size.	<table border="0">
CELLPADDING	Pixels between the cell data and cell wall.	<table cellpadding="5">
CELLSPACING	Pixels between cells.	<table cellspacing="3">
WIDTH	Width of overall Table in pixels or percent.	<table width="90%">
HEIGHT	Height of overall Table in pixels or percent.	<table height="100">
ALIGN	Aligns the Table to the LEFT, RIGHT, or CENTER.	<table align="center">
BGCOLOR	Specifies the background color of the Table.	<table bgcolor="#808080">
<TR> Table Row Elements
ALIGN	Aligns the Row to the LEFT, RIGHT, or CENTER.	<tr align="right">
VALIGN	Vertically aligns the Row to the TOP, BOTTOM, BASELINE, or CENTER.	<tr valign="top">
BGCOLOR	Specifies the background color of the Table.	<tr bgcolor="black">
<TD> Table Cell Elements
ALIGN	Aligns the Cell to the LEFT, RIGHT, or CENTER.	<td align="center">
VALIGN	Vertically aligns the Cell to the TOP, BOTTOM, BASELINE, or CENTER.	<td valign="bottom">
WIDTH	Width of the Cell in pixels or percent.	<td width="25%">
HEIGHT	Height of the Cell in pixels or percent.	<td height="40">
NOWRAP	Doesn't wrap the contents of the Cell.	<td nowrap>
BGCOLOR	Specifies the background color of the Table.	<td bgcolor="#00FF23">
COLSPAN	Spans Cell columns.	<td colspan="2">
ROWSPAN	Spans Cell rows.	<td rowspan="2">
<TR> - Table Headings can be used anywhere <TD></TD> is. They act exactly the same and can be used as <TD> is, except the Default is bold and centered.