HTML <table> tag

The <table> tag is used to create a table. Tables consist of rows and cells but can also contain headers and captions. Tables are a great way to display data in an organized structure.

The <table> tag only sets up the structure of the table, for everything else in a table other tags are used.

<tr> tag for table rows.
<td> tag for table cells.
<th> tag for table headings.
<caption> tag for table captions.

Attributes

Attribute	Description	Possible values
align	Deprecated. Sets the alignment of a table relative to the text sorrounding it	left, center, right
bgcolor	Deprecated. Sets the table background color	colorName, rgbValue, hexValue
border	Sets the table border	thicknessOfBorderNumericalValue
cellpadding	Sets the spacing between a table cell's wall and the contents within it	numericValue
cellspacing	Sets the spacing between table cells	numericValue
frame	Sets which parts of a table's outside borders (the tables frame) will be visible	above, below, box, border, hsides, lhs, rhs, void, vsides
rules	Sets which parts of a tables inside borders (rows and columns) will be visible	all, cols, group, none, rows
summary	Provides a summary of the table's content. This data is given to user agents that are used for non-visual purposes like screen readers.	tableSummary
width	Sets the table's width	numericValueInPixels, % of the page width

Standard attributes

class, dir, id, lang, style, title, xml:lang

For more information on standard attributes, check out our HTML standard attributes reference page.

Event attributes

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For more information on event attributes, check out our HTML event attributes reference page.

Example

<table border="2" cellspacing="4" cellpadding="4"> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>Lamp</td> <td>12.00</td> </tr> <tr> <td>Watch</td> <td>20.00</td> </tr> <tr> <td>Notebook</td> <td>3.00</td> </tr> </table>

Output:

Item	Price
Lamp	12.00
Watch	20.00
Notebook	3.00

Tips & notes

Use tables when you want to display data in a tabular fashion (like a spreadsheet). For example, if you have a list of students names and you want to display their scores on 5 different tests. You can use the student names together with the subject the test was for as headings in the table, and the grades as regular tables cells.

Don't use tables to layout the contents of a webpage! This was the old technique of laying out webpages until better techniques using CSS were put into practice. Using tables for page layout will result in slower loading, less search engine friendly, less flexible pages that will be confusing to edit (think of all the nested tables), and will sometimes require workarounds to make things look right (those familiar with page layout using tables are probably thinking of spacer gifs right now!)