Tag <table> HTML Reference

Example

A simple HTML table, containing two columns and two rows:

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Andrew</td>
  </tr>
</table>

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

1. Definition and Usage

The <table> tag defines an HTML table.

An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.


2. Differences Between HTML and XHTML

None


3. Optional Attributes

DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute Value Description DTD
align left
center
right
Deprecated. Use styles instead.
Specifies the alignment of a table according to surrounding text
TF
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Use styles instead.
Specifies the background color for a table
TF
border pixels Specifies the width of the borders around a table STF
cellpadding pixels Specifies the space between the cell wall and the cell content STF
cellspacing pixels Specifies the space between cells STF
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Specifies which parts of the outside borders that should be visible STF
rules none
groups
rows
cols
all
Specifies which parts of the inside borders that should be visible STF
summary text Specifies a summary of the content of a table STF
width pixels
%
Specifies the width of a table STF

4. Standard Attributes

The <table> tag supports the following standard attributes:

Attribute Value Description DTD
class classname Specifies a classname for an element STF
dir rtl
ltr
Specifies the text direction for the content in an element STF
id id Specifies a unique id for an element STF
lang language_code Specifies a language code for the content in an element STF
style style_definition Specifies an inline style for an element STF
title text Specifies extra information about an element STF
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents STF

5. Event Attributes

The <table> tag supports the following event attributes:

Attribute Value Description DTD
onclick script Script to be run on a mouse click STF
ondblclick script Script to be run on a mouse double-click STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
onmouseout script Script to be run when mouse pointer moves out of an element STF
onmouseover script Script to be run when mouse pointer moves over an element STF
onmouseup script Script to be run when mouse button is released STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
onkeyup script Script to be run when a key is released STF

Other HTML/XHTML tags:


Relative articles

Overflow CSS – About and How to use it in various conditions

Overflow CSS – About and How to use it in various conditions

Today I will tell you about CSS again. This is will property called ‘overflow’. This property already in CSS since second version (CSS2). All popular browsers like Firefox, IE, Safari, Opera etc supporting this property. I will tell about IE browsers in details a little after.

Overflow property determines the behavior of a block-type element in situations, where its contents exceeds its size. Overflow property can have five values. Each value defines two aspects of the generated element: whether to display the contents outside of the block itself and are we will have scrolling mechanism. If the value of the overflow property is auto, the browser displays the contents of the element according to its settings, plus – it should allow the user to scroll if the content does not fit in the container.
(more…)


Bottom Menu Builder (HTML5)
Bottom Menu Builder (HTML5)

Bottom Menu Builder (HTML5)

Bottom navigation website menu. I am sure that you have seen it many times (at different websites). As usual, this is three-four columns menu with different links. Today I would like to show you a builder, which you can use to build that bottom menu. Main purpose of this builder – prepare static HTML code (as cache file) for embedding into bottom of your website. If you like that idea, you are welcome to play with it, and I will tell you about creation of nice user friendly menu builder. This tutorial is separated into 2 parts, today I will tell you about first side: user interface with drag and drop possibility.
(more…)