HTML - Basic Tables

The table may just be the most useful object in HTML authoring, but you probably won't realize it until you've studied Advanced Tables. But for now, we're just going to do some basic things with tables.

Tables use a variety of tags, just like lists do, only a little more complex. In total, there are three tag sets that comprise a table. The first is the table tags, <table></table>. Second, there's the table row tags, <tr></tr>. And finally, there's the table cell tags, <td></td>.

Each table contains table rows, and each table row contains table cells. You need to make sure the you have the same amount of table cells in every row, otherwise your columns won't line up. Tables can be difficult if not structured properly, here's an example:

<table border="1">
 <tr>
  <td>data</td>
  <td>content</td>
 </tr>
 <tr>
  <td>content</td>
  <td>data</td>
 </tr>
</table>

Here's what it displays:

data content content data

There are lots of attributes to specify in tables, so be extra careful. We'll start with the attributes for the table tag set. In the example above, I already showed you one, border="". And you already know how to use align="" and width="". The only other important attributes that you don't know are cellpadding="" and cellspacing="". Cellpadding refers to the amount of space between cells and cellspacing refers to the space inside the cells. Both of these attributes have numerical values, such as 1, 2, 3, 4.... If you don't specify them, the default for both is "2". So if you make the value "1", the amount of space will be smaller.

Attributes for the table row tag set <tr></tr> are align="" and valign="". Valign stands for vertical alignment. The values are "top", "middle", "bottom" and "baseline". The align and valign attributes within <tr></tr> control the alignment of the text in that table row.

The basic attributes for the table cell tags <td></td> are much the same as the table row attributes. The only difference is that by using attributes at the cell level, you have a lot more control over each individual cell. The basic attributes are align="", valign="", width="" and height="". By now, using these attributes should be a piece of cake. Try making some tables of your own below.

Practice

If you think you're ready, move on to Advanced Tables.

Introduction | Basic Formatting | Images | Linking
Additional Formatting | Lists/Bullets | Basic Tables
Advanced Tables | Forms | HTML Cheat Sheet