Lesson 20 ª

 

 

 

 

 

   

Adding colour to our tables

We have already mentioned that the most important web pages are organized in tables. It is also common to compose our pages with tables inside other tables. Let's learn how to colour the lines of our tables and how to colour the inside of them as well.

For our example, we will begin with a table with 1 Column and 4 Rows with invisible lines. In other words, we need a table with '0' border.

  1. we click on Insert on the toolbar and then Table.
  2. on the Insert Table box, we type in 4 in Rows and 1 in Columns. In our example, we select the "Width" as 50 percent.
  3. we click on OK.

This is the result in the design view of Dreamweaver. Remember, a hidden table won't be seen by the viewers.

Now, let's add some colour to our table. For example, we will make the first cell blue and the rest green.

  1. Place the cursor inside the first cell. If we can't see the floating menu, we activate it on the toolbar with Window and Properties. We should have this image:

If the bottom part is not visible, we need to click on the triangle located on the lower right-hand corner.

  1. We click on the icon corresponding to Background Colour Bg. Then, we select the colour for the inside of the first cell. In our example, we want blue.

This is the result in the design view of Dreamweaver.

And this is the view from the browser:

 
 
 
 

Now, we will add colour to the rest of the cells.

  1. We mark the cells by placing the cursor on the first, clicking on the left button of our mouse and keeping it pressed, we move to the last.

  1. We click on the Background colour icon. Sometimes, we are looking for a colour which doesn't appear on the first colour chart we get by default. To choose a more precise colour, we click on the colour circle (see image below).

This brings up the Colour box, which allows us to select our colours in a more specific manner. We can also choose the intensity of the colour by using the scroll bar on the right, just as you see in the image (on the right).

We select the colour by moving the cursor around until we reach the one we want. Then, we click on the mouse to select it. In our example, we have selected a yellow-green tone (seen in the image). Then, we click on Ok

And this is the view from the browser: