Untitled Document

Inserting a Table

Home | Resume | Philosophy | Dreamweaver

A tables function is container for the content of your web pages. Tables prevent your text and images from moving around with different browsers. They will also allow you to control the information with tables you can see or ones that are invisible. Invisible tables allow you to create unique layouts with out it looking like a grid.
(ex. All content in this tutorials's web pages is controlled with invisible tables.)

We are going to learn about tables on a new page.

Step 1 - Create a new page by clicking "File"at the upper left of the screen, then "New..."

Note: This section can be used to load a variety of templates.
These topics and templates will be addressed in future turtorials.

Step 2 - Select "Basic Page" and "HTML".
Click the "Create" button to cteate the blank page.

Now you should have the pages "index" and "Untitled-2" open.

Note : The "untitled-#" pages are the default file names.

You can verify this by looking at the page tabs at the lower left part of the screen.

Step 4 - Click the "index" tab to display the index page.
The page being displayed will be white colored tab.
The other page behind will be a tan colored tabs.

Try: Click between the two tabs.
Note: This is useful when working on multiple pages at the same time
and for comparison between them for consistancy in pages.

Step 5 - Locate the Insert Table button at the top of the screen.

Step 6 - If you see the table button continue to Step 3.

Click the "Insert" tab to display item types that can be inserted.

Click on the "Common" tab to display the common items that are inserted.

Click on the "Table" button to insert a table.

Step 7 - Specify the size of the table.

Rows 2
Columns 1
Width 700 pixels
Border 0
Cell Padding 0
Cell Spacing 0

Click "OK" to insert your table.

Well Done!

Step 8 - Locate the Table Properties that appear at the bottom of the screen while the table is selected.

Bg Color - Background color of the table. Click box to change color.

Brdr Color - Border color of the table. Click box to change color.

Bg Image - Background Image for the table. Click folder to select image.

Step 9 - Center the Table on the page by using the "Align" drop down menu and change "Default" to "Center".

Step 10 - Practice selecting the table.
Click on the page out side of the table.
Now to reselect the table place the mouse on the table border and click when the icon changes.

The mouse icon will change to:
on the top side of the table
on the right side of the table.
on the bottom side of the table.

The image below shows what the mouse will look like at the proper points, along the border,
that when clicked will select the table.

Note: The table can not be selected for the left side of the table.

Step 11 - Adjust these properties for your table:

Change the border color to green.
Increase the border size to 4.
Save the page and name it "Page1.htm".

Step 12 - Preview the page in browser

Well done!
You now can insert, select and modify a table in Dreamweaver XP.

Back Next

Inserting a Table Home \| Resume \| Philosophy \| Dreamweaver Welcome setup text images table cells Back Next
A tables function is container for the content of your web pages. Tables prevent your text and images from moving around with different browsers. They will also allow you to control the information with tables you can see or ones that are invisible. Invisible tables allow you to create unique layouts with out it looking like a grid. (ex. All content in this tutorials's web pages is controlled with invisible tables.) We are going to learn about tables on a new page.

Step 1 - Create a new page by clicking "File"at the upper left of the screen, then "New..."
Note: This section can be used to load a variety of templates. These topics and templates will be addressed in future turtorials. Step 2 - Select "Basic Page" and "HTML". Click the "Create" button to cteate the blank page.
Now you should have the pages "index" and "Untitled-2" open. Note : The "untitled-#" pages are the default file names.
You can verify this by looking at the page tabs at the lower left part of the screen. Step 4 - Click the "index" tab to display the index page. The page being displayed will be white colored tab. The other page behind will be a tan colored tabs. Try: Click between the two tabs. Note: This is useful when working on multiple pages at the same time and for comparison between them for consistancy in pages.
Step 5 - Locate the Insert Table button at the top of the screen.
Step 6 - If you see the table button continue to Step 3.
Click the "Insert" tab to display item types that can be inserted.
Click on the "Common" tab to display the common items that are inserted.
Click on the "Table" button to insert a table.
Step 7 - Specify the size of the table.
Rows 2 Columns 1 Width 700 pixels Border 0 Cell Padding 0 Cell Spacing 0 Click "OK" to insert your table.
Well Done!
Step 8 - Locate the Table Properties that appear at the bottom of the screen while the table is selected.
Bg Color - Background color of the table. Click box to change color. Brdr Color - Border color of the table. Click box to change color. Bg Image - Background Image for the table. Click folder to select image.
Step 9 - Center the Table on the page by using the "Align" drop down menu and change "Default" to "Center". Step 10 - Practice selecting the table. Click on the page out side of the table. Now to reselect the table place the mouse on the table border and click when the icon changes. The mouse icon will change to: on the top side of the table on the right side of the table. on the bottom side of the table. The image below shows what the mouse will look like at the proper points, along the border, that when clicked will select the table.
Note: The table can not be selected for the left side of the table.
Step 11 - Adjust these properties for your table: Change the border color to green. Increase the border size to 4. Save the page and name it "Page1.htm".
Step 12 - Preview the page in browser
Well done! You now can insert, select and modify a table in Dreamweaver XP.

Back Next