Table rows and data

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
      Lists
      Basic Tables
         Table basics
         Rows and data
         Borders
         Width
         Cellpadding & spacing
         Alignment
         Rowspan & colspan
         You Try It
      Advanced Text
      Marquee
      Meta
      Sounds
      Comments
Section 4 - Advanced
Section 5 - Publishing
Section 6 - Extras
Appendices

Now that you know the three parts of a table, you can move those parts around a bit to make your table look the way you want. Instead of one box within a table, suppose you want two boxes. Here's how to do that:

Code
<table> <tr> <td> This is square 1. </td> <td> This is square 2. </td> </tr> </table>

What you see

This is square 1.

This is square 2.

Three boxes? Not much harder. It looks like:

Code
<table> <tr> <td> This is square 1. </td> <td> This is square 2. </td> <td> This is square 3. </td> </tr> </table>

What you see

This is square 1.

This is square 2.

This is square 3.

You can also increase your table by adding rows. Adding rows is as easy as adding data. Here's an example of a table with four cells in two rows and two columns:

Code
<table> <tr> <td> This is square 1. </td> <td> This is square 2. </td> </tr> <tr> <td> This is square 3. </td> <td> This is square 4. </td> </tr> </table>

What you see

This is square 1.	This is square 2.
This is square 3.	This is square 4.

Now you can increase the size of your table to as wide or as long as you need it. A note though, if you have more than one row and differeing cells in those rows, your table will be uneven.

Code
<table> <tr> <td> This is square 1. </td> <td> This is square 2. </td> </tr> <tr> <td> This is square 3. </td> </tr> </table>

What you see

This is square 1.	This is square 2.
This is square 3.

Headings:
One more thing that might be useful when making a table is known as the heading cell. This takes the place of the <td> tag. All text within the <th> tag will be bold and centered. You don't need to use the <th> tag, but it's a nice option.

Code
<table> <tr> <th> Heading 1. </th> <td> This is square 2. </td> </tr> <tr> <td> This is square 3. </td> <td> This is square 4. </td> </tr> </table>

What you see

Heading 1.	This is square 2.
This is square 3.	This is square 4.