Lesson 19 - Introduction to Tables

Tables tags are used in web pages to display an actual table or to display anything else in a tabular form. We will see in the next lesson how to format your page using Tables, but in this lesson we will learn how to make a table.

Tables consist of rows and columns with individual cells that are at the intersections of the rows and columns. In addition, tables can have borders, headers, and captions. You can control the padding within the cells, and the spacing between cells. You can combine cells to make one larger cell. Cell contents can include HTML code, images, other tables and just about anything else.

Let's look at each individual tag:

<table></table>
(required tags)
identifies table formatting for the browser. The Align attribute is similar to that for images--align=left sets the table on the left and text wraps around on the right (try it). If a border is desired, enter the width in pixels (border='0' means no border) (try it). Frame controls which sides of the external border are displayed ('void', 'above', 'below', 'hsides', 'vsides', 'rhs', 'lhs' or 'box') (try it). Rules control which internal lines are displayed ('none', 'rows', 'cols', 'groups' or 'all') (try it). Much like in our W3C box model, Cellpadding is the cushion within the cell where no text will appear (try it). Cellspacing is the spacing between individual cells (try it). Width relates to the available space within the table's parent element. (if the area hosting the table is only three inches wide, width=100% will make the table the full three inches wide). Any length value can be used, including percents (try it).
<tr></tr>
(required tags)
identifies an individual row of the table for formatting purposes (try it).
<td></td>
(required tags)
identifies an individual cell of the table for formatting purposes (try it). Colspan=2 means the cell spans two colums within the same row to form one larger cell. Rowspan=2 means the cell spans two rows within the same column to form one larger cell. Align=value is an attribute that justifies text within the cell (the same as 'style="text-align:value"')
<caption></caption> centers a caption above and outside the table (try it).
<colgroup></colgroup> groups an entire column (or columns) for formatting purposes. In other words, you can format every cell in a column by grouping it in a Colgroup. In addition, when the Rules attribute is set to groups, any column defined by Colgroup will have lines displayed. Span='3' means this Colgroup spans three columns (try it).
<col></col> does the same thing as Colgroup, only the Rules attribute has no effect. You can have zero or more Col within a Colgroup (try it).
<thead></thead> identifies the Head section of the table for formatting purposes (try it).
<th></th> identifies individual cells as headers. Note, these do not have to be within the thead tags. (Essentially, all th does is center and bold text.) (try it)
<tfoot></tfoot> identifies the Footer section of the table for formatting purposes. Note that if you use these tags, they must appear after the <thead></thead> and before the <tbody></tbody> tags, even though the footer itself appears after the body (try it).
<tbody></tbody> identifies the Body section of the table for formatting purposes. Note you can have more than one Body section, and each one is effected by the Rule attribute (try it).

You will likely find the old methods of setting the background colors/images of entire tables (try it), or just individual cells (try it) in older web pages, so you should be familiar with them. Likewise, there is an old way (try it) to align text within cells.

We'll demonstrate a table. We give the table three rows, four columns, a border of "2", cellpadding of "3", cellspacing of "1" and a width of 70%. It should read like this:

<table border="2" cellpadding="3" cellspacing="1" width="70%">
  <caption>Caption</caption>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
    <td>Row 1, Col 4</td>
  </tr>
  <tr>
    <td>Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
    <td>Row 2, Col 4</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
    <td>Row 3, Col 4</td>
  </tr>
</table>

Above is a basic table with rows and data cells (and, in this case, a caption). Note that if a cell is left blank, it will not appear as you might expect on the page (try it).

If we add the following:

<table align=left border="2" frame=hsides rules=groups
cellpadding="3" cellspacing="1" style="margin:0.5em">
  <caption>Caption</caption>
  <colgroup span=3>
    <col span=2></col>
    <col style="background-color:yellow;"></col>
  </colgroup>
  <thead style="font-family:arial; font-size:larger">
    <tr>
      <th colspan=4>Master Header</th>
    </tr>
    <tr>
      <th>Indiv. Header</th>
      <th>Indiv. Header</th>
      <th>Indiv. Header</th>
      <th>Indiv. Header</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan=4 style="text-align:center;">Footer </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td style="text-align:right;">Row 1, Col 2</td>
      <td rowspan=2>Row 1 and 2,<br>Col 3</td>
      <td>Row 1, Col 4</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 4</td>
    </tr>
    <tr>
      <td colspan=2>Row 3, Col 1 and 2</td>
      <td>Row 3, Col 3</td>
      <td>Row 3, Col 4</td>
    </tr>
  </tbody>
</table>

Here is how it is displayed:

Caption
Master Header
Indiv. Header Indiv. Header Indiv. Header Indiv. Header
Footer 
Row 1, Col 1 Row 1, Col 2 Row 1 and 2,
Col 3
Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 4
Row 3, Col 1 and 2 Row 3, Col 3 Row 3, Col 4

We are including text here just to show you how it can flow around the table if you use the 'align' attribute. Sepl escrathem ho gigum lirho. Pisn elibr elequori ra plonosmatis ha ispasno. Lami, cruvep um viberhiant idaspont. Spoc aliquad emoquorius sma quadetosont ugo hedohatis. Quadesch est. Schesch est. Inithon dropl li eramore ohicuer. Napesnes in idriplore thumatat. Batalum in quoribir trinitruer. Propascres, alophes ca mimon ecitrotis. Coseus ta ip udihore cih danedra est. Plepl terh ascrotr pus nofalat eg escritratis. Ascrem est. Resch est. Phaneh, godaschem phu otinum quoremes. Dresoleus, dadrius ani stiliscus robusponis. Psotascon in vagupsus lodapras.

The table shown above is more complex than most you will make, but we show it here for your reference.

Do the following in sample2.htm:

  1. Create a table with four columns and four rows.
  2. By using colspan, combine the cells from the second and third column in the first row.
  3. By using rowspan, combine the cells from the first column in the second and third rows.
  4. Using both rowspan and colspan, combine the last two columns of the last two rows.
  5. Make the first row <th> instead of <td>
  6. Put some text in all the cells.

In this lesson, we learned about these HTML tags:
<table> and </table>
<tr> and </tr>
<td> and </td>
<caption> and </caption>
<colgroup> and </colgroup>
<col> and </col>
<thead> and </thead>
<th> and </th>
<tfoot> and </tfoot>
<tbody> and </tbody>
By now, your sample2.htm file should look like this.
For more information on the topics of this Lesson, see this site.

Lesson 18 Image Maps   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 20 Formatting with Tables

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 4,036 different visits in the last 30 days.
435,602 hits on this domain since 24 Nov 2006.
http://www.sandersongs.com/HTMLcourse/Lesson19.php
This page was last modified on our server on 10 Oct 2013
and last refreshed on our server at 3:58 am, MST
This file took 0.00895 seconds to process.