Basic table structure

Tables are a great way to control the layout, both horizontally and vertically, and enhance the appearance of elements on your Web page. A basic table requires the <table>, <tr> (table row) and <td> (table data) tags. Note that the border attribute of 1 is optional and is included here for illustration. Borders are discussed further in the next section.

<table border="1"> <tr> <td>R1C1</td> <td>R1C2</td> <td>R1C3</td> </tr> <tr> <td>R2C1</td> <td>R2C2</td> <td>R2C3</td> </tr> <tr> <td>R3C1</td> <td>R3C2</td> <td>R3C3</td> </tr> </table>

R1C1 R1C2 R1C3 R2C1 R2C2 R2C3 R3C1 R3C2 R3C3

Create a basic table

Create a new HTML document.

Create a table containing three columns and four rows containing the data as shown.

Save the file as lesson05.html

View the file in the browser

Name	Phone	Email
Mary	555-1234	mary@hotmail.com
John	444-9876	jdoe@yahoo.com
Sue	999-4567	sue@somewhere.com

Wrapping text

You can wrap text around a table the same way you can with an image - using the align attribute where position is either left or right meaning the table will either be left or right of the text.

<table align="position">

Copy and paste the following text into your document after the table.

When RGB light hits a red crayon, the pigment in the crayon filters out the green and blue, and reflects the red. Many pigments occur naturally, such as the chlorophyll in leaves, and the carotene in carrots, however, experts know how to manipulate your color perceptions using dyes, paints and other chemicals. The offset printing industry, in fact, has mastered this art using a four-color ink process known as CMYK, or cyan, magenta, yellow and black. All those colorful printed ads that shout at you to buy, not only manipulate your color perceptions, but your purchasing decisions as well.

Edit the table tag by inserting the align="left" attribute.

Save the file and view it in the browser.

Edit the table tag by changing the align attribute to align="right."

Save the file and refresh the browser.

Setting Width and Height

By default, the browser will cause the table to be as wide and as high as necessary to accomodate the data the table contains. You can control this using the width and height attributes for both the entire table and for each data cell. Optional values are in pixels or as a percentage of the available space. In addition, you can use the align and valign (vertical align) attribute in the data cells to align the data within each cell. Align accepts the values of left, center or right while valign accepts top, middle or bottom.

This table occupies 50% of the available horizontal space and is 200 pixels high. The data cell this text appears in is 100% of the table's available width, horizontally aligned in the center of the table and vertically aligned in the middle of the cell.

<table border="1" align="right" width="50%" height="200">

<tr>
<td width="100%" align="center" valign="middle">This table occupies 50% of the available horizontal space and is 200 pixels wide. The data cell this text appears in is 100% of the table's available width, horizontally aligned in the center of the table and vertically aligned in the middle of the cell.
</td>
</tr>

</table>

Specify Width and Height Attributes

Create a table that looks like the one below (copy and paste the content).

NOTE: Set your table width to 80% and align the table in the center of the page.

Save the file and view it in the browser

Edit the code to make the Tahiti and Virgin Island rows 200 pixels high and vertically align the data to the top of the cell.

Save the file and refresh the browser.

Edit the code to horizontally center all data.

Save the file and refresh the browser.

Tour Packages

Destination	Description
Tahiti	You will enjoy five fun-filled nights among the Tahitian islands. The first night will be spent in Tahit. Nights two and three will be spent on Bora Bora. On night four, you will enjoy a sumptuous feast on Moorea. Your final night will be spent on the water off the island of Tahiti.
Virgin Islands	For this tour, the cruise ship will be your hotel. Stops are made at several of the most beautiful islands. Nights you will enjoy the sound of Carribean festival music as you dine oat our 24 hour buffet.

Controlling Table Cellspacing & Cellpadding

Cellspacing refers to the space between data cells while cellpadding refers to the space between the inner edge of a cell and the cell content. You can control both using the cellspacing and cellpadding attributes in the table tag respectively.

<table width="50%" align="right" border="1" cellspacing="20" cellpadding="20">

<tr><td width="50%" height="50%">Quantity</td>
<td>Price</td>
</tr>
<tr><td>500</td>
<td>$10.00</td>
</tr>

</table>

Quantity	Price
500	$10.00

Specify Cellspacing and Cellpadding Attributes

Edit the code to experiment with the cellspacing and cellpadding attributes.

Be sure to save your file and refresh the browser after each change