Dreamweaver Tutorials

Creating a basic table in Dreamweaver CS3 - Continued.

Before you start you may wish to know that the following can be viewed in QuickTime Video Format here: Beginners Dreamweaver CS3 Tutorial.

With what we have learned so far in these Dreamweaver tutorials is that  we can create a basic table and use it to display data in a uniformed type fashion, in fact if you have followed along you would be able to create a basic table lay out like so.

But with just a few little changes and two small images we could change the above into something a little more graphically pleasing like so.

This table contains the same data as the basic table but takes advantage of the control that Dreamweaver can add from the properties inspector.

If you wish to follow along with this tutorial you may wish to download the two background images that I have used to create the effect above, image 1 and image 2 , Download these images and save them to a folder on your hard drive ready to use in this next Dreamweaver tutorial, you may also like to copy the html code for the basic table so you can follow along, this can be found here.

If we take our boring plan table the first thing we are going to do is change the color of the header cells, rather than working on each cell in turn we are going to select each row, this will save time.

Click while holding down your Ctrl key in the top left cell, the whole cell will be selected and should look like this.

now move to the far top right hand cell but this time let go of the Ctrl key and hold the Shift key down and click, you have now selected the row, if you have done it correctly you should be looking at something like this.

With the entire row selected move to Dreamweaver’s property inspector ( if this is not visible hold down the Ctrl key and press F3 ) in the property inspector select the Header checkbox.

the text should turn bold and be displayed center, with the selection still in place enter the following color code into the bg color field #1D5476.

the color of the background should now change color, next we need to color the text, you may have to make the selection again, make sure that all the cells in the top row are selected and then enter this color code into the text color box #FFFFFF.

If all as been done correctly you should have something like this

Next it’s time to use those images that you downloaded, first make sure that no cells or rows are selected, we are going to use a slightly different technique this time to select rows, starting with the 2nd row hold the Ctrl down ( don’t let go till I tell you ) click in the left hand cell, then the click the center and finaly the right hand cell ( don’t let go of the Ctrl key yet ), move to the 4th row and click in each row and finally the 6th row, now you can release the Ctrl key, you should now be looking at something like this

In the Bg image field on the properties inspector click on the little yellow folder icon and navigate to the image called grid1.gif .

You table should have been transformed like so.

Now repeat the this on the remain rows number 3 and 5, but this time select image grid2.gif.

All that is left is for use to turn the bottom 3 cells into one long cell, again using the Ctrl key click in each of the bottom cells, once highlighted click on the merge cells button in the property inspector.

the entire bottom row should have now merged into one.