Table of Contents

	116 Create A Table
	

		
» You can use the PreFormat tag to quickly create a simple table.
		
 
		
Example:
		

		<Pre>

		Place text between tags.

		</Pre>
		
		
 
		
 

Text will retain spacing.
------------------------------------------
Sports          Boys           Girls
------------------------------------------
Skiing           121            45
Snowboarding     254            67
------------------------------------------


		
» You can create a table to neatly display information on a Web page.
		

		
Type the data you want to appear in the first row of the table.

		You can use the Enter and Tab keys to visually separate the data for each cell. The Web browser will ignore the spacing you add.
		
Type the data you want to appear in the next row of the table.

		Repeat this step until you finish entering all the data for the table.
		
Type <Table> before the text you entered for the table.
		
Type </Table> after the text you entered for the table.
		
Type <TR> before the text for each row in the table.
		
Type </TR> after the text for each row in the table.
		
Type <TH> in front of the text for each header cell.
		
Type </TH> after the text for each header cell.
		
Type <TD> in front of the text for each data cell.
		
Type </TD> after the text for each data cell.
		
		


		
Softball Standings
		
Team
 
Games
 
Wins
 
Losses
		
The Chargers
 
10
 
9
 
1
		
Sluggers
 
10
 
8
 
1
		
The Champs
 
10
 
7
 
2
		
The Eagles
 
10
 
5
 
5
		




	118 Reasons For Using Tables
	

		
» Display Lists Of Information
		
 
		

		
Tables provide a great way to neatly display lists of information on your Web pages. For example, you can use tables to display financial data and price lists.
		
		


Big Bob's Toy Store Sale
Item
 
Price
 
Sale Price
Remote Car
 
$40
 
$30
 
MP3 Player
 
$150
 
$100
 
Computer
 
$1,200
 
$995
 
DVD Player
 
$80
 
$60
 




	

		
» Create Newspaper Columns
		
 
		

		
You can use tables to present information in columns like those found in a newspaper. To display information in three newspaper columns, you can create a table with one row that contains three cells.
		
		


HTML Programmer's Journal

The topic for column one is a short story of a man who sat in front of his computer for hours at a time and forgot all about what life had to offer. The man finally saw sunshine and made a vow to strive for balance in his life. This made all his friends happy.
The topic for column two is a short story of a man who sat in front of his computer for hours at a time and forgot all about what life had to offer. The man finally saw sunshine and made a vow to strive for balance in his life. This made all his friends happy.
The topic for column three is a short story of a man who sat in front of his computer for hours at a time and forgot all about what life had to offer. The man finally saw sunshine and made a vow to strive for balance in his life. This made all his friends happy.





	

		
» Control Web Page Layout
		
 
		

		
Tables are useful for controlling the placement of text and images on your Web pages. To neatly position two paragraphs and two images, you can create a table with two rows that contain two cells each.
		
		


Photo Album
The first photo is shown to the right of this text. --->

<--- The second photo is shown to the left of this text.




	

		
» Create Borders
		
 
		

		
You can use a table to place a three-dimensional border around text or an image on your Web page. To place a 3-D border around text or an image, place the text or image in a table with one row that contains one cell.
		
		


Photo Album
You can place both text and an image within the same border.
J





	119 Center A Table
	

		
» You can center a table to improve the overall appearance of your Web page.
		
 
		

		
Type <Center> directly above the <Table> tag.

		

		
Type </Center> directly below the </Table> tag.
		
		



Photo Album
You can center a table to improve the overall appearance of your Web page.
J





	120 Add A Border
	

		
» You can add a border to a table  to separate each cell in the table. This will make the data in the table easier to read.
		
 
		

		
In the <Table> tag for the table you want to display a border, type Border=? replacing ? with the thickness you want to use for the border in pixels.
		
		


Photo Album
You can add a border to improve the overall appearance of your Web page.
J





	121 Add A Caption
	

		
» You can add a caption to summarize the information in a table.
		
 
		

		
Type <Caption> directly below the <Table> tag for the table you want to display a caption.

		

		
Type the caption you want the table to display.

		

		
Type </Caption> after the caption.
		
		
Example:
		
     <Table>
		
     <Caption> Table With Text & Photo </Caption>
		
     </Table>
		


Table With Text & Photo
Photo Album
You can add a caption to the table.
J




	122 Span Cells
	

		
» You can combine two or more cells in a row or column to make one large cell.
		
 
		
» Span Cells Across Columns
		
 
		

		
In the <TH> or <TD> tag for the cell you want to span across columns, type ColSpan=? replacing ? with the number of columns you want the cell to span across.
		


Calendar
Sun
 
Mon
 
Tues
 
Wed
 
Thurs
 
Fri
 
Sat
 
 1
 
 2
 
 3
 
 4
 
 5
 
 6
 
 7
 
 8
 
 9
 
 10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 
31
 
-
 
-
 
-
 
-
 





	

		
		
» Span Cells Down Rows
		
 
		

		
In the <TH> or <TD> tag for the cell you want to span down rows, type RowSpan=? replacing ? with the number of rows you want the cell to span down.
		
		


Calendar
Sun
 
Mon
 
Tues
 
Wed
 
Thurs
 
Fri
 
Sat
 
 1
 
 2
 
 3
 
 4
 
 5
 
 6
 
 7
 
 8
 
 9
 
 10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 
31
 
-
 
-
 
-
 
-
 





	124 Align Data Horizontally
	

		
» You can change the horizontal alignment of data in a table.
		
 
		

		
Position the cursor in the <TR> tag for the row containing the data you want to align horizontally.

		

		
Type Align=? replacing ? with the way you want to align the data (left, center or right).

		

		
To align data horizontally in a single cell, perform step 2 in the <TH> tag or <TD> tag for the cell.
		
		


Table: Horizontal Alignment
Left
 
Left
 
Left
 
Center
 
Center
 
Center
 
Right
 
Right
 
Right
 





	125 Align Data Vertically
	

		
» You can change the vertical alignment of data in a table.
		
 
		

		
Position the cursor in the <TR> tag for the row containing the data you want to align vertically.

		

		
Type VAlign=? replacing ? with the way you want to align the data (top, middle or bottom).

		

		
To align data vertically in a single cell, perform step 2 in the <TH> tag or <TD> tag for the cell.
		
		


  V     e     r     t     i     c     a     l  
Top
 
Top
 
Top
 
Middle
 
Middle
 
Middle
 
Bottom
 
Bottom
 
Bottom