WashesWhiter.com
Flash+PHP+MySQL databases | scripts | tutorials | contact






RAILS
DEVELOPER
EMAIL
MARKETING
SUBMISSION
PAGE DESIGN
HTML TABLES
CSS TEXT
FONTS
IMAGES
FLASH
SECURITY
tutorials


tableS


One of the ways to do layout on the page is with tables. Below are some examples.
If you want to check the layout of your table, go to PRETTYPRINT.

Another way to lay out your page is to use Cascading Style Sheets.

How to lay out a page.

The structure of the page is set by using tables.
This code:
<table border=1>
<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>

produces this table:
Item 1Item 2
Item 3Item 4Item 5

Setting width
How to lay out page width.
Now set the width of the table and of each of the CELLS e.g.:

<table border=1 width="100%">
<tr>
<td width=30%>Item 1</td>
<td colSpan=2 width=70%>Item 2</td>
</tr>
<tr>
<td width=30%>Item 3</td>
<td width=30%>Item 4</td>
<td width=40%>Item 5</td>
</tr>
</table>
Item 1 Item 2
Item 3 Item 4 Item 5

Color
How to set out background color.
Now set the color of the table and of each of the CELLS e.g.:

<table border=1 width="100%" style="background-color:#b22222;" >
<tr style="background-color:#000000;" >
<td width=30% style="background-color:#ff0099;" >Item 1</td>
<td colSpan=2 width=70% style="background-color:#0000ff;" >Item 2</td>
</tr>
<tr style="background-color:#ffffff;" >
<td width=30% style="background-color:#ff999f;" >Item 3</td>
<td width=30% style="background-color:#3366ff;" >Item 4</td>
<td width=40% style="background-color:#ff9933;" >Item 5</td>
</tr>
</table>
Item 1 Item 2
Item 3 Item 4 Item 5

Aligning
How to align the tables.
You may align the table left or right.
You may align the tr and td and th left or right or center.
You may vertically align (valign) the tr and td and th top or middle or bottom.

<table border=1 width="100%" style="background-color:#b22222;" align=left >
<tr style="background-color:#000000;" align=center valign=middle >
<td width=30% style="background-color:#ff0099;" align=center valign=middle >Item 1</td>
<td colSpan=2 width=70% style="background-color:#0000ff;" align=center valign=middle >Item 2</td>
</tr>
<tr style="background-color:#ffffff;" align=center valign=middle >
<td width=30% style="background-color:#ff999f;" align=center valign=middle >Item 3</td>
<td width=30% style="background-color:#3366ff;" align=center valign=middle >Item 4</td>
<td width=40% style="background-color:#ff9933;" align=center valign=middle >Item 5</td>
</tr>
</table>
Item 1 Item 2
Item 3 Item 4 Item 5

Borders, spacing and padding
How to set borders, spacing and padding.
You may set the border width in pixels (for no border set border equals 0).

<table border=5 width="100%" style="background-color:#b22222;" align=left cellpadding=6 cellspacing=2 >
<tr style="background-color:#000000;" align=center valign=middle >
<td width=30% style="background-color:#ff0099;" align=center valign=middle >Item 1</td>
<td colSpan=2 width=70% style="background-color:#0000ff;" align=center valign=middle >Item 2</td>
</tr>
<tr style="background-color:#ffffff;" align=center valign=middle >
<td width=30% style="background-color:#ff999f;" align=center valign=middle >Item 3</td>
<td width=30% style="background-color:#3366ff;" align=center valign=middle >Item 4</td>
<td width=40% style="background-color:#ff9933;" align=center valign=middle >Item 5</td>
</tr>
</table>
Item 1 Item 2
Item 3 Item 4 Item 5
 
table EXAMPLES


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
<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
HeightWeight
Gender Males1.90.003
Females1.70.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
<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%
34
<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 size2
34
<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
34
<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 1Item 2
Item AItem 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
34
<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>

BASIC PAGE LAYOUT

one
<table border width="100%">
<tr>
<td width="10%"></td>
<td width="80%">one</td>
<td width="10%"></td>
</tr>
</table>