X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML Tables


HTML Table Example:

Firstname Lastname Points
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67


Examples

Try it Yourself - Examples

Basic HTML tables
How to create basic tables in HTML.

A table with borders
How to add borders to a table.

A table with collapsed borders
How to make the borders collapse.

(You can find more examples at the bottom of this page).


HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows with the <tr> tag. (tr stands for table row)

A row is divided into data cells with the <td> tag. (td stands for table data)

A row can also be divided into headings with the <th> tag. (th stands for table heading)

The <td> elements are the data containers in the table.

The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.

The width of a table can be defined using CSS.

Example

<table style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>

Try it yourself »


An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.

A border can be added using the border attribute:

Example

<table border="1" style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>

Try it yourself »

Note However, the border attribute is on its way out of the HTML standard!
It is better to use CSS.

To add borders with CSS, use the border property:

Example

<style>
table,th,td
{
border:1px solid black;
}
</style>

Try it yourself »

Remember to define borders for both the table and the table cells.


An HTML Table with Collapsed Borders

If you want the borders to collapse into one border, add border-collapse to your CSS:

Example

<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>

Try it yourself »


An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

th,td
{
padding:15px;
}

Try it yourself »


HTML Table Headings

Table headings are defined with the <th> tag.

By default, all major browsers display table headings as bold and centered:

Example

<table style="width:300px">
<tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Points</th>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>

Try it yourself »

To left-align the table headings, use the CSS text-align property:

Example

th
{
text-align:left;
}

Try it yourself »


An HTML Table with Cell Spacing

Cell spacing specifies the space between the cells.

To set the cell spacing for the table, use the CSS border-spacing property:

Example

table
{
border-spacing:5px;
}

Try it yourself »


Examples

More Examples

Horizontal/Vertical table headings
How to create horizontal/vertical table headings.

Table with a caption
How to add a caption to a table.

Table cells that span more than one row/column
How to define table cells that span more than one row or one column.

Tags inside a table
How to display elements inside other elements.


HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook