Tables are a legacy option (older method) for positioning elements on your HTML pages. All browsers, even out of date ones, can handle tables. They can contain any content inside their cells (text, images, etc.)
1. Create a new blank HTML document.
2. From the 'Insert' menu, choose Table.
3. In the dialog box, set the number of columns and rows you want to create, and the width of the table.
If you wish the table to have visible borders, set a value other than 0 in the border thickness field.
If you wish the table to be 'invisible' (as a 'scaffolding' for visible elements) set the border thickness to 0 pixels.
Example: A table with three columns, two rows, border=2
4. For now, ignore the rest of the fields, and click OK.
Now select your table by clicking on it's edge. You will see heavy control points appear on the right, bottom right, and bottom of the table.
5. In the Properties panel, experiment with modifying the various options.
Example: Here is a table that has been given a background color of #CCC, Cellpad (the padding inside the cell)=5, Cellspace(the margins surrounding the cell)=10
| This is a cell | ||
You can also select individual cells, or groupings of cells in the table, and modify them.
6. Click inside a cell, or shift-click on a range of cells, and modify the cell properties in the properties panel. You can also join a range of selected cells by clicking on the 'Merges Cells' button on the lower left of the Properties panel.
Example: Here is the same table that has had it's top row merged into a single cell, with the cell assigned the color #000
| This is a range of cells that have been merged. You can also split cells into rows or colums with the 'split' button | ||
Notice that modifications to the entire table, selected ranges of cells, or indidual cells can be performed in the Properties panel, depending on what is selected.
Here is a table with 2 columns, three rows, no background color, border=0, cellpad=2, cellspace=5. The cells have been given different background colors by selecting the cells and assigning values in the Properties panel.
Watch how the curser changes when you hover it over a cell border. When it becomes a double-headed arrow, you can click and drag the column or row to modify it. The above table has had it's center dividing line dragged to the right.
Further modifications will be demonstrated in class.
Next: AP Divs