Creating a Table
First we'll need to insert table tags to let the browser know that you are
beginning a table.<body><table>
</table></body> Then we add the row tag to let the browser
know you are beginning a row.
<body><table> <tr> </tr></table></body>
Then we need to let the browser know we will be opening a cell.
<body><table> <tr><td>
</td> </tr></table></body>
Let's give the table a border. To do this, simply insert the border
attribute into the table tag. The border width can be as wide as 100 pixels. <body><table
border="1"> <tr><td>
</td> </tr></table></body> Now let's put
some text in the cell. <body><table
border="1"> <tr><td>Text1
</td> </tr></table></body> The table you
have just created will look like this:
Let’s say we wanted another textbox in a new column. All we would
have to do is add another cell tag and the text to be inserted, as follows:
|
<body><table
border="1">
<tr>
<td>Text1 </td>
<td>Text2 </td>
</tr>
</table></body> |
Now your table will look like this:
Now what would you do if you wanted to add another column?
You guessed it! Add another cell tag, as follows:
|
<body><table
border="1"> <tr>
<td>Text1 </td>
<td>Text2 </td>
<td>Text3 </td>
</tr> </table></body> |
Now your table will look like this:
Let's go back to the first table we have created and let's say
we wanted our table to have three rows instead of three columns. What you
need to do is add a new row tag for each new row and insert a cell tag for however
many cells there are in the row, as follows:
<body><table
border="1">
<tr><td>Text1 </td></tr>
<tr><td>Text2 </td></tr>
<tr><td>Text3 </td></tr>
</table></body> |
Now your table will look like this:
Now let's get a little more daring. Say we wanted a
table with three columns and three rows. That would mean we would need three row
tags for each of our rows and each row will need three cell tags for each cell
in that row. Let's look at the code below:
|
<body><table
border="1">
<tr>
<td>Text1 </td>
<td>Text2 </td>
<td>Text3 </td>
</tr>
<tr>
<td>Text4 </td>
<td>Text5 </td>
<td>Text6 </td>
</tr>
<tr>
<td>Text7 </td>
<td>Text8 </td>
<td>Text9 </td>
</tr>
</table></body>
|
Now your table will look like this:
| Text1 |
Text2 |
Text3 |
| Text4 |
Text5 |
Text6 |
| Text7 |
Text8 |
Text9 |
|