HTML Help & Resources

Tables

Tables are very effective at displaying information in an organized way. In years past, web designers used tables explictly to frame entire websites, placing content and images inside a table.

Although some sites still use this method, the majority of sites now use the DIV container because of its higher visibility in search engines. However, tables are still useful, still more efficient at displaying organized information, with less code, then a DIV container. It's for this reason tables are still an integral part of web design.

Tables can be used in many different formats and styles, but we only cover basic, fundamental aspects of tables that are more commonly seen and used.

The elements of style, and how to use them, are not covered in this reference. For more information on how to utilize the power of cascadding style, visit our CSS reference instead.

TABLE must have starting and ending tag.

• TH = Table Head

• TR = Table Row

• TD = Table Data

Table data really signifies the use of a column in tables, so you have table rows and columns.

The TH tag defaults to bold text, centered across the column, defining the heading for a column of data.

The TR tag defines the start of a row, requiring a closing tag to end the row.

The TD tag does not require a closing tag, but much like the LI tag, it's better, for the purposes of style, to close off the tag.

TABLE

• WIDTH

  Can be defined as a percentage or an integer with the suffix of px ( 300px ).

• BORDER

  Integer value that defines all borders within the table structure and the outside frame. Omitting the border property defaults to the equivalent of BORDER=0. Use style to define other display and configuration attributes.

• BORDERCOLOR

  Can be an RGB color, a named color ( red ), or a hexadecimal representation ( #800000 or #800 ). Defines the color for all borders inside and outside.

• BGCOLOR

  Defines the background color of the entire table.

• COLOR

  Defines a font color for the entire table.

• ALIGN

  Values for align are center, left, and right.

• CELLPADDING

  Defines the padding space, in pixels, between data and the walls ( border ) of each column, and in every direction - top,bottom,left,right.

• CELLSPACING

  Defines the amount of spacing between columns ( border ), and in all directions - top,bottom,left,right.

• CLASS

  Style class definition.

• ID

  Identifier for use with style or scripting.

• STYLE

  Define a table style at the tag level, affecting only that table, and none created before or after it.

TD/TH

The same rules for TD apply for TH. The TH, or table head, tag signifies the heading of a column of data, and usually defaults to bold, centered text.

• WIDTH

  Can be defined as a percentage or an integer with the suffix of px ( 300px ).

• HEIGHT

  Can be defined as a percentage or an integer with the suffix of px ( 300px ). Note the height value will be overriden if the content inside a TD results in more vertical space required.

• ALIGN

  Values for align are center, left, and right.

• VALIGN

  Aligns items vertically. Values are top, bottom, middle, and baseline.

• COLSPAN

  Integer value that defines how many columns are spanned horizontally.

  This is a spanned column
  Column 1	Column 2

• ROWSPAN

  Integer value that defines how many rows are spanned vertically.

  This is a spanned row	Row 1
  	Row 2

• CLASS

  Style class definition.

• ID

  Identifier for use with style or scripting.

• STYLE

  Define a TD style at the tag level, affecting only that TD, and none created before or after it.

TR

The TR tag in a table, while containing properties that technically, can be used, you'll find most often, no properties need be defined. In almost every case, defining the properties for tables, th, and td, will suffice. Often the properties set in a TR tag are overriden as a result of the data displayed in TD's.

Notes and Reference

A common mistake among designers is to omit other, valuable, contextual, HTML tags, and deploy them inside tables. Tables are block-level containers, used to organize the display of other HTML entities, and to visually enhance the document.

When using tables, always consider whether to implement another useful tag inside a TD. For example, when displaying a paragraph of text inside a TD container, surround the text with the P tag, to inform search engines this is, in fact, a paragraph of text.

Use care when deploying tables inside your documents. Tables can be nested, TD's can be spanned, etc., search engines will only crawl a limited number of nested table entities. This can result in lost, valuable, content, or undervalued content. Use tables as a means to display an organized set of data, instructions, or information, and avoid relying on them to house your entire document - perhaps to center a web page in a browser window.

There are other, more search engine-friendly methods, that can be deployed, using the DIV container to center pages in browsers, without the need for a table or tables.

Move on to the Next Topic - Forms.