Welcome To Steve's Html Tutorial        

Unit 4: Creating A Table

In This Section We Will Be Digussing Tables. Tables Are Great. Once You Master The Art Of Creating Tables, You Will Have A Great Looking Site In No Time. As A Matter Of Fact, This Site Is Made Up Of All Tables And Images. I Know, What You're All Thinking. "I Should Just Shut The Hell Up And Get On With The Lesson". Right? Okay I Will.


Phase One: Creating A Table

The Following Is A Basic Table:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

The Above Table, Doesn't Look Like Much. I Know. There Is Not Yet Any Sizes Of Borders Specified. This What I Call An Invisible Table.This Is Due To The Simple Fact That You Cannot See The Border.

This Is How I Did The Above Table:

<TABLE>
<TR>
<TD> Cell 1 </TD>
<TD> Cell 2 </TD>
<TD> Cell 3 </TD>
</TR>

<TR>
<TD> Cell 4 </TD>
<TD> Cell 5 </TD>
<TD> Cell 6 </TD>
</TR>
</TABLE>

Here's The Same Table With A Specified Border Size, In This Case the Border Is "2".

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

The Code Is The Same, Except I Specified A Border Size. This Is The Code I Used For The Above Table.

<table border=2>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Okay, That Seemed Pretty Easy. Right? You Can Also Put A Background Color In Your Table.Look This Is A Table With A Red Background.

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

This Is The Code I Used to Do It.

<table border=2>
<table bgcolor=red>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

You Can Put Any Content You Want In A Table. Including Links, Images And/Or Text. The Content Within A Table, Is Always Between Your <td> </td> Tags. The Size Of The Table Will Automatically Change To The Size Of Your Content.Look I'll Show You, One More. This Is With An Image. Watch What happens.

Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Notice How The Image Is taking The Place Of The "Cell 1" Text. Also Notice, That The Table Size Automatically Adjusted To The Width And Height Of The Image. Pretty Neat. Isn't It? You ProbablyFigured Out How It Was Done By Now. Look Below For The Code.

<table border=2>
<table bgcolor=red>
<tr>
<td><img src=http://members.lycos.co.uk/stevesthinktank/images/dblue.jpg></td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

There You Have It, Now You Know How To Create A Table.




To Extend Your Gratitude For Me Teaching You.
Please Copy And Paste The Following Code Anywhere Between <BODY> And </BODY> On Your Webpage. Thanks.
 
 
blog*spot
get rid of this ad | advertise here