HTML Tables

Introduction

Tables have become one the most useful elements in HTML and even Desktop publishing. Because of their flexibility in arranging and organizing the layout, many people prefer their use instead of the traditional way of arranging the different elements of publications. You are strongly encouraged to learn and master them. Once you do, most of your web pages might be completely configured with tables. As long as you can learn some of their basic tags, you should be able to do wonders.

Table Structure

A table opens with <table> and closes with </table>. In between, you specify rows and columns. In my training experience, I have found many people confusing a row and column. Consider that a column is vertical, like North-South, and a row is horizontal, like East-West.

Column 1 Column 2
Row 1
Row 2

Columns 

Rows

Everything typed or entered in a table is done inside of cells. A cell is the intersection of a column and a row.
Cell 1 Cell 2
Cell 3 Cell 4

To create a table, after initializing it with the <table> tag, you first declare each row with the <tr> tag, then you can create as many columns, actually cells, as you want. This means you are moving right in the row as you are working. When you have finished with the number of columns (I still say cells), you can close the table or create other rows. But before anything, remember to close the row with the </tr> tag.
When creating tables, indentation is very important here. If you don't keep good indentation tracks, you can easily loose control of a beginning tag and could forget to close the appropriate tag at the right time, which would result in awkward display.

To see how all these things fit, let's create some tables.

 

