Click here!

Upload    Contact    Home


R E S O U R C E S

HTMLStuff:

 
 
Home
Artist
Designer
Webmaster
Programmer
What's New
* Resources
 		 

 

  

The Basic Table with Borders

Now it is time to begin creating those tables! First, you need to know the <TABLE> command. That is the command that lets the browser know that anything in-between the <TABLE></TABLE> commands are table information.
Next there is the <TR> command. This is the Table Row command. It sets up the rows within the table.
Another command is the <TD> command. This is the Table Data command. This sets up the information in each individual cell (the space in each section of the table).
So, if you have a friend named Jack and you want his name in the table, then put this code into the generic HTML from earlier:

 
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Jack</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

If you look at the page you just made then you notice that all you see is Jack's name, sitting there, looking lonely with no table around him. Of course, the table is there, but it is not visible. How about we put those walls around Jack?

 

<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD>Jack</TD>
</TR>
</TABLE>
</BODY>
</HTML>

The <TABLE BORDER> command is based on pixels. This will allow you to set up the border size of the table to just about anything you want. Go ahead and try different sizes. I will wait.

...

...

...

Okay, welcome back! Now it is time to start changing the size of the cells within the table. For this you will use <TD WIDTH>. You can use percentages like this:

 
<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD WIDTH=50%>Jack</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

Or it can use pixels instead.

<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD WIDTH=100>Jack</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 
 
 
 

Now it is time to have another friend of yours join Jack. How about that good buddy of yours, John? All you have to do is add another <TD>.

<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
</TABLE>
</BODY>
</HTML>
 

Now two more of your friends want to get in that table of yours. So, rather then continuing on the same row, now it is time to create a new row. To do this, add in another <TR>. This will create the new row. Then put in the information after the new <TR>.

<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>

The second <TR> command sets up a new row. Now if you want the table to appear in the center of your page then the <ALIGN> command works great!

<HTML>
<HEAD>
<TITLE>Tables Test Page</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN=CENTER BORDER=3>
<TR>
<TD>Jack</TD>
<TD>John</TD>
</TR>
<TR>
<TD>Jill</TD>
<TD>Jeff</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 
Now let's move on to adding some color to your table! The next part will cover background color as well as border color.

<<Back Next>>

Head on to:
Part 1: Introduction
Part 2: The Basic Table with Borders
Part 3: Adding Color to your Tables
Part 4: Putting Images in your Table
Part 5: Cell Padding and Cell Spacing
256 Color Hex Chart
HTML Command Reference

Back to Tutorial Menu
Back to Designer Main Page
Back To HTML Stuff Main Page

 

  News   Contact   Advertise   CD ROM   Search   Upload   Help   Home

Copyright © 2000 Tucows.Com Inc.
TUCOWS.Com Inc. has no liability for any content or goods on the TUCOWS site or the Internet, except as set forth in the terms and conditions and privacy statement.