Copyright Michael Karbo, Denmark, Europe.


  • Next chapter.
  • Previous chapter.


    Chapter 12. Introduction to the tables

    Basically you do not need to know very many HTML codes to enable you to make home pages. One of the most important is the TABLE code, which is used for tables.

    Tables can be used for a lot of different things, and they are really indispensable. At the same time the table codes are somewhat complicated to understand, so we need to spend some time studying them.

    What is a table?

    You surely know of tables from many different contexts; I use them here in the book, and they are used in newspapers and magazines. A table can organize a text in a number of rows and columns. In HTML we do not use the term columns, in stead we call them cells.

    Each row can consists of a number of cells; below you see three rows with two cells:

    Figure 30. A simple table with three rows each having two cells.

    Try for yourself

    To understand the construction and function of tables it is easiest simply to construct a table and experiment with it:

    1.   Open the HTML document template2.htm. Save it right away in the test folder under the new name: tables.htm.

    2.   Place the cursor in the BODY section under the H1 codes.

    3.   The HTML library has a section called Table Elements. Here you need to find the clip Table wizard (simple) and select that:

    4.   Activate the clip either with a double click or by pressing Control+Space. This clip opens a very simple small dialog box, where you just need to indicate how many rows and cells (columns) you want.

    5.   You need two rows and two cells, which is the default value suggested in the dialog box. So then click OK or press Enter:

    6.   That inserts a lot of code right away in your document:

     

    7.   This code needs an explanation, but start by seeing it in action: Enter the four digits 1, 2, 3 and 4 as shown below:

    8.   The ”empty characters” right after the numbers mean nothing. You need to be aware of this: spaces following completed texts (like in the figure above) can be without meaning in a HTML document.

    9.   Save the document and test it in the browser. Now you can see the four digits each in their own cell, right?

    Figure 31. A table with four cells in two rows.

    The TABLE code

    Let us now quietly look at the code, which is in the table. See Figure 32 where I have numbered the code lines.

    1.   The code is spread over 10 lines. The first line reads:

    <TABLE BORDER="1" WIDTH="80%">

    2.   This is the start code. Do you see a corresponding end code in line 10?

    3.   However, the start code is expanded with two parameters. Firstly it reads BORDER="1". This means that there is a one pixel wide border around the table.

    4.   Try to change that to BORDER="0". Save the document and test the page in the browser. Now there is no border around the cells, right?

    5.   Then try BORDER="10"; that results in a big fat border. Change the code back to BORDER="1".

    6.   The next parameter reads WIDTH="80%". That is quite important; it indicates that the table shall occupy 80% of the width of the browser window. So that is a relative measure, as we have talked about before.

    7.   Try to scale the window size up and down. Each time you alter the window width the table width changes, so it still occupies 80%. Can you see that? Look at Figure 31; that is not a wide window, and neither is the table.

    8.     Try to delete the code WIDTH="80%". Save the document and test the page in the browser. Now there is not much room left in the table:

     

    9.   When you do not specify the table width, it will adjust itself to the text in the cells. Here there is only one character in each cell; consequently the cell width gets very limited.

    10. You can also specify absolute measures (in pixels). Try to enter WIDTH="200". Save the document and test the page.

    11. Try to change the window width, and notice the width of the table. It remains the same regardless of the window size. The table is 200 pixels wide, and it will remain that regardless of how big the window is.

    Figure 32. These ten lines with code make a table. The line numbers are entered to facilitate the reading.

    Table Row and Data

    Let us continue with these TABLE codes. See Figure 32. Line 1 has the start code, which gives a broad definition of the table. Lines 2, 3, 4 and 5 give the first group of data:

    1.   That starts in line two with the code TR. That stands for Table Row. The code indicates that a row is started now. Notice the end code that belongs in the same row; you see that in line five.

    2.   Between the two TR codes come the Table Data codes (TD); They are seen in lines three and four.

    3.   Notice that you need both a start and an end code to form a cell. Everything between the two codes will appear in that cell. That could be text or a picture or something else.

    4.   In our example there are two data cells in each row, therefore there are TD codes in both line three and line four.

    5.   Try to insert an empty line below line four. Then select and copy line 4:

    6.   Insert the copy in the empty line. Save and test in the browser; now there are three cells in the first row, right?

    7.   That does not look very smart, so delete that line.

    Study the figure again. There is an empty space in the right side of row two, can you see that? That should have been a cell, but it is not since you only inserted the TD codes in the first row.

    If you need a cell in the second row, then the TD codes need to be copied under the second TR start code (as under line 8 in Figure 32), since you need the same number of TD codes in each row.

    It is important that you know the structure in a table. This is somewhat technical but still not hard to remember. There are three types of codes in any table, as you see in Figure 33:

    Start code

    Significance

    Final code

    <TABLE>

    Here comes a table.

    </TABLE>

    <TR>

    Table Row. A row.

    </TR>

    <TD>

    Table Data. A cell.

    </TD>

    Figure 33. The three basic codes that are used in any table.

    Since a table often has more than one row, you will see the TR codes repeated over and over. As an example in Figure 32 there der TR start codes in line two and 6. Since there often are multiple cells in a given row, there will also be multiple TD codes within each row definition (like in line three and four).

    Besides: If you want to divide a cell in more smaller cells, you need to insert a table in the cell. But you have to experiment with that by yourself!


  • Next chapter.
  • Previous chapter.


  • HTML Tutorial Overview.

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