XHTML Basics – Part 13
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.
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.
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):
   <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 XHTML document:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<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:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<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 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