More about Tables

The table we created in the last lesson can be made more attractive with just a few HTML commands. Use the File tables.html that you saved in the last lesson.

We Will Turn This:

My Favorite Links

Westark College Page Microsoft Home Page
Jim Phelps' Home Page Netscape's Home Page

INTO THIS!!!!!!

Your Table should look like this when we finish:

My Favorite Links

Westark College Page Microsoft Home Page
Jim Phelps' Home Page Netscape's Home Page

Edit the HTML for the table by inserting the data that is RED

<HTML>
<HEAD>
<TITLE> My Table Page</TITLE>
< BODY >
<TABLE>


<CENTER>
<TABLE WIDTH=90% BORDER=4>
<TR>
<TDWIDTH=50% ALIGN=CENTER><A HREF="http://www.westark.edu">Westark College Page</a>
<TDWIDTH=50% ALIGN=CENTER><A HREF="http://www.microsoft.com">Microsoft Home Page</a>
</TR>
<TR>
<TDWIDTH=50% ALIGN=CENTER><A HREF="http://www.cei.net/~jphelps">Jim Phelps' Home Page</a>
<TDWIDTH=50% ALIGN=CENTER><A HREF="http://www.netscape.com">Netscape's Home Page</a>
</TR>

</TABLE>
</CENTER>
< /BODY >
< /HTML >

The new tags we placed in our document are explained below:



<CENTER>

The center tag is used to align items horizontally on the page.

Other Alignment options are <LEFT> <RIGHT>



<TABLE WIDTH=90%>

The percentage describes the width of the table in relation to the page.
It can also be stated in Pixels


<TABLE BORDER=4>

Assigns a border width to the cells of the table. The higher the number, the thicker the border.
<TD WIDTH=50% ALIGN=CENTER>

This applies to the cells of the table.
The Width=50% means that the cell width is 50% of the width of the entire table (Which is 90% of the page width).



Back to the Tutor Index