Tables
- 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