Understanding - HTML table basics

Lotech Solutions ( www.lotechsolutions.com)

HTML Table Tags

This topic explains the minimum HTML table tags which support the W3C HTML 4 and CSS 2 standards, and explores some methods to display tables properly within HTML topics.

Note

Advanced table display can occur with the appropriate use of table styles. See Understanding HTML Table Styles.

---

Table Structure Basics:

1. Tables in HTML are formed from tag pairs starting with the Table tag set (<TABLE></TABLE>).

Tables can even be nested within other tables, and this method was widely used for positioning HTML elements before the development of CSS positioning standards.

Note

Nesting tables for page layout is deprecated (W3C's term for discouraged) in favour of applying appropriate CSS styles. See Table styles.

As at the date of writing this topic (see topic date at bottom of page) there is still no style to allow for the dynamic resizing of text within multiple columns. Tables will have to suffice with static column size content until such style standards are introduced.

2. A properly formed table contains at least one TableRow tag set (<TR></TR>).

The number of TableRow tag sets determine the number of rows within the tableone for each row.

3. TableRow tag sets must contain one or more TableData tag sets (<TD></TD>) to define each cell in the row.

The number of TableData tag sets in a row determines the number of cells (columns) within that rowone for each cell.

Note

Unlike paragraphs outside of a table, paragraphs within a table do not require paragraph tags (<P></P>). Text within cells are contained within the TableData tags (<TD></TD>).
Indeed, paragraph tags within table cells are not recommended as these will bring inappropriate formatting settings with them (which will now align from the table cell edge, and not the page edge as likely intended). Paragraphs within tables require their own styles to account for the confined space within a table cell. See Table styles.

4. TableRow tag sets can also contain zero or more TableHead tag sets (<TH></TH>) in place of TableData tag sets (<TD></TD>). A TableHead tag set creates a table cell just like the TableData tag set does, and counts as another cell (column) in that row of the table. TableHead tag sets are usually placed at the top and/or left edges of a table to display as a heading cell for that particular table column or row. TableHead cells display bold and centred in the cell space by default, without the need for any further formatting or styles other than declaring the cell as TableHead instead of TableData.
5. Columns are not specifically created using column tags (which don't exist in HTML for that purpose), as the number of columns in a table is commonly determined by whichever row in the table contains the largest number of cells. This means that the table cannot be rendered (displayed onscreen or printed) until all of the table data is available (downloaded from the web or read from disk) which could take some time if the table is particularly large.
   To overcome this (possible) display limitation, the W3C HTML 4 standard introduced ColumnGroup (<COLGROUP></COLGROUP>) and Column (<COL></COL>) tag sets, which should be declared at the start of the table to instruct the display client (browser or viewer) as to the intended number of columns in the table. This permits the table to be displayed incrementally (as the data is read or downloaded) before all of the table data is available to the display client. Thus reducing apparent waiting time before display.

---

Examples

Here is the HTML for a simple table consisting of a single-cell in a single-row:

<TABLE> <TR> <TD>
      Row 1 Cell 1
    </TD> </TR> </TABLE>

Here's how that table displays:

Row 1 Cell 1

Note

No inline styles were applied (no attributes for any of the table tags were set), so the appearance of the table is completely determined by any pre-defined styles for the Table, TableRow, and TableData tags, which exist in the stylesheet linked to this document. In this case, margins, borders, padding, colouring, text layout, and font are all adopted from the stylesheet. See Table styles for details.

Should you wish to add a second cell to the row, you can add another TableData tag set within the TableRow tag set.

Here is the HTML for a simple table consisting of two cells in a single-row:

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
  </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1

Row 1 Cell 2

To add another row to the table, insert another TableRow tag set after the first in the HTML:

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
  </TR>
  <TR> </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1

Row 1 Cell 2

Oops! Where's that second row?

You'll need to also insert TableData tag sets within the TableRow tag set to display anything, as you can see that the second row didn't display here at all.

Note

In fact, HTML editing tools like FrontPage (FP) "helpfully" removes the empty TableRow tag set from the HTML source if you've got the Reformat option checked on the Tools | Page Options | HTML Source tab.

If we add just one TableData tag set to the second row in the previous example, we get the following HTML:

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
  </TR>
  <TR>
    <TD>
      Row 2 Cell 1
    </TD>
  </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1

Notice here that the second row displays, however it appears that the table expects a second cell on the same row, and when it can't find that cell, it fills the expected cell space in the table with the table background colour! (Not very pretty, but could be used to interesting affect now that you know about it. This possibility is not explored any further here.)

Tip

An interesting (and sometimes frustrating) behaviour of HTML tables is that they automatically expect cells in different rows to align into columns, and will automatically resize the available cells so that they do align into columns, even if you declare a different number of cells on each row, or have specifically set some cell size attributes. This can cause some confusion to the unwary, as it would seem that some attributes have no affect in these circumstances.

If you required different rows of the same table to contain a different number of cells to each other, you can set the cell COLSPAN attribute to instruct the table to span a cell over more than one column. The row with the largest number of cells determines the number of columns within a table. The rows with fewer cells must stretch their cells over more columns to make up the difference, or risk leaving blank holes in the table display where the table expects to find a cell and doesn't.

The following HTML contains the additional COLSPAN parameter added to the TableData. It's value must be a whole number representing the number of columns to span with that row:

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
  </TR>
  <TR>
    <TD COLSPAN="2">
      Row 2 Cell 1
    </TD>
  </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1

Notice how the first (and only) cell in the second row has been stretched in width to span across the whole table.

To add more cells to a row, insert more TableData tag sets as in the following HTML example:

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
  </TR>
  <TR>
    <TD>
      Row 2 Cell 1
    </TD>
    <TD>
      Row 2 Cell 2
    </TD>
    </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

To add an extra column, you must insert additional TableData tag sets into each TableRow tag set, as demonstrated in the following HTML example:

To complete this exercise in table HTML tags

<TABLE>
  <TR>
    <TD>
      Row 1 Cell 1
    </TD>
    <TD>
      Row 1 Cell 2
    </TD>
    <TD>
      Row 1 Cell 3
    </TD>
  </TR>
  <TR>
    <TD>
      Row 2 Cell 1
    </TD>
    <TD>
      Row 2 Cell 2
    </TD>
    <TD>
      Row 2 Cell 3
    </TD>
  </TR>
</TABLE>

Here's how that table displays:

Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3

The number of columns within a table is dependant upon the number of TableData tag sets within each TableRow tag set. The cells will even themselves out to equally share the total width of the table unless you specifically set a cell width in the TableData tag, or apply an appropriate class to a table cell.

Note

If conflicting widths are set, the display will adjust the cell sizes to accommodate every cell into the table, rather than adjust the table width to suit.

The following example demonstrates the automatic width adjustment of cells within multiple tables of the same total width:

Row 1 Cell 1

Row 1 Cell 2

Row 2 Cell 1

Row 2 Cell 2

Row 2 Cell 3

Row 3 Cell 1

Row 3 Cell 2

Row 3 Cell 3

Row 3 Cell 4

Row 4 Cell 1

Row 4 Cell 2

Row 4 Cell 3

Row 4 Cell 4

Row 4 Cell 5

Row 5 Cell 1

Row 5 Cell 2

Row 5 Cell 3

Row 5 Cell 4

Row 5 Cell 5

Row 5 Cell 6

No cell width values were specified, and as you can see, the tables have automatically adjusted the cell widths to fill the table in each case.

Now look what happens if we combine these rows into one table, effectively providing a differing number of cells per row:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1	Row 3 Cell 2	Row 3 Cell 3	Row 3 Cell 4
Row 4 Cell 1	Row 4 Cell 2	Row 4 Cell 3	Row 4 Cell 4	Row 4 Cell 5
Row 5 Cell 1	Row 5 Cell 2	Row 5 Cell 3	Row 5 Cell 4	Row 5 Cell 5	Row 5 Cell 6

Predictable, given the previous explanation of table column behaviour. The table has displayed the cells starting on the left edge, and trimmed the last column to fit within the defined width of the whole table (as predefined in the table style).

We could of course, format the individual cells with the COLSPAN parameter. However, it has the limitation of only representing whole numbers (so fractions, if used, are not understood and the whole parameter is ignored). In this table example, there are 6 columns in total, and therefore, as rows 1 and 2 contains a number of cells that will divide equally into 6 parts, they will display as expected. Unfortunately, rows 3 & 4 contain a number of cells that will not wholly divide into 6 so the COLSPAN parameter cannot be successfully used for them. Here's how this table will look if we attempt to use COLSPAN parameters to stretch the cells across multiple columns:

Row 1 Cell 1			Row 1 Cell 2
Row 2 Cell 1		Row 2 Cell 2		Row 2 Cell 3
Row 3 Cell 1	Row 3 Cell 2	Row 3 Cell 3	Row 3 Cell 4
Row 4 Cell 1	Row 4 Cell 2	Row 4 Cell 3	Row 4 Cell 4	Row 4 Cell 5
Row 5 Cell 1	Row 5 Cell 2	Row 5 Cell 3	Row 5 Cell 4	Row 5 Cell 5	Row 5 Cell 6

The next alternative would be to attempt to control the width of the table cells directly using the WIDTH parameter of the TableData. Here's how this table will look if we attempt to use WIDTH parameters to define cell widths:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1	Row 3 Cell 2	Row 3 Cell 3	Row 3 Cell 4
Row 4 Cell 1	Row 4 Cell 2	Row 4 Cell 3	Row 4 Cell 4	Row 4 Cell 5
Row 5 Cell 1	Row 5 Cell 2	Row 5 Cell 3	Row 5 Cell 4	Row 5 Cell 5	Row 5 Cell 6

 

---

See Also

Lotech Solutions' Tips, Tricks, and Procedures

---

 email webmaster

Copyright Lotech Solutions. All rights reserved.