HTML5 Table

Basics of HTML 5 - Part 11

Foreword: In this part of the series, I explain how to produce data tables in HTML.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

This is part 11 of my series, Basics of HTML 5. In this part of the series, I explain how to produce data tables in HTML. You should have read the previous parts of the series before coming here, as this is a continuation.

Any information of data nature, that you have in a grid form should be put in a table. An example of such information is the marks for students in 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 series (volume), you should be trying the code samples to really appreciate what is going on.

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, 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, I show you the tags used to define an HTML 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>

This TABLE element has what is called the TBODY element (table body); it has TR elements (table row), and TD elements (table data). 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 I 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 replacements:

<!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 necessarily 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 HTML 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.

At this point, 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. There is more stuff below.

The caption Element
The caption element is a double-tag element. It is used for the title of the table. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <caption><b>Table Title</b></caption>
        <tbody>
            <tr><td>Cell00</td><td>Cell01</td></tr>
            <tr><td>Cell10</td><td>Cell11</td></tr>
        </tbody>
    </table>
</body>
</html>

The caption element can take the text level elements (text elements) such as b in its content. It can also take the heading elements e.g. h4. Note the position of the caption element in the above table code.

The tbody Element
The table tag elements, <table> and </table> are used to hold the whole table together. The tbody element is used to hold a number of rows together. You can have more than one tbody element in a table. Because of the tbody element, you can format groups of rows independently, using CSS (see later). Try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <caption><b>Table Title</b></caption>
        <tbody style="background-color:orange">
            <tr><td>Cell00</td><td>Cell01</td></tr>
            <tr><td>Cell10</td><td>Cell11</td></tr>
        </tbody>
        <tbody style="background-color:pink">
            <tr><td>Cell20</td><td>Cell21</td></tr>
            <tr><td>Cell30</td><td>Cell31</td></tr>
        </tbody>
    </table>
</body>
</html>

The thead Element
The thead element is used for a general-purpose header for the table. It typically has the th elements. The thead element has the column header rows for the table. It can have more than one row. It has the column headers for the table columns. It is a double-tag element.

The tfoot Element
The tfoot element is for column summaries (totals in the case of numbers) down in the table. It is for column footers of the table. It can have more than one row.

Try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <caption><b>Table Title</b></caption>
        <tbody>
            <thead><tr><th>Col1</th><th>Col2</th></tr></thead>
            <tr><td>10</td><td>20</td></tr>
            <tr><td>30</td><td>40</td></tr>
            <tfoot><tr><td><u>40</u></td><td><u>60</u></td></tr></tfoot>
        </tbody>
    </table>
</body>
</html>

The footer text has been underlined with the text u element.

The colgroup Element
The colgroup is a double tag element that is used to represent a group of columns in a table. It works either with another element called, the col element or with an attribute called, the span attribute. The value of the attribute is a positive integer. The colgroup and col elements are typed just below the start table tag (below the caption). The col element is a single tag element. The col element represents one column and its use can conflict with the colgroup element. When columns are grouped, the group of columns can be formatted using CSS, independently (see later).

Illustrations for the colgroup and col Elements
In the following table code samples, there are five columns for the same table. The first two columns are in one group, the third column does not belong to any group and the last tow columns belong to another group. So there are two groups but one column in the middle that does not belong to any group. The different code samples show the different ways of using the colgroup and col elements to achieve the same thing. You should read and try all the code samples, all of which have the same result. Note in particular, the coding of the colgroup and col elements.

In the following code, each column is represented by <col>

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <caption><b>Table Title</b></caption>
        <colgroup style="background-color:pink"><col><col></colgroup>
        <col>
        <colgroup style="background-color:orange"><col><col>
        <tbody>
            <thead><tr><th>Col0</th><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></thead>
            <tr><td>10</td><td>20</td><td>50</td><td>70</td><td>80</td></tr>
            <tr><td>30</td><td>40</td><td>60</td><td>90</td><td>100</td></tr>            <tfoot><tr><td>40</td><td>60</td><td>110</td><td>160</td><td>180</td></tr></tfoot>
        </tbody>
    </table>
</body>
</html>

In the following code, the <col> elements inside the colgroup elements of the previous code, have been removed and replaced indirectly by the (span="2") attribute in the start tag of each of the colgroup elements.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <caption><b>Table Title</b></caption>
        <colgroup style="background-color:pink" span="2"></colgroup>
        <col>
        <colgroup style="background-color:orange" span="2"></colgroup>
        <tbody>
            <thead><tr><th>Col0</th><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></thead>
            <tr><td>10</td><td>20</td><td>50</td><td>70</td><td>80</td></tr>
            <tr><td>30</td><td>40</td><td>60</td><td>90</td><td>100</td></tr>            <tfoot><tr><td>40</td><td>60</td><td>110</td><td>160</td><td>180</td></tr></tfoot>
        </tbody>
    </table>
</body>
</html>

In the following code, there are no colgroup elements. The colgroup elements have been replaced by just col elements:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <col style="background-color:pink" span="2">
        <col>
        <col style="background-color:orange" span="2">
        <caption><b>Table Title</b></caption>
        <tbody>
            <thead><tr><th>Col0</th><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></thead>
            <tr><td>10</td><td>20</td><td>50</td><td>70</td><td>80</td></tr>
            <tr><td>30</td><td>40</td><td>60</td><td>90</td><td>100</td></tr>
            <tfoot><tr><td>40</td><td>60</td><td>110</td><td>160</td><td>180</td></tr></tfoot>
        </tbody>
    </table>
</body>
</html>

I hope you can see how the use of the col element conflicts with the use of the colgroup element in this last code.

When you use the colgroup and/or the col elements, you should take each table column into account as you divide all the columns of the table.

Table inside a Table
You can have a table inside another table. Just go into a table cell, between the <td> and the </td> tags and type another table completely. However, you will hardly need this for ordinary programming.

Time to take a break. Let us stop here. Rendezvous in the next part of the series.

Chrys

Broad Network

Related Articles

HTML5 Table

Basics of HTML 5 - Part 11

Introduction

Related Links

Comments