Greg
06-25-2005, 02:32 PM
Creating a table can be a tough thing to visualize, so I'll attempt to map this out with an example. This is the basics, borders are on to show the shape.
First let's do a simple box. Nothing special, a table of one row and one column.
<table border="1"> <!-- This starts the table -->
<tr> <!-- This begins a row. A row goes across the screen horizontal.
This row may contain many columns. Those are done with the
next element, the <td> tag. -->
<td> <!-- This is the beginning of the first column. If it's the
only column, it's the box your data will be in in the
first row. This example will be a box, one row,
one column -->
<!-- This is our data to display. -->
<div align="center">Hello World!</div>
</td> <!-- Now we close the column. -->
</tr> <!-- Now we close the row. -->
</table> <!-- Now we end the table -->
Without the comments we have...
<table border="1">
<tr>
<td>
<div align="center">
Hello World!
</div>
</td>
</tr>
</table>
That's a box, one row and one column. The data will size it as is I think, but you can control the shape with formatting lables.
Now let's do a two row two column table. Much more useful.
<table border="1"> <!-- This starts the table -->
<tr> <!-- This begins the first row. -->
<td> <!-- This is the beginning of the first column first row -->
<!-- This is our data to display. -->
<div align="center">Box 1</div>
</td> <!-- Now we close the first column. -->
<td> <!-- This is the beginning of the second column first row -->
<!-- This is our data to display. -->
<div align="center">Box 2</div>
</td> <!-- Now we close the second column. -->
</tr> <!-- Now we close the first row. -->
<tr> <!-- This begins the second row. -->
<td> <!-- This is the beginning of the first column second row -->
<!-- This is our data to display. -->
<div align="center">Box 3</div>
</td> <!-- Now we close the first column. -->
<td> <!-- This is the beginning of the second column second row -->
<!-- This is our data to display. -->
<div align="center">Box 4</div>
</td> <!-- Now we close the second column. -->
</tr> <!-- Now we close the second row. -->
</table> <!-- Now we end the table -->
Without the comments we have...
<table border="1">
<tr>
<td>
<div align="center">
Box 1
</div>
</td>
<td>
<div align="center">
Box 2
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
Box 3
</div>
</td>
<td>
<div align="center">
Box 4
</div>
</td>
</tr>
</table>
It's not too hard, you just need to balance the tags opening and closing them.
Recap:
1)-Open the table.
2)-Open a Row.
3)-Open and close the columns.
4)-Close the Row.
5)-Close the table.
Repeat 2-3-4 to make multiple rows while repeating 3 in each for the desired columns.
Here is a working example... HTML Table How To (http://www.lakecs.com/html-table-how-to.html)
First let's do a simple box. Nothing special, a table of one row and one column.
<table border="1"> <!-- This starts the table -->
<tr> <!-- This begins a row. A row goes across the screen horizontal.
This row may contain many columns. Those are done with the
next element, the <td> tag. -->
<td> <!-- This is the beginning of the first column. If it's the
only column, it's the box your data will be in in the
first row. This example will be a box, one row,
one column -->
<!-- This is our data to display. -->
<div align="center">Hello World!</div>
</td> <!-- Now we close the column. -->
</tr> <!-- Now we close the row. -->
</table> <!-- Now we end the table -->
Without the comments we have...
<table border="1">
<tr>
<td>
<div align="center">
Hello World!
</div>
</td>
</tr>
</table>
That's a box, one row and one column. The data will size it as is I think, but you can control the shape with formatting lables.
Now let's do a two row two column table. Much more useful.
<table border="1"> <!-- This starts the table -->
<tr> <!-- This begins the first row. -->
<td> <!-- This is the beginning of the first column first row -->
<!-- This is our data to display. -->
<div align="center">Box 1</div>
</td> <!-- Now we close the first column. -->
<td> <!-- This is the beginning of the second column first row -->
<!-- This is our data to display. -->
<div align="center">Box 2</div>
</td> <!-- Now we close the second column. -->
</tr> <!-- Now we close the first row. -->
<tr> <!-- This begins the second row. -->
<td> <!-- This is the beginning of the first column second row -->
<!-- This is our data to display. -->
<div align="center">Box 3</div>
</td> <!-- Now we close the first column. -->
<td> <!-- This is the beginning of the second column second row -->
<!-- This is our data to display. -->
<div align="center">Box 4</div>
</td> <!-- Now we close the second column. -->
</tr> <!-- Now we close the second row. -->
</table> <!-- Now we end the table -->
Without the comments we have...
<table border="1">
<tr>
<td>
<div align="center">
Box 1
</div>
</td>
<td>
<div align="center">
Box 2
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
Box 3
</div>
</td>
<td>
<div align="center">
Box 4
</div>
</td>
</tr>
</table>
It's not too hard, you just need to balance the tags opening and closing them.
Recap:
1)-Open the table.
2)-Open a Row.
3)-Open and close the columns.
4)-Close the Row.
5)-Close the table.
Repeat 2-3-4 to make multiple rows while repeating 3 in each for the desired columns.
Here is a working example... HTML Table How To (http://www.lakecs.com/html-table-how-to.html)