Introduction to Web Page Design : Tables Crib Sheet
Tables
Tables are a powerful tool for flexible page layout.
You will probably have met spreadsheets in programs such as Microsoft Excel or Lotus 123. Spreadsheets are essentially tables, which can provide dynamic calculations. In web page design, however, they are used for page layout.
A table is a grid of cells. Cells are created by defining rows and columns. To define a table, use the table tag:
<table>
A table's attributes include:
- Border = 2
- where the table will have a border of 2 pixels.
- Width = 200
- where the table will be 200 pixels wide
- Width = 100%
- where the table will stretch to fill 100% of the window size
- Height = …
- works for height in the same way as width
- Bgcolor = #000000
- where the background colour of the table is black
- Background = "img.src"
- where the table has the image "img.src" in its background
- Cellpadding = 10
- creates a space of 10 pixels around the contents of the cell
- Cellspacing = 10
- creates a space of 10 pixels within the borders of the table.
- NB cellspacing and cellpadding sound the same, but when you start to play about with them, you'll see the subtle difference between them.
- Nowrap
- Forces the table to stretch to the length of your text without it wrapping to the next line. Only used in exceptional circumstances
Next up come the rows. To define a new row, use the table row tag:
<tr>
Then inside each row, a cell can be formed. At a basic level, you must have the same number of cells in each row, since they make up the columns of the table. There are ways around this, which we'll come to. To define a cell, use the table data tag:
<td>
It is within table data elements (cells) that the contents of your table (text, images, etc) are placed.
Each cell must be closed: </td>
Each row must then be closed: </tr>
And the table itself should be closed when complete: </table>
The following code is a simple table
<table border=1 width=100>
<tr>
<td>Cell One</td>
<td>Cell Two</td>
</tr>
<tr>
<td>Cell Three</td>
<td>Cell Four</td>
</tr>
</table>
The table it produces looks like this:
| Cell One |
Cell Two |
| Cell Three |
Cell Four |
Rows and cells can all take the normal attributes such as width, height, bgcolor, align, and valign (vertical alignment within the cell - top, center and bottom). In IE, tables can also have their own background = "img.src" attribute, though this will break in Netscape 4.7
Cells within tables can be merged: in the above example, the above table's top row could be merged with table row attribute colspan:
<table border=1 width=100>
<tr>
<td colspan=2>Cell One </td>
</tr>
<tr>
<td>Cell Two</td>
<td>Cell Three</td>
</tr>
</table>
| Cell One |
| Cell Two |
Cell Three |
<table border=1 width=100>
<tr>
<td rowspan=2>Cell One </td>
<td>Cell Two</td>
</tr>
<tr>
<td>Cell Three</td>
</tr>
</table>
| Cell One |
Cell Two |
| Cell Three |
Once you have designed your table, you can place all normal inline and block-level elements within them, even further "nested" tables.