Practical Learning: Tables

  1. Start your text editor.

  2. In your text editor, type the following:
     

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">

    </body>
    </html>

     

  3. Save the file as tables1.htm in the C:\projects folder.

  4. You should be back in your text editor.
    In its simplest form, a table can just be made of one cell. Here is an example. change the file to the following:
     

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">

    <table>
      <tr>
        <td>A Simple Table</td>
      </tr>
    </table>

    </body>
    </html>

     

  5. Save the file and preview it in the browser. Believe it or not, a table was created although it doesn't display. This is because, by default, the browser considers that if you don't specify a border, then the border is 0.

  6. For better illustration, we will specify a border. Change the <table> tag as follows:

    <table border="1"> 

  7. Save the file and preview it in the browser.

  8. To create a table with two columns on the same row, change the table section of the file as follows:

    <table border="1">
      <tr>
        <td>West</td>
        <td>East</td>
      </tr>
    </table>

  9. Save and preview the file.

  10. To create a table with 2 rows on the same column, change the table section of the file as follows:

    <table border="1">
      <tr>
        <td>North</td>
      </tr>
      <tr>
        <td>South</td>
      </tr>
    </table>

  11. You can display a table as the cardinal points: 2 columns each split in 2 rows. To see an example, change the file as follows:

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">
    <table border="1">
      <tr>
        <td>North West</td>
        <td>North East</td>
      </tr>
      <tr>
        <td>South West</td>
        <td>South East</td>
      </tr>
    </table>
    </body>
    </html>

  12. We have seen that one of the table attributes allows you to change a table's border. Other attributes allow you to control a table's border color and background color. In the same way, you can control each cell's background color.
    To change our current table's border color, change it as follows:

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">
    <table border="1" bordercolor="#0033cc">
      <tr>
        <td>North West</td>
        <td>North East</td>
      </tr>
      <tr>
        <td>South West</td>
        <td>South East</td>
      </tr>
    </table>
    </body>
    </html>

  13. Save the file and refresh the browser to preview the file. Then bring back your text editor.

  14. To see how to control a tables background color, change the listing as follows:

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">
    <table border="1" bordercolor="#0033cc" bgcolor="#99ccff">
      <tr>
        <td>North West</td>
        <td>North East</td>
      </tr>
      <tr>
        <td>South West</td>
        <td>South East</td>
      </tr>
    </table>
    </body>
    </html>

  15. Save the file and preview it. Then bring back your text editor.

  16. To see how to change a cell's background color, change the table section of the file as follows:

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">
    <table border="1">
      <tr>
        <td bgcolor="#ff9900">North West</td>
        <td bgcolor="#6699ff">North East</td>
      </tr>
      <tr>
        <td bgcolor="#009999">South West</td>
        <td bgcolor="#ff66ff">South East</td>
      </tr>
    </table>
    </body>
    </html>

  17. Save the file and preview it in the browser. Then bring back your text editor.

  18. To see a variant of the cells we have learned to configure so far, let's create a table with 3 rows and 3 columns, this produces 3 x 3 table = 9 cells. change the table section as follows:

    <html>
    <head>
    <title>Tables</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">
    <table border="1">
      <tr>
        <td>North West</td>
        <td>North</td>
        <td>North East</td>
      </tr>
      <tr>
        <td>West</td>
        <td>Center</td>
        <td>East</td>
      </tr>
      <tr>
        <td>South West</td>
        <td>South</td>
        <td>South East</td>
      </tr>
    </table>
    </body>
    </html>

  19. Save the file and preview it. Then bring back your text editor.

  20. To make a table's border invisible, either specify the border as 0 or don't mention that attribute. To see an example, change the table section of the file above as follows: 

    <table>
      <tr>
        <td bgcolor="#ff9900">North West</td>
        <td bgcolor="#00ffff">North</td>
        <td bgcolor="#6699ff">North East</td>
      </tr>
      <tr>
        <td bgcolor="#99ccff">West</td>
        <td bgcolor="#ff0000">Center</td>
        <td bgcolor="#00ff00">East</td>
      </tr>
      <tr>
        <td bgcolor="#009999">South West</td>
        <td>South</td>
        <td bgcolor="#ff66ff">South East</td>
      </tr>
    </table>

  21. Save the file and preview it. Then bring back your text editor

  22. If it is particularly important to you, you can explicitly assign a title to a table using the caption attribute. To see an example, make the change to the file:

    <table> <caption>Sample Table</caption>
      <tr>

  23. Save the file and preview it in the browser.

  24. Instead of using the caption attribute to title a table, you can use a cell that covers one or a group of columns. This kind of cell is said to span other cells. When doing this, the browser would like to know how many cells the spanning cell is covering. You specify this using the colspan attribute of the <td> tag, like this colspan="Number", the Number value represents the number of columns spanned or covered.
    To see an example, in your text editor, click File -> New

  25. Type:

    <html>
    <head>
    <title>Tables Variations</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">
    <table border="1">
      <tr>
        <td colspan="2">Lonely cell</td>
      </tr>
      <tr>
        <td>Something here</td>
        <td>Another stuff here</td>
      </tr>
    </table>
    </body>
    </html>

  26. Save the file as tables2.htm in C:\projects

  27. Preview the file in the browser. And bring back your text editor.

  28. A variant of this approach is to create a column that spans various rows; in this case, you use the rowspan attribute of the <td> to tell the browser how many rows to span.
    To see an example, change the file's content as follows:

    <table border="1">
      <tr>
        <td rowspan="2">Animals </td>
        <td>The lion</td>
      </tr>
      <tr>
        <td>The panther</td>
      </tr>
    </table>

  29. The <table> possesses other valuable attributes you can use to have more control its display. One of them allows controlling the alignment of the contents of its cell. By default a cell's content is aligned to the left-center. To align the content of a cell, you use the align and/or the valign attributes. The align attribute controls the horizontal alignment, while the valign controls the vertical alignment.
    To see an example, make the following change:

    <table border="1">
      <tr>
        <td align="center">Corel Paradox</td>
        <td align="left" valign="top">Query Overview</td>
      </tr>
      <tr>
        <td valign="bottom" align="right">Corel WordPerfect</td>
        <td align="left">A query is a piece or part of the database created to search for, and retrieve, specific data for a specific purpose. It can be viewed as a question, or a filter intended to select only some necessary data.</td>
      </tr>
    </table>

  30. Save the file and preview it

  31. The colspan and the rowspan attributes really allow you to merge cells. Their flexibility allow you to create very fancy tables to display data in wonderful settings.
    As an example, change the content of the file as follows:

    <html>
    <head>
    <title>Tables Variations</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">
    <table border="1">
      <tr>
        <td colspan="5" valign="middle" align="center"><b>Grier Summer Camp</b></td>
      </tr>
      <tr>
        <td colspan="2" rowspan="2">&nbsp;</td>
        <td colspan="3" valign="middle" align="center"><b>PAY TYPE</b></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><b>Regular Time</b></td>
        <td rowspan="2" align="center"><b>Regular Hours</b></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><b>Date</b></td>
        <td align="center"><b>IN</b></td>
        <td align="center"><b>OUT</b></td>
      </tr>
      <tr>
        <td align="center">04</td>
        <td align="center">16</td>
        <td align="center">8 AM</td>
        <td align="center">2 PM</td>
        <td align="center">6</td>
      </tr>
      <tr>
        <td align="center">08</td>
        <td align="center">24</td>
        <td align="center">8 AM</td>
        <td align="center">4 PM</td>
        <td align="center">8</td>
      </tr>
      <tr>
        <td align="center">14</td>
        <td align="center">28</td>
        <td align="center">4 PM</td>
        <td align="center">11 PM</td>
        <td align="center">7</td>
      </tr>
    </table>
    </body>
    </html>

  32. Save the file and preview it.

  33. Another important feature of a table is its width, controlled with the width attribute. This allows you to specify how wide you want your table to be. The width attribute can be used on the <table> tag to control a table's width. On the other hand, you can use the same attribute to control the amount of width for different cells.
    The width attribute is set using either a value as percentage or in pixels. The attribute is set like this: width="Nbr%" or width="Number".
    To see how it works, change the file as follows:

    <html>
    <head>
    <title>Tables Variations</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">
    <table border="1" width="48%">
      <tr>
        <td width="100%" colspan="5" valign="middle" align="center"><b>Grier Summer Camp</b></td>
      </tr>
      <tr>
        <td width="1%" colspan="2" rowspan="2">&nbsp;</td>
        <td width="119%" colspan="3" valign="middle" align="center"><b>PAY TYPE</b></td>
      </tr>
      <tr>
        <td width="24%" colspan="2" align="center"><b>Regular Time</b></td>
        <td width="54%" rowspan="2" align="center"><b>Regular Hours</b></td>
        </tr>
      <tr>
        <td width="22%" colspan="2" align="center"><b>Date</b></td>
        <td width="19%" align="center"><b>IN</b></td>
        <td width="9%" align="center"><b>OUT</b></td>
      </tr>
      <tr>
        <td width="11%" align="center">04</td>
        <td width="11%" align="center">16</td>
        <td width="19%" align="center">8 AM</td>
        <td width="9%" align="center">2 PM</td>
        <td width="54%" align="center">6</td>
      </tr>
      <tr>
        <td width="11%" align="center">08</td>
        <td width="11%" align="center">24</td>
        <td width="19%" align="center">8 AM</td>
        <td width="9%" align="center">4 PM</td>
        <td width="54%" align="center">8</td>
      </tr>
      <tr>
        <td width="17%" align="center">14</td>
        <td width="17%" align="center">28</td>
        <td width="21%" align="center">4 PM</td>
        <td width="19%" align="center">11 PM</td>
        <td width="30%" align="center">7</td>
      </tr>
    </table>
    </body>
    </html>

  34. Save the file and preview it.

  35. The above file was using percent value. To see how to use pixel values, change the content of the file as follows:

    <html>
    <head>
    <title>Tables Variations</title>
    </head>
    <body link="#3399ff" vlink="#008000" alink="#ff00ff">
    <table border="1" height="195" width="404">
      <tr>
        <td width="394" colspan="5" valign="middle" align="center" height="39"><b>Grier Summer Camp</b></td>
      </tr>
      <tr>
        <td width="158" colspan="2" rowspan="3" height="63" valign="middle" align="center"><b>Date</b></td>
        <td width="230" colspan="3" valign="middle" align="center" height="19"><b>PAY TYPE</b></td>
      </tr>
      <tr>
        <td width="154" colspan="2" align="center" height="19"><b>Regular Time</b></td>
        <td width="80" rowspan="2" align="center" height="44"><b>Regular Hours</b></td>
      </tr>
      <tr>
        <td width="80" align="center" height="19"><b>IN</b></td>
        <td width="80" align="center" height="19"><b>OUT</b></td>
      </tr>
      <tr>
        <td width="80" align="center" height="19">04</td>
        <td width="80" align="center" height="19">16</td>
        <td width="80" align="center" height="19">8 AM</td>
        <td width="80" align="center" height="19">2 PM</td>
        <td width="80" align="center" height="19">6</td>
      </tr>
      <tr>
        <td width="80" align="center" height="19">08</td>
        <td width="80" align="center" height="19">24</td>
        <td width="80" align="center" height="19">8 AM</td>
        <td width="80" align="center" height="19">4 PM</td>
        <td width="80" align="center" height="19">8</td>
      </tr>
      <tr>
        <td width="80" align="center" height="19">14</td>
        <td width="80" align="center" height="19">28</td>
        <td width="80" align="center" height="19">4 PM</td>
        <td width="80" align="center" height="19">11 PM</td>
        <td width="80" align="center" height="19">7</td>
      </tr>
    </table>
    </body>
    </html>

  36. Save and preview the file.

  37. As you have seen so far, you can control the width of a table border. The borders we have used so far were of 0 or 1 values. You can increase it to a higher value and use the table border as a frame.
    To see an example, create a new file and your text editor and type:

    <html>
    <head>
    <title>Framed Table</title>
    </head>
    <body>
    <table border="8" width="185" height="105">
      <tr>
        <td width="100%"><img border="0" src="flowers.gif" width="185" height="105"></td>
      </tr>
    </table>
    </body>
    </html>

  38. Save the file as tables3.htm in C:\projects

  39. Preview it in the browser.

  40. You can also control the amount of space used between cells. This is done using the cellspacing attribute on the <table> tag.
    Under the </table> tag of the above table, type:

    <br>
    <table border="1" width="210" height="50" cellspacing="6">
      <tr>
        <td width="103" height="25">Kenya</td>
        <td width="103" height="25">Costa Rica</td>
      </tr>
      <tr>
        <td width="103" height="25">Canada</td>
        <td width="103" height="25">Afghanistan</td>
      </tr>
    </table>

  41. You can also control the amount of space the cells are used to display their content because the table allows you to control the spacing inside of cells. This is done using the cellpadding attribute of the <table> tag.
    To see an example, under the last </table> tag of the above file, type:

    <br>
    <table border="1" width="210" height="50"cellpadding="6">
      <tr>
        <td width="103" height="25">Italy</td> <td width="103" height="25">Senegal</td>
      </tr>
      <tr>
        <td width="103" height="25">Mexico</td>
        <td width="103" height="25">Thailand</td>
      </tr>
    </table>

  42. Save the file and preview it in the browser.

  43. You can combine all the attributes we have seen so far to get fancy results when using tables.
    As an example, under the </table> tag of the last table above, type:

    <br>
    <table border="2" width="232" height="50" cellpadding="8" cellspacing="5">
      <tr>
        <td width="116" height="25">Accounting</td>
        <td width="116" height="25">Human Resources</td>
      </tr>
      <tr>
        <td width="116" height="25">Research & Development</td>
        <td width="116" height="25">Area Branches</td>
      </tr>
    </table>

  44. Save the file and preview it in the browser.

  45. Microsoft Internet Explorer allows you to trick table cells and render page lines. This is done by setting a cell's width to 1 or 2 and changing its background to the desired line color.
    To see an example, in your text editor, click File -> New to create a new file.

  46. In the empty file, type: 

    <html>
    <head>
    <title>HTML Tables</title>
    </head>
    <body>
    <table border="0" width="175" cellspacing="0" cellpadding="0" height="136">
      <tr>
        <td width="163" valign="middle" align="center" colspan="4" height="31"><b>Company Employees</b></td>
      </tr>
      <tr>
        <td width="163" valign="middle" align="center" colspan="4" bgcolor="#0099ff" height="1"></td>
      </tr>
      <tr>
        <td width="71" height="21">First Name</td>
        <td width="1" rowspan="4" bgcolor="#0099ff" height="84"></td>
        <td width="11" rowspan="4" height="84"></td>
        <td width="73" height="21">Last Name</td>
      </tr>
      <tr>
        <td width="71" height="21">Robert</td>
        <td width="73" height="21">Pinots</td>
      </tr>
      <tr>
        <td width="71" height="21">Annette</td>
        <td width="73" height="21">Schwartz</td>
      </tr>
      <tr>
        <td width="71" height="21">John</td>
        <td width="73" height="21">Hann</td>
      </tr>
    </table>
    </body>
    </html>

  47. Save the file as tables4.htm in C:\projects.

  48. Preview it in the browser. And come back to your text editor
    49. You can also insert a table inside of another table, a very popular feature.
    To see an example, change the file to look like the following:

    <html>
    <head>
    <title>Table Formatting</title>
    </head>
    <body>

    <table border="1" bordercolor="#0000FF" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%">
          <table border="0" width="175" cellspacing="0" cellpadding="0" height="136">
            <tr>
              <td width="163" valign="middle" align="center" colspan="4" height="31"><b>Company Employees</b></td>
            </tr>
            <tr>
              <td width="163" valign="middle" align="center" colspan="4" bgcolor="#0099ff" height="1"></td>
            </tr>
            <tr>
              <td width="71" height="21">First Name</td>
              <td width="1" rowspan="4" bgcolor="#0099ff" height="84"></td>
              <td width="11" rowspan="4" height="84"></td>
              <td width="73" height="21">Last Name</td>
            </tr>
            <tr>
              <td width="71" height="21">Robert</td>
              <td width="73" height="21">Pinots</td>
            </tr>
            <tr>
              <td width="71" height="21">Annette</td>
              <td width="73" height="21">Schwartz</td>
            </tr>
            <tr>
              <td width="71" height="21">John</td>
              <td width="73" height="21">Hann</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    </body>
    </html>

  49. Save the file and preview it in the browser

 

Previous Copyright 2000-2004 FunctionX, Inc. Next