Home
lesson 1
lesson 2
lesson 3
lesson 4
lesson 5
Promotion Basics
Color Codes
Symbols
Tag Dictonary
Webmaster Resources

  • Tables

Tables help you arrange your page. You can use them for both text and images. Since these are tutorials on basic HTML lets start simple. Once you have the basics down you'll pick up the advanced stuff easily. This will look hard at first but stick with me it doesn't take long to catch on.

For this lesson our table with have 3 basic parts. the first is the <TABLE> tag.

The second is the table row (the horizontal part). <TR>

The third is the table data (these with the <TR> tags form cells) <TD>

You can turn the border off by adding BORDER="0" to the <TABLE> tag but leave them on for this.

Type this :

<TABLE>


<TR>
<TD> one </TD>
<TD> two </TD>
<TD> three </TD>
</TR>

<TR>
<TD> four </TD>
<TD> five </TD>
<TD> six </TD>
</TR>

<TR>
<TD> seven </TD>
<TD> eight </TD>
<TD>nine </TD>
</TR>

</TABLE>

Now that will look like this

The Table
one two three
four five six
seven eight nine

you can add as many rows and cells as you want. Fill them with images or text. Turn the borders on or off. you can add the align tags inside the <TD> tags as well. Make the same table but change the <TD> tags so they look like this <TD ALIGN="center"> and see what happens. you can align left and right too.

The align tags work for the table itself as well. Inside the <TABLE> tag add this <TABLE ALIGN="center"> try left and right too. Play around with your table.   When it all starts to make sense do this. Add cellspacing and cellpadding to your <TABLE> tag <TABLE CELLSPACING"3" CELLPADDING="2"> and see what happens. Change the values of the numbers a few times. Now try adding a <TH> or table header tag to your table add it in between the <TABLE> tag and the first <TR> tag . type <TH> this is my table header</TH> See what happened? That's it for basic tables! Onto LINKS and other great stuff in lesson 5!