Tables (<table>, <tr>, <td>, <th>)

Tables in HTML were predicted for presenting tabular data.

Because they are suitable for laying out a web page many programmers are still using them for that purpose.

Due some downturns it is better to avoid using tables for layouts and instead using block level elements (i.e. <div>) with style sheets.

Some of the reasons for avoiding using tables as layouts are mentioned here:

• Separation of content from layout is a right way to go;
• Easier maintaining and updating of an existing site with external style sheets;
• Readability of HTML code is improved without tables;
• Tables might be rendered slower by browsers;
• SEO (search engine optimization) might suffer;
• Because they should be used for tabular data the future rendering by browsers and indexing by search engines cannot be predicted;

Basic HTML table is built with rows <tr> and cells <td>. Each new cell in a row actually adds a column to the table.

Syntax:

<table><tr><td></td></tr></table>

Attributes:

• id, class (document-wide identifiers)
• lang (language information), dir (text direction)
• title (element title)
• style (inline style information)
• align (<tr>, <th>, <td>) (alignment)
• width (<table>) (element proportions)
• summary (<table>) (for non-visual media)
• frame, rules, border (<table>) (borders and rules)
• cellspacing, cellpadding (<table>) (cell margins)
• headers, scope, abbr, axis, rowspan, colspan (<th>, <td>) (cell specific attributes)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Example

HTML table, row and cell elements:

 

›› go to examples ››