Lesson 4- Tables

Tables help you to 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 tag (these with the <TR> tags form cells) <TD>. The number of <TD> tags that you place inside a <TR> tag determines the number of vertical columns your table will have. The number of <TR> tags you place within your table will determine the number of horizontal rows your table will have.

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

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>

This is how it should look in your browser:

 

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 also add the align attributes 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 attributes work for the table itself as well. Inside the <TABLE> tag add an alignment attribute. Play around with your table and see what you can do!