HTML 5 Table Basics

HTML5 Basics - Part 16

Forward: In this part of the series we look at the basics of HTML5 tables.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

Any information that you have in a grid form should be put in a table. An example of such information is the marks of students during an examination. This is an illustration of the arrangement of such marks:

            History  Math  Geography
John        75         60          70
Peter       50         55           80
Mary       54         62           73

In this example there are four rows and four columns. The first row has texts. The first column also has texts. A table can be made up of any number of rows and columns. Each item (word or number) above is said to be in a cell. So a table is made up of cells. Each cell can take numbers or text or both numbers and text.

In this part of the series we look at the basics of HTML5 tables. I assume you have read the previous parts of the series before reaching here. In this tutorial series, you should try all the code samples to really appreciate what is going on.

Note: If you cannot see the code or if you think anything is missing (broken link), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what has been typed.

Cells
A table is made up of cells. The following example shows how the cells can be identified:

Cell00 Cell01 Cell02 Cell03
Cell10 Cell11 Cell12 Cell13
Cell20 Cell21 Cell22 Cell23
Cell30 Cell31 Cell32 Cell33

This cell arrangement would receive the table of marks above. The number of rows here are the same number of rows above; and the number of columns here are the same number of columns above. In computing, counting begins from zero (not one). There are four rows in this arrangement. The rows are identified as row 0, row 1, row 2, and row 3. The columns are identified as column 0, column 1, column 2 and column 3. You do not have row 4 and column 4 here, since counting in computing begins from zero.

Each cell identifier above begins with the word “Cell” followed by two digits. The first digit is the row number and the second digit is the column number. Fitting the above table of marks into the cell arrangement, nothing would go into Cell00, “History” would go into Cell01; “Math” would go into Cell02, “John” would go into Cell10, “75” would go into Cell11, and “60” would go into Cell12, and so on, until “73” would go into Cell33.

The Code
In this section, we see the tags used to define an HTML5 table. The table element contains other elements. The table of marks in the introduction above, would fit into the following table element (see explanation below):

    <table>
        <tbody>
            <tr>
                <td> </td><td>History</td><td>Math</td><td>Geography</td>
            </tr>
            <tr>
                <td>John</td><td>75</td><td>60</td><td>70</td>
            </tr>
            <tr>
                <td>Peter</td><td>50</td><td>55</td><td>80</td>
            </tr>
            <tr>
                <td>Mary</td><td>54</td><td>62</td><td>73</td>
            </tr>
        </tbody>
    </table>

The TABLE element above has what is called the TBODY (table body) element; it has TR (table row) elements, and TD (table data) elements. The TD element contains the item you see at the browser. The table tag name is “table” in lower case; the table body tag name is “tbody” in lower case; the row tag name is “tr” in lower case and the table data tag name is “td” in lower case. Each of these elements has a start and end tag.

There is only one table, so there is only one table element. There are four rows in the table, so there are four TR elements. Note that there are no column elements. Columns are defined as you place TD elements as content for the TR element. There are four columns, so each TR element has four TD elements. Each item in the table of marks at the introduction above is content to a TD element.

You must have noticed the content, “ ” in the TD element of cell00. “ ” is the character entity for a space (pressing spacebar key once).  In theory, no TD element should be left without content. Note that we did not have to put any item in cell00. In theory, if you leave a TD element without content, the TD element will collapse; this means that at the browser, you will not see the area occupied by the TD element. So in theory, any TD element without content must have, “ ”. In this way TD elements without content will have the area of one character space at the browser. In practice, if in a row or column, you have “ ” in one of the TD elements and the rest of the TD elements in the row or column do not have any content, then all the cells in the row or column will display a one-space character area at the browser.

Now, try the above code with the following HTML5 document:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td> </td><td>History</td><td>Math</td><td>Geography</td>
            </tr>
            <tr>
                <td>John</td><td>75</td><td>60</td><td>70</td>
            </tr>
            <tr>
                <td>Peter</td><td>50</td><td>55</td><td>80</td>
            </tr>
            <tr>
                <td>Mary</td><td>54</td><td>62</td><td>73</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

The TH element
In the above table, you may want to have the items for the first row (History, Math, etc.) and the items for the first column (John, Peter, etc.) automatically bolded. To achieve this, replaces the TD elements for the first row and column with the TH elements. The syntax for the TH element is

                 <th>Content</th>

Here, tag name is in lower case; start and end tags are required. Try the following code that has the replacement:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <th> </th><th>History</th><th>Math</th><th>Geography</th>
            </tr>
            <tr>
                <th>John</th><td>75</td><td>60</td><td>70</td>
            </tr>
            <tr>
                <th>Peter</th><td>50</td><td>55</td><td>80</td>
            </tr>
            <tr>
                <th>Mary</th><td>54</td><td>62</td><td>73</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Wow, table designing is not as difficult as some thought. It is actually easy. Read on.

Border
You can separate all the cells at the browser with border. To achieve this, just add the attribute, border in the start tag of the table element as follows:

    <table border>

The border attribute can optionally take a value. Here it does not take a value. Modify the start TABLE tag in the above code with the border attribute and redisplay the HTML5 document (in your browser); avoid making a mistake, because if you make a mistake, you either will not see any table at all, or you will see scattered text.

