Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 13. Color and spacing in tables

    You can use back ground colors in the table or in individual cells. Try that:

    1.   Place the cursor in the end of the TABLE code and insert a space:

    2.   Now you need to use the clip Bgcolor:

    3.   That opens a dialog box, where you need to select a color. Try the color blue violet:

    4.   When you click OK, the code will be inserted:

    5.   Save the page and test it in the browser. Now you see a violet background color:

    6.   Since you placed the BGCOLOR code within the TABLE code, the whole table (meaning all the cells) gets this background color. But you can change that.

    7.   Place the cursor in the end of the first TD code and insert a space:


    8.   Use the clip Bgcolor again and try to select the color bisque.

    9.   Repeat the operation in the three other TD start codes, but select a new color for each cell. Select the colors burley wood, coral and dim grey for the last three cells. Now the code looks like this:

    10. Save the page and test it in the browser.

    You have indicated a BGCOLOR for each of the four cells, which then got different colors. The original violet color, which was indicated in the TABLE code, is seen in the border around the cells (here in black and white):

    Figure 34. A 200 pixel wide table, which is colored in five different colors. By default texts are left justified in the table cells.

    Spacing around the cells

    The last table parameters we will look at deal with spacing. Do you need some space between the cells or between cell border and content? Try this:

    1.   Place the cursor in the end of the TABLE start code and insert a space:

    2.   Now find the clip Spacing & Padding and insert that:


    3.   That adds two new parameters, each  with the value 0. that deals with the following coder: CELLSPACING="0" CELLPADDING="0"

    4.   Save the page and test it in the browser. Nothing has changed.

    5.   But now adjust the code to CELLSPACING="5" and test the result. Can you see that the border between the cells got wider? Actually it became five pixels wide.

    6.   Then adjust the code to CELLPADDING="10". Test the result in the browser. Can you see what happened? That is the distance inside the cell, between the border and the text (on all sides). It was increased to 10 pixels.

    7.   Adjust the code to CELLPADDING="25", and delete the code WIDTH="200".

    8.   Test the result in the browser.

    Enter the names of the colors

    Now you can enter texts with the names of the colors. You need one text in each cell.

    1.   Start in Cell 1. Select the number 1, which you see as text in the cell, press Enter to delete the number, and a blank line comes in.

    2.   Then enter:

    The back ground color is <BR>

    3.   Now you can ”push the two lines in with the Tab key. That has no bearing on the home page when it is shown in the browser, but it looks neat in NoteTab. Now the code looks like this:

    4.   Select the two new lines:


    5.   Make a copy with Control+c.

    6.   Now repeat that operation in the three other cells: delete the number that appears as text, and insert in stead the copy with Control+v.

    7.   Finally adjust the color names to
    burley wood, coral and dim grey respectively.

    8.   Then save the document.

    Now adjust the table width to the length of the texts in the cells. The 25 pixels padding is also clearly seen (see Figure 35).

    The two parameters CELL­SPA­CING and CELL­PAD­DING are really nice to know. In some situations it is valuable to be able to control the distance between the individual cells and from cell border to text or figure.

    Notice also that you can format text in a table like anywhere else. In this exercise you inserted a BR code in each cell, but you can also select other fonts etc. for the contents of the table.

    Finish the page

    Now you are going to finish the page completely.

    1.   Go to the line with the heading codes and adjust it this way:

    <H2>A table with four cells: </H2>

    2.   Save the page and test it in the browser..

    3.   If you have a color printer, you should print it on paper.

    4.   Close all open documents.

    Figure 35. The four cells are separated by a five pixel wide border, which is indicated by the parameter CELLSPACING. Inside the cell there is 25 pixels space between border and text. This spacing is indicated with the parameter CELLPADDING.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

  • Get the files for this tutorial (opens in a new window)