XHTML Table Basics

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 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 XHTML 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):

HistoryMathGeography

John756070

Peter505580

Mary546273

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 XHTML document:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HistoryMathGeography

John756070

Peter505580

Mary546273

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

Content

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HistoryMathGeography

John756070

Peter505580

Mary546273

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:

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 XHTML 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 XHTML 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.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HistoryMathGeography

John756070

Peter505580

Mary546273

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.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Cell00Cell01Cell02Cell03

Cell10Cell11Cell12Cell13

Cell20Long Cell21Cell23

Cell30Cell31Cell32Cell33

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.

Cell00Cell01Long
Cell02Cell03

Cell10Cell11Cell13

Cell20Cell21Cell22Cell23

Cell30Cell31Cell32Cell33

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.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Cell00Cell01Cell02Cell03

Cell10Cell11Cell12Cell13

Cell20Cell21Cell22Cell23

Cell30Cell31Cell32Cell33

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 XHTML 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