Cell Spacing and Cell Padding
Cell spacing is the space between cells. Cell padding is the space between cell content and its borders. You can control the amount of cell spacing and cell padding you want. To do this, use the cellspacing and cellpadding attributes correspondingly. You do not have to use both attributes in a table. If you do not use any of these attributes, the browser chooses a value for you, as in the above HTML5 document. If you want a cell spacing of 8 pixels you would add the following to the table start tag:

             cellspacing="8"

A pixel is the size of the smallest dot of the screen. The cellpadding attribute is similarly declared and assigned. In the following code, you have a cell spacing of 8 pixels and a cell padding of 8 pixels. Try the code.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table border cellspacing="8" cellpadding="8">
        <tbody>
            <tr>
                <th> </th><th>History</th><th>Math</th><th>Geography</th>
            </tr>
            <tr>
                <th>John</th><td>75</td><td>60</td><td>70</td>
            </tr>
            <tr>
                <th>Peter</th><td>50</td><td>55</td><td>80</td>
            </tr>
            <tr>
                <th>Mary</th><td>54</td><td>62</td><td>73</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Row Span and Column Span
You may want to join more than one cell in a row (column spanning) to put an item that is horizontally long. If you want to join two such cells, you use the colspan attribute with the value, 2. You put this attribute in the start tag of the first of the two TD elements; then you omit the next TD element. Try the following code, which spans Cell21 and Cell22.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table border>
        <tbody>
            <tr>
                <td>Cell00</td><td>Cell01</td><td>Cell02</td><td>Cell03</td>
            </tr>
            <tr>
                <td>Cell10</td><td>Cell11</td><td>Cell12</td><td>Cell13</td>
            </tr>
            <tr>
                <td>Cell20</td><td colspan="2">Long Cell21</td><td>Cell23</td>
            </tr>
            <tr>
                <td>Cell30</td><td>Cell31</td><td>Cell32</td><td>Cell33</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Note that the TD element (and its content) for Cell22 in the code is omitted. For this example, we say two columns have been spanned; actually two cells have been spanned in a row.

To span a number of columns, which means spanning a number of cells in a row, omit the number of TD elements to be spanned in the row, except one. In the one TD element, go to the start tag and add the colspan attribute. For the value of this attribute, type the number of cells spanned. Note the colspan attribute in the above example. The syntax for the colspan attribute is

                 colspan="number"

Let us now look at row spanning. You may want to join more than one cell in a column (row spanning) to put an item that is vertically long. If you want to join two such cells, you use the rowspan attribute with the value, 2. You put this attribute in the start tag of the first of the two TD elements; then you omit the next TD element. Note here that the two TD elements have to be in different rows but in the same column. Try the following code, which spans Cell02 and Cell12. There is no column element as we have the row element, so in your code, you have to figure out the cells that are in the same column.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table border>
        <tbody>
            <tr>
                <td>Cell00</td><td>Cell01</td><td rowspan="2">Long <br>Cell02</td><td>Cell03</td>
            </tr>
            <tr>
                <td>Cell10</td><td>Cell11</td><td>Cell13</td>
            </tr>
            <tr>
                <td>Cell20</td><td>Cell21</td><td>Cell22</td><td>Cell23</td>
            </tr>
            <tr>
                <td>Cell30</td><td>Cell31</td><td>Cell32</td><td>Cell33</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Note that the TD element (and its content) for Cell02 in the code is omitted. For this example, we say two rows have been spanned.

To span a number of rows, which means spanning a number of cells in a column, omit the number of TD elements to be spanned in the column, except one. In the one TD element, go to the start tag and add the rowspan attribute. For the value of this attribute, type the number of cells spanned. Note the rowspan attribute in the above example. The syntax for the rowspan attribute is

                 rowspan="number"

Cell Width
You can give a cell a width in pixels. To achieve this you use the width attribute. The browser always gives the same width for all the cells in a column. So if you give different widths for different cells in the same column, the browser would not know what to do. Now you can indirectly give the width of a column by giving the first cell in the column a width value. The browser will use this width value as the width of the column. The syntax for the width attribute is

                  width="number"

In the following code the second column has a width of 100 pixels. Try it.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table border>
        <tbody>
            <tr>
                <td>Cell00</td><td width="100">Cell01</td><td>Cell02</td><td>Cell03</td>
            </tr>
            <tr>
                <td>Cell10</td><td>Cell11</td><td>Cell12</td><td>Cell13</td>
            </tr>
            <tr>
                <td>Cell20</td><td>Cell21</td><td>Cell22</td><td>Cell23</td>
            </tr>
            <tr>
                <td>Cell30</td><td>Cell31</td><td>Cell32</td><td>Cell33</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

If you do not give any cell a width value, the browser uses the width of the widest content in the column as the width for contents of all the cells in the column.

We have covered the basics of HTML5 table. You can imagine your own tables; design and try them. Avoid making mistakes in your code. If you make a mistake, you may not see any tables at all, or you may see scattered text.

We take a break here and continue in the next part of the series with a different topic.

Chrys

Broad Network

HTML 5 Table Basics

HTML5 Basics - Part 16

Introduction

Related Links

Comments