TEC home
Web home
Page/site design
- basic principles
- good/bad examples
Basic html
- tutorial
- resources
Netscape Composer
- tutorial
- resources
Dreamweaver
- tutorial
- resources
Uploading and downloading
- setting up your mason account
- basic procedure
Web assignments
- general
- design and navigation
Dreamweaver Tutorial – Creating Tables
To Create a Table for Data
1. Click Table Icon on Toolbar (or go to insert, and then table)
2. Enter Data
3. Click OK, and then enter desired text.
(This table is set up, for example, to have 5 rows for the days of the week
down the left and two rows on the top for office hours and class hours--top left cell is open.
Adjust number of rows and columns for your specific information. As you add information, the cells
will expand to fit info.)
5. To edit a table once it is created, right click on the table and then select properties. The table
panel will open up in the properties panel.
Dreamweaver contains some preset table formats that can be applied to a table once it is
initially built. These allow you to designate preset colors, or designate your own colors.
1. Select the table.
2. Go to the Commands menu then select Format Table to get this dialog box:
3. Select presets from the scrolling menu on the left.
4. Click Apply.
To Create a Table for Basic Layout
Layout view in Dreamweaver allows you to draw, move, and edit table cells. It enables you to draw/design your layout right into
the document design window.
1. Click View on the bottom of the Common Toolbar.
2. When you turn on Layout view, the two buttons under Layout become active. The one on the left
allows you to draw a table cell, the one on the right allows you to draw a table.
3. Select the Draw Layout Cell button.
4. Draw desired cells for menus, banners, and content with the cursor. When you draw a cell,
Dreamweaver automatically creates the table to house it. Start with a cell down the left, and then click the
Draw Layout Cell button again to draw the cell across the top for a banner. The remaining third cell is for content.
5. Placing the cursor over the edges of the cell will change it from blue dashes to solid red.
This allows you to click on the cell and makes solid blue resize handle appear. Adjust cells appropriately for your purpose.
6. To edit a cell's properties hold down the Ctrl button and click on the cell (on the MAC it is command-click).
This bring up the cell's properties in the property panel.
This allows you to change the cell width and height, select a background color for the cell, or designate
the horizontal or vertical allignment of the text inside the cells. (NOTE: It is often good to make the height 0 pixels
if you wish it to extend down the page as you add in content).
7. To add in content to the cell once they have been created, go back the the standard view. Click the Standard View
botton on the left under View in the Common panel, or go to View across the top, select table view, and then standard view.
8. Click in a cell to type in or add content.
