|
|
| HTML - Tables |
tutorial by Chris |
Welcome to the world of Tables. These allow you make make about any design
you can think of. Well here we go, the basic tags are as follows:
<![CDATA[
<table> - the main table tag
<tr> - used for rows (tr=table row)
<td> - used for the making of cells (each individual square)
]]>
OK, lets make a new table!
First off lets start with the TABLE tag. After the TABLE tag comes the TR tag to
start your first row. Lastly but most importantly comes the TD tag, which is what you put your "stuff"
inside of. Now comes the fun part, i will show you what a simple table looks like:
<![CDATA[
<table border="3" bgcolor="black">
<tr>
<td>New Table!</td>
</tr>
</table>]]>
This will give you that above^
Notice i added a border="3" attribute to the table. That allows the table to have the thick
grey border around the edge of it, if you do not specify the border attribute, it remains
as zero. Also i added a bgcolor="black" attribute, this is just like in the body tag, it
makes the table turn to black
OK, you want bigger and better tables do you? This next step starts using
the TR and TD tags. These are the main thing, main thing, main thing you must understand.
Ooops, i typed that 3 times, thats how important those tags are.
Remember TABLE tag goes first then TR starts your row in that table. then you can begin
and and as many TD tags as you want withing that TR(table row) tag. Like this...
<![CDATA[
<table bgcolor="navy" border="3">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>]]>
This gives you a table like that^ See how each TD tag creates a new box, cool huh?
Now i will introduce you to rows, "You, this is Rows, Rows, this is my visitor"
OK thats silly but you laughed didnt you. Me niether. Well you know how to make a table go
from left to right with cells, now lets go vertical with columns!!
<![CDATA[
<table bgcolor="navy" border="3">
<tr><td>Cell 1</td></tr>
<tr><td>Cell 2</td></tr>
<tr><td>Cell 3</td></tr>
</table>]]>
That will give you a table like this...
Notice how each time you end a TR tag and start another TR tag, it begins
a new Table Row, then your TD tags still hold the information you want like above
Now you will learn to make those big hard easy tables. Its a
combination of TD tags in a TR tag, it just makes a few cells in each row, then starts
a new row with the same cells in it.
<![CDATA[
<table bgcolor="navy" border="3">
<tr><td>Cell 1</td> <td>Cell 4</td> <td>Cell 7</td></tr>
<tr><td>Cell 2</td> <td>Cell 5</td> <td>Cell 8</td></tr>
<tr><td>Cell 3</td> <td>Cell 6</td> <td>Cell 9</td></tr>
</table>]]>
That will give you a table like this
| Cell 1 | Cell 4 | Cell 7 |
| Cell 2 | Cell 5 | Cell 8 |
| Cell 3 | Cell 6 | Cell 9 |
Notice how each time you end a TR tag and start another TR tag, it begins
a new Table Row, then your TD tags still hold the information you want like above.
here is how this page is setup, except the table around them all has a border of zero. And
you thought tables were hard. If you have any trouble email me or post on the board!
<![CDATA[
<table width="300" border="1" bordercolor="#303030"><tr><td valign="top" width="25%">
<! ------------------ Begin Left Column ---------------------------->
<table border="1" width="90%" bordercolor="#303030" align="center">
<tr><td bgcolor="#303030">Features</td></tr>
<tr><td>Hi</td></tr>
<tr><td>Hi</td></tr>
<tr><td>Hi</td></tr>
</table>
<br>
<table border="1" width="90%" bordercolor="#303030" align="center">
<tr><td bgcolor="#303030">Features</td></tr>
<tr><td>Hi</td></tr>
<tr><td>Hi</td></tr>
<tr><td>Hi</td></tr>
</table>
<! ------------------ End Left Column --------------------------------->
</td><td valign="top" width="50%">
<! ------------------ Begin Middle Column ---------------------------->
<table border="1" width="90%" align="center" bordercolor="#303030">
<tr><td bgcolor="#303030">Tables</td></tr>
<tr><td><br><br><br><br><br></td></tr>
</td></tr></table>
<! ------------------ End Middle Column ---------------------------->
</td><td width="25%">
<! ------------------ Begin Right Column ---------------------------->
<table border="1" width="90%" bordercolor="#303030" align="center">
<tr><td bgcolor="#303030">Features</td></tr>
<tr><td>Hi</td></tr>
<tr><td>Hi</td></tr>
<tr><td>Hi</td></tr>
</table>
<br>
<table border="1" width="90%" bordercolor="#303030" align="center">
<tr><td bgcolor="#303030">Features</td></tr>
<tr><td>Hi</td></tr>
<tr><td>Hi</td></tr>
<tr><td>Hi</td></tr>
</table>
<! ------------------ End Right Column ---------------------------->
</td></tr></table>
]]>
Next lesson is Forms
|
|
|
|
