Tables

Web tables allow you to create fairly complex pages, but tables themselves are basically quite simple. The tag is ‘table’, and just like any other tag, you surround the text you’re putting in the table with ‘<table>’ and ‘</table>’.

You should be careful with tables. They’re so simple to create, you can easily make a web page that can’t be read by anyone but you. Remember that there are lots of different web browsers out there, some of them that don’t even use computer screens. Simpler is almost always better!

Table Rows

HTML tables are made up of ‘rows’ and ‘columns’. You’ll almost always work with them by row rather than by column. Within the <table> and </table>, you’ll surround your rows with <tr> and </tr>. You can specify the alignment of the text in that row with ‘align=’ left, right, or center. You might also need to specify the up/down alignment. By default, text is centered up and down, so that if you have three columns, and one column has three lines and the other two have one line, the line in the one-line cells will be in the center of the cell. Specify ‘valign=’ top, bottom, or middle to specify the vertical alignment of the cells in this row.

Table Cells

There are two types of table cells: headers and data. Headers tend to be marked off with bold and special alignment, where data is just normal text. You can specify the ‘align’ or ‘valign’ of your cells just like you can the rows. The alignment of a cell takes precedence over any alignment specified for the row the cell is in.

The tag for a header cell is <th> and </th>. The tag for a normal ‘data’ cell is <td> and </td>.

Sample

Here’s a simple table that corresponds fruit to colors:

<table>
<tr><th>Fruit</th><th>Color</th></tr>
<tr><td>Apple</td><td>Red</td></tr>
<tr><td>Orange</td><td>Orange</td></tr>
<tr><td>Lemon</td><td>Yellow</td></tr>
</table>

It produces a table that looks like:

Table Borders

By default, your tables have either no visible border, or small visible borders, size ‘1’. You can specify a ‘border’ of ‘0’ to have no visible borders, or a ‘border’ of ‘1’ or greater for borders of increasing thickness.

<table border="0">

Aligning Your Tables

You can align your tables with ‘left’ and ‘right’. A left-aligned table appears on the left of the computer screen. Text wraps around it on the right. A right-aligned table appears on the right of the computer screen. Text wraps around it on the left.

Here’s a table that is set off to the right, with thicker borders:

<table align="right" border="3">
<tr><th>Fruit</th><th>Color</th></tr>
<tr><td>Apple</td><td>Red</td></tr>
<tr><td>Orange</td><td>Orange</td></tr>
<tr><td>Lemon</td><td>Yellow</td></tr>
</table>

Table Width

If you need your table to take up a specific amount of the screen, you can specify the ‘width’ of the table to be a certain percentage. A table tag that says “<table width="100%">” will span the entire width of the computer screen, whereas “<table width="33%">” will take up a third of the computer screen.

You can do the same thing to your cells: <td width="50%"> will make that cell take up half the table’s width. All cells in any column must be the same width! (There are special ways around this, but that’s for a more advanced lesson.) So, you can’t specify that the first cell in row one is 50% of the table width, and then specify that the first cell in row two is 33% of the table width. The browser will have to ignore one of them.