Dreamweaver MX Tutorial
Created and designed by Vivienne Trulock for ilikecake, 2005
Tables
Tables have columns and rows of cells that can contain text, images, forms, or other page elements. Tables should only be used to arrange data systematically. To quickly create a table with the same number of cells in each row and column, using mostly default settings, follow the procedure below.
Exercise - insert a table
In Dreamweaver, click 'Insert Table'.
A new window will appear where you can set the number of rows and columns,
the size of your table in pixels or percent, whether you want a border
or not and the cell padding and spacing.
Experiment with the different settings - try different sizes of borders, paddings and spacings to get a feel for the different table attributes each of them affect. Cell Padding is the amount of white-space inside the border of a particular cell. Cell Spacing is the amount of white-space between particular cells.
Table Properties
When a table is selected, the properties window shows the properties
of that particular table.
Rows and Columns
The number of rows and columns can be changed here.
Width and Height
A table can have either an absolute width and height, measured in pixels,
or a relative width and height, measured in % of browser window. A table
with a width of 100 pixels will always be rendered as 100 pixels wide,
and so will appear smaller on monitors with a higher resolution. A table
measured as 50% width will always take up 50% of the available
horizontal space, regardless of resolution.
These buttons allow you to quickly clear the cell and table widths and
heights, and convert between the pixels and % regarding table widths and
heights.
NOTE: tables shoulD always use relative sizing (%) so that users can see the table contents no matter what resolution they have or what size they have their browser window set to. Absolute sizing (pixels) reduce user control.
Cell Padding and Spacing
Cell padding is the distance in pixels, inside a cell, from the cell edge to the point where the text begins. Cell spacing is the distance in pixels between individual cells. Both these options are used to space out text and images.
Table Alignment and Borders
Tables can be given basic alignments of default, left, right and centre.
A table border value is the number of pixels the table's border will be
shown as. For an invisible table, set the border value to 0.
NOTE: the align attribute as used in the table tag (<TABLE align="">) has been deprecated. The style sheets method of aligning tables is preferred.
Background and Border Colours
A table can have a background colour and a border colour. Either type
a hexadecimal value into the space, or click on the square box and select
a colour from the palette.
NOTE: the bgcolor attribute has been deprecated. style sheets should be used to specify background colours for all elements
NOTE: the bordercolor attribute is not a standard attribute and therefore should not be used. style sheets should be used to specify border colours for all elements
Background Images
A table can have a background image attached. Just select the folder
icon and browse to find your image file. As with page background images,
table and cell background images tile. Careful use of this is necessary.
NOTE: the background attribute as used in the table tag is not a standard attribute and therefore should not be used. style sheets should be used to specify background images for all elements
Table Cells
Table cells have their own properties window, similar in many ways to the text properties window, but a little bit different.Cell Properties Window
When a cell is selected, the properties window shows the properties of that particular cell. The top half is identical to the text properties window.
Merge and Split Cells
You can use these buttons to merge and split cells.
Cell Alignment
You can set the horizontal and vertical alignment of cells. This is the best way to align content. The horizontal alignment can be either default, left, right or centre. The vertical alignment can be either default, top, middle or bottom. Default in cases is left-middle.
Width and Height
As with tables, it is possible to set the width and height of a cell here in pixels or %. Remember, a cell may default to the size of it's neighbour. Also, cells will expand to accommodate wider or taller content without changing its width and height property settings.
NOTE: width and height attributes as used in table cells is deprecated. Style sheets should be used to specify cell sizes.
Wrap and Header
You can set the text to wrap around or not. If wrap is turned off the text will push the cell width outwards. If a table is a data table use the header checkbox to denote header cells. Header cells are automatically bold and centered. Screen readers need to know if a table is a data table or layout table in order to make sense of the content. Correct identification of header cells helps this. 
NOTE: the use of the nowrap attribute is deprecated. style sheets should be used to achieve wrapping effects.
Background Image
You can assign a background image to a cell. This is different to a background
image assigned to the whole table. Again, this background image will tile.
NOTE: the background attribute as used in the table cell tags is not a standard attribute and therefore should not be used. style sheets should be used to specify background images for all elements
Background and Border Colours
As with tables, you can also set the background and border colors of
a cell. The cell properties take priority over table property settings.
NOTE: the bgcolor attribute has been deprecated. style sheets should be used to specify background colours for all elements
NOTE: the bordercolor attribute is not a standard attribute and therefore should not be used. style sheets should be used to specify border colours for all elements
Irregular Tables
You can quickly create a data table with irregular rows and columns, like the table shown above, in two ways - using either the 'Split Cell' or 'Merge Cell' options.
Exercise - irregular tables using 'Split Cell'
Create a table with 1 large cell on the left, and 3 rows on the right
by creating a table with 2 columns and 1 row. Click inside the right-most
cell and click on 'Modify > Table > Split Cell'.
Select 'Rows' and enter '3' for the number of rows. Click 'OK'
Exercise - irregular tables using 'Merge Cell'
Create a table with 1 large cell on the left, and 3 rows on the right
by creating a table with 2 columns and 3 rows. Select the three cells
in the left-most column and click on 'Modify > Table > Merge Cells'.
Exercise
Make the following data table using the join and split tools, header checkbox and italic buttons.
| Product Information | |||
|---|---|---|---|
| Merchandise | Description | ||
| Type | Product | Purpose | Standard Term |
| Joining Tools | Binder 1.0 | Join multiple objects | Stapler |
| Organizer 2.2 | Join multiple objects for easy access and changing | Ring binder | |
| Combiner 0.9 | Join multiple objects at the edges | Tape | |
| Dividing Tools | Splitter 3.2 | Divide single object into multiple smaller objects | Scissors |
.