"Creating Web Pages With HTML - Simplified"
Chapter 8: Pages 114-125

Create Tables

IDG's 3-D Visual Series
Navigation Bar
Main Table of Contents Previous Chapter Next Chapter

Table of Contents

Create A Table
Reasons For Using Tables
Center A Table
Add A Border
Add A Caption
Span Cells
Align Data Horizontally
Align Data Vertically 
	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.

		
    
		
  1. 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.
		
  2. 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.
		
  3. Type <Table> before the text you entered for the table.
		
  4. Type </Table> after the text you entered for the table.
		
  5. Type <TR> before the text for each row in the table.
		
  6. Type </TR> after the text for each row in the table.
		
  7. Type <TH> in front of the text for each header cell.
		
  8. Type </TH> after the text for each header cell.
		
  9. Type <TD> in front of the text for each data cell.
		
  10. 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.

		
 

		
    
		
  1. Type <Caption> directly below the <Table> tag for the table you want to display a caption.
    
		
    
		
  2. Type the caption you want the table to display.
    
		
    
		
  3. 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.

		
 

		
    
		
  1. Position the cursor in the <TR> tag for the row containing the data you want to align horizontally.
    
		
    
		
  2. Type Align=? replacing ? with the way you want to align the data (left, center or right).
    
		
    
		
  3. 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.

		
 

		
    
		
  1. Position the cursor in the <TR> tag for the row containing the data you want to align vertically.
    
		
    
		
  2. Type VAlign=? replacing ? with the way you want to align the data (top, middle or bottom).
    
		
    
		
  3. 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 






	
	


Hosted by www.Geocities.ws





        






1