Aapno jaunsar: ADDING TABLES

Tables can be used in many ways. They can be used to present information and data or to neatly layout part of, or a whole webpage, serving as a template for an entire website. Laying out your webpage using tables will be stressful when changing the entire layout of your website.

We will only use tables to present data and information, and to neatly organize our photographs for a photo album. We will also change how our tables will look.

It is important to know the basic format used to create a table, yet there must be text in the TR and TD tags for a table to completely appear. Tables have a default size, and overlapping text will be wrapped to the next line.

<table>

</table>

The TR tag will create a table row, while the TD stands for table data, and will create a table cell. As you'll learn, you may place infinitan e number of TD tags in a single TR tag. The table below is a plain address book, and below it is the address book but with color and borders. Notice that <tr><td></td></tr> left blank stands as a parapgraph break for tables. Never include any breaks in a table in replace of a table row.

<table><tr><td><b>egbaba's Address Book</b></td></tr><tr><td><i>Friend's Name</i></td><td><i>Friend's Address</i></td><td><i>Friend's Phone Number</i></td><td><i>Friend's Website</i></td></tr><tr><td></td></tr><tr><td>egbaba</td><td>STREET<br> CITY, STATE ZIP</td><td>000-000</td><td>http://www.egbaba.in</td></tr><tr><td></td></tr><tr><td>Anywho Anyone</td><td>Any Address Any City, Any State Any Zip Code</td><td>000-000</td><td>http://www.egbaba.in</td></tr></table>

Here's the code for the finished address book, with color and all:

<table border="1" bgcolor="khaki"><caption align="center"><b>egbaba's Address Book</b></caption><tr bgcolor="red"><td><i>Friend's Name</i></td><td><i>Friend's Address</i></td><td><i>Friend's Phone Number</i></td><td><i>Friend's Website</i></td></tr><tr><td></td></tr><tr bgcolor="blue"><td>Kelcey Coe</td><td>STREET<br>CITY, STATE ZIP</td><td>000-000</td><td>http://www.egbaba.in/wspkel/index.shtml</td></tr><tr><td></td></tr><tr bgcolor="yellow"><td>Anywho Anyone</td><td>Any Address<br>Any City, Any State Any Zip Code</td><td>000-000</td><td>http://http://www.egbaba.in/wspkel/index.shtml</td></tr></table>

And here's the overall finished effect, with the CAPTION tag (which places a caption (table's name) above the table's data, and it can't be given a background color):


Friend's Name	Friend's Address	Friend's Phone Number	Friend's Website

egbaba	STREET CITY, STATE ZIP	000-000	http://www.egbaba.in

Anywho Anyone	Any Address Any City, Any State Any Zip Code	000-000	http://www.egbaba.in

Next we will make a photo album using some of our photos. I am going to include four photos, of myself and my cat. Note that the size of the photo will stretch the cell it is placed in if it is too big.

<center>Kelcey's Photo Album <table border="1"><tr><td align="center" bgcolor="red"><img src="sheba_xmas.bmp"></td><td align="center" bgcolor="green"><img src="sheba_hidden.bmp"></td></tr><tr><td bgcolor="blue"><img src="kelart.jpg"></td><td bgcolor="yellow"><img src="kel_bday89.jpg"></td></tr></table></center>

Here's the code:

Kelcey's Photo Album