Warning: include(http://www.studio6000.com/tutorside.htm) [function.include]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/studio60/public_html/html/lesson15a.php on line 17

Warning: include() [function.include]: Failed opening 'http://www.studio6000.com/tutorside.htm' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/studio60/public_html/html/lesson15a.php on line 17

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:

Text1

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:

Text1 Text2

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:

Text1 Text2 Text3

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:

Text1

Text2

Text3

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

Next Lesson