MCCC CIS177 Markup Languages

Borders

As previously mentioned you can optionally add borders around your table simply by using the border="n" attribute where "n" is the number of pixels wide. IN IE ONLY, you can also choose which borders you want to display by using the frame="location" attribute where location is as follows:

vsides for vertical sides
hsides for horizontal sides.
above for a single top border
below for a single bottom border
rhs for a single border on the right
lhs for a single border on the left

Place the frame attribute after the border attribute - without the border value - which is required for this feature to work. The following code illustrates the frame="hsides" which displays only the external horizontal borders, however does not display the external vertical borders. Notice the attribute is also used with align, valign, width and height attributes.

 <table 
                border frame="hsides" align="center" valign="middle" width="150" 
                height="150">

                  <tr>

                  <td align="center" valign="top">R1C1</td>

                  <td align="center" valign="top">R1C2</td>

                  <td align="center" valign="top">R1C3</td>

                  </tr>

                  <tr>

                  <td align="center" valign="top">R2C1</td>

                  <td align="center" valign="top">R2C2</td>

                  <td align="center" valign="top">R2C3</td>

                  </tr>

                </table>

R1C1	R1C2	R1C3
R2C1	R2C2	R2C3

Experiment with Table Borders

Create a new HTML document or use the one previously created.

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

Set your borders to appear as in the example.

TIP: The table includes cellspacing and cellpadding

Save the file and view the file in the browser

Name	Phone
Mary	555-1234
John	444-9876
Sue	999-4567

Special tags

While the <table>, <tr> and <td> tags are the most commonly used table tags, you may optionally use the following tags to customize your table:

<th> - table header: use in place of <td> to automatically center and bold the cell content
<caption> - caption tag: use immediately following the opening <table> tag to create a caption.

<table border="1" align="right" width="50%">
<caption align="top">Example of Caption and TH tags</caption>

<tr>
<th width="50%">1st Heading</th>
<th width="50%">2nd Heading </th>
</tr>
<tr>
<td>1st data</td>
<td>2nd data</td>

</table>

Example of Caption and TH tags
1st Heading	2nd Heading
1st data	2nd data

Specify Caption and Table Heading Tags

Edit the table you previously made so that it looks like the one below using the caption and th tags appropriately.

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.

4.0 Tables

Borders

Special tags

Background Colors

Background Tiles