Background
Web Development has seen many changes since it became a mainstream profession in the last 15 years or so. One of the changes is that building with tables has moved, from being the standard, to take a back seat to Cascading Style Sheets (CSS). One of my students commented that she couldn't get a job with a professional development company because she builds with tables.
While there are many excellent reasons to build with CSS, there are still many reasons to build with tables. The following information is about tables, in case you should choose to use them!
About Tables
Tables tell the browser where to put web page elements on the screen. Tables provide the layout structure, similar to walls in a building. Unlike walls, on most pages, the viewer can't tell what the table structure is because the borders are set to 0. How the table is shaped depends entirely on its properties; so, learning how to build with tables means learning how to use the table properties.
The following is a demonstration of some of the properties (tools)
you can use to build your tables.
Tool
1: Table rows, columns and cells
All tables have at least one row, one column and one cell. Everything
in a table must be placed inside a cell. If the table only has one
cell, it may appear not to have any rows or cells.
All the table properties listed below affect
the whole table; so if you want a table property to affect only
one cell, you put a table inside a cell and give it its own properties.
This is called nesting tables. If your structure
has rows or columns of many different sizes, you will need to use
nested tables.
| This table has one row and two cells. |
This table has a border of one. |
| This
table is the same as the one above, except that it has a table
border of 5. Notice that the cell border stays at 1. |
Tables stretch
to fit the tnings in them. The only reason this table is taller
than the table above is that there is more text in it. |
Tools so far:
- Table rows, columns and cells.
- Nested tables.
Tool
2: Table borders
All tables have borders, but since you can set the width from 0
to X pixels, the tables are invisible on most sites. The example
page linked above has all the borders "turned on." That
means that the tables have been given a border value of more than
0. When you turn the borders on, the cells inside the table will
have borders too. Cell borders are one pixel wide no matter what
you set the table border size is.
If you want the table border to show,
but not the cell border:
- Create a table with one row and one column.
- Set the table border to the desired width.
- Insert another table in the cell with the
desired number of rows and columns.
- Set the borders of the nested cell to 0.
| 1. This structure
is built with two tables. |
3. The inner table
has two rows and two columns. |
| 2. The outer table has one row
and one column. |
4. The outer table has a border
of 5. The inner table has a border of 0. |
|
