Southend Linux User Group

HTML Tables

Tables

Tables provide an obvious way of laying out data, however tables are also extremely useful for less obvious layout purposes. This example introduces the basics of table construction. The table border property has been set to 1 so you can see whats going on. The table can be used to divide the web page up into cells.

Two other (HTML) layout techniques that can be used are FRAMESET’s and DIV(iders or layer tags).

  • TABLE command attribute align=”center” can used to centre table on Web page. Or if you prefer align=”left” or align=”right”.
    • The WIDTH attribute specified either as a percentage or in pixels (as in this case). This can also be applied to individual columns (usually in the first row). The height property can also be used to change the height of individual rows.
    • Cellpadding, (used in this example to move the image away from the left border), and strong>cellspacing properties can also be used to adjust the table layout.
    • The summary property should be used for accessibility reasons
  • <COL> tab is also optional but has been used in this case to specify background colors.
  • The THEAD is optional and the attribute bgcolor sets the background colour of the table header. Similarly TBODY attribute can be used to set the color of the table body. The THEAD command is optional, but notice the browser formats <TH> commands differently from <TR> Table Rows.
  • The CAPTION tag is optional.
  • Columns are denoted by <TD> tags nested within <TR> tags.
  • By using property rowspan =”3″ the cell R1, C1 spans 3 rows in the adjacent column. To span colums the corresponding command would be colspan=”3″ assuming you wanted the header row to span 3 columns for example
  • The TH colspan attribute creates overall table header. (no end tag required). The number of TH (in header) or TD (in body) tags within table determines number of columns within a row.
  • As well as the <THEAD> tag there is also a <TFOOT> tag, not shown in this example.
Tables are relatively straight forward, but can be quite tricky to organise if your planning to use the colspan or rowspan options. Some HTML editing tools, such as DreamWeaver lets you draw the tables out, making this a lot easier to use for the novice.

To see what the page looks like without the table borders set the border property equal to 0 (zero).

Two other important table properties, are cellpadding and cellspacing, only briefly covered here.

A table example

You may wish to build this table up in stages.

  1. Enter the table tags and the section denoted by the tbody and included tags first.
  2. Next add the thead section.
  3. Finally add th two <col> tags and the caption.

ex7

Associated code

ex7a

Author: Alan Campion - Page reference: 2778
Last modified: paul - 2015-08-23