1. Unit 17: Website Production
Tables
Making a simple table Layout
There are many ways in which we can design layouts. These include AP Divs
and frames. We are going to use a simple table layout to create our websites.
1. Create tables by placing your cursor where you wish to insert the table
and selecting ‘Insert > Table’.
2. Select the number of Rows & Columns you require for your design. Set
the width of your table, and set the ‘Border thickness’ to ‘0 pixels’ to
ensure your boundaries are invisible.
Page | 1

2. Unit 17: Website Production
3. You can alter the sizing of your tables in the properties panel. Cell
Padding adjusts the amount of space between the border and the cells.
This gives a visual ‘breathing space’ in your layouts. Cell Spacing is the
space between each cell. Use with caution when designing with tables
to avoid excess white area.
Selecting Tables
 Selecting a single cell – click and drag within the cell or, if the cell is
empty, triple left click.
 Selecting non-adjacent cells – hold down the CTRL key (CMD on a mac)
and click the related cells, rows or columns.
 Selecting tables – click on the upper left corner, or the bottom right
edge. The resize handles will appear allowing you to adjust the sizing
‘on the fly’.
Page | 2

3. Unit 17: Website Production
 Selecting rows and columns – place your mouse over the edge of the
row or column until you see a thick, dark arrow appear; click to select,
or hold and drag to select multiple rows/columns.
Merging & Splitting Cells
You can break down and combine cells using Dreamweaver. To merge cells,
select your cells and click the merge cell button in the ‘Properties’ tab; to
split cells, select the cell you wish to split and click the relevant button on
the ‘Properties’ tab.
Adjusting Alignments
You can align your tables and cells using the ‘align’ options in the
‘Properties’ tab.
Unique cells will allow you to alter both the horizontal and the vertical
alignment.
Page | 3

4. Unit 17: Website Production
Page | 4