Tables in HTML documents.

Simple tables.

Tables are the most powerful and wide used tools in HTML. They allow not only represent data as a set of rows and columns, but also offers a way to position various HTML objects on the page. To construct the simplest table we need to know three new tags:
  • <table> with closing tag </table> to specify the beginning and the end of the table
  • <tr> and </tr> to specify the beginning and the end of each row of the table
  • <td> and </td> to specify one column inside a row.
    Constructing you tables you need to follow several simple rules:
    1 Any table must start with tag <table> and end with tag </table>.
    2 Between tags <table> and </table> you can have as many rows as you want. Each row must start with tag <tr> and end with </tr>.
    3 Specify column data inside a row by including the data inside <td> and </td> tags. You should have the same amount of columns in each row, otherwise you can get different results in different browsers, or even in different version of the same browser.

    The following code demonstrates how to create a simple table containing 2 rows and 3 columns:
    Code   Result 
    <table>
  <tr> <!-- the first row starts here -->
   <td>data1</td>
   <td>data2</td>
   <td>data3</td>
  </tr> <!-- ... and ends here -->
  <tr>  <!-- the second row starts here -->
   <td>some other data</td>
   <td></td> <!-- no data in this column -->
   <td>data4</td>
  </tr> <!-- ... and ends here -->
</table>
    		       
    data1 data2 data3
    some other data data4

    Optional parameters of the tag table

    Possible parameters for the tag <table> are described in the table:
    Parameter Values Example
    border Sets the width of the table's border in pixels. By default is 0; that is, no border .
    cellpadding Sets the distance between the data in a cell and the boundaries of the cell (in pixels). Default value is 0.
    cellspacing Sets the distance between the cells of the table (in pixels). The default value is 1.
    width Assigns the desired width of the whole table either in pixels or in % of the browser's window.
    align This parameter works similar to the same parameter of the tag img but has only two possible values:
  • right
  • left
    Value left shifts the table to the left side of the window and allows the text following the table to be on the right. The right value shifts it to the right. The default behavior (there is no parameter align present) works similar to the value left, but does not allow the text to be on the right of the table, so the table is a separate bock.
    • bgcolor Sets the background color for the whole table. This parameter does not change the font's color. You need to change it manually using <font> tag or other tools.
    cols This parameter "helps" browser to display the table. Set the value of the parameter equal to the number columns in the table. That allows the browser to start displaying table before getting all information about the table. It's not supported by all browsers.  

    Playing with cells and data inside cells

    There are a set of parameters for tag td we can use to change the default behavior of text inside cells. You can find the full list of them in the table below. Some of these parameters are responsible of formatting text in one cells and some of them change behavior of several cells in the table.
    Parameter Values Example
    width Sets the desired width of the column in pixels or in % of the browser's window.
    height Sets the desired height of the cell (of course now the whole row will have the same height, unless some of the cells are not having bigger height).
    align Aligns the data in the cell horizontally. Possible values:
  • left -- by default
  • right
  • center
    • valign Aligns the data in the cell vertically. Possible values:
  • center -- by default
  • top
  • bottom
    • bgcolor Works exactly like bgcolor parameter of the tag table, but now sets the background color only of this particular cell.
    Combining cells together
    colspan Combines several consequent horizontal cells in one. Value is the number of cells you want to combine together. Can be used together with rowspan
    rowspan Combines several consequent vertical cells in one cell. Value is the number of cells you want to combine together. Can be used together with colspan

    Headers.

    Table header.

    To print a header (or footer) for the whole table we can use tag <caption> with ending </caption> inside the table's body. This tag will create a caption of the table using the text inside. Please note that this tag doesn't do anything with this text. The caption will be printed using the current document font. If you need to emphasize it somehow you have to take care manually inserting corresponding tags inside the caption tags. Tag caption can have parameter value that can take one of the following values:

  • top -- makes the caption to be a header of the table (default value)
  • bottom --- makes the caption to be the footer of the table.
    This example illustrates usage of this tag.

    Column header.

    Special tag <th> can be used instead of . The only difference between these tags is tag th makes the text in the corresponding cell be displayed with bold font and centered inside the cell. This tag is often used for column headers. The following example show how to use it:
    Code   Result 
    <table>
  <tr> <!-- these are column headers -->
   <th>Column 1</th>
   <th>Column 2</th>
   <th>Column 3</th>
  </tr>
  <tr> 
   <td>data1</td>
   <td>data2</td>
   <td>data3</td>
  </tr> 
  <tr>  
   <td>some other data</td>
   <td>&nbsp;</td> 
   <td>data4</td>
  </tr> 
</table>
    		       
    Column 1 Column 2 Column 3
    data1 data2 data3
    some other data   data4

    Nested tables.

    Standard HTML allows put almost any tags inside a table cell (between <td> and </td>). Thus, we can put one table inside a cell of another table. Such tables are called nested tables. This feature can help to place several different tables just as you want them to be placed. Here is an example that illustrates usage of nested tables. However, you need to be careful if you have too many nested tables some browsers can display them incorrectly.

    Using tables to format pages.

    Very often tables are used to put elements of the page in correct position. For example, you saw in the previous lecture that we don't have much flexibility with putting several images on one page. We can chose different values of parameter align, but still the browser takes the final decision. Using tables we can specify exact position of each picture on the screen. This small example shows how to do that.