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

HTML Tables



Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50


Defining HTML Tables

Example

<table style="width:100%">
  <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 »

Example explained:

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

Note Table data <td> are the data containers of the table.
They can contain all sorts of HTML elements like text, images, lists, other tables, etc.


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:100%">
  <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 The border attribute is on its way out of the HTML standard! It is better to use CSS.

To add borders, use the CSS border property:

Example

table, th, td {
    border: 1px solid black;
}

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 CSS border-collapse:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

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

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
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:100%">
  <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 »


Different Styles for Different Tables

Most of the examples above use a style attribute (width="100%") to define the width of each table.

This makes it easy to define different widths for different tables.

The styles in the <head> section, however, define a style for all tables in a page. 

To define different styles for different tables, add a class attribute to the table:

Example

<table class="names">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a different styles for this table:

table.names {
    width: 100%;
    background-color: #f1f1c1;
}

Try it yourself »

And add more exiting styles:

table.names tr:nth-child(even) {
    background-color: #f1f1c1;
}
table.names tr:nth-child(odd) {
    background-color: #ffffff;
}
table.names th {
    color: white;
    background-color: #333333;
}

Try it yourself »

HTML Tables - Key Points

  • Use <table> to define tables
  • Use <tr> to define table rows
  • Use <td> to define table data
  • Use <th> to define table headings
  • Use CSS border: to define borders
  • Use CSS border-collapse: to collapse cell borders
  • Use CSS padding: to add padding to table cells
  • Use CSS text-align: to align cell text
  • Use CSS border-spacing: to set the spacing between cells

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.

A table with cell padding
How to add space between cell content an the border.

A table with left-aligned headings
How to left align table headings.

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.

Table with cell spacing
How to define the spacing between table cells.

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

Two tables with different class 1
How to style tables differently.

Two tables with different class 2
How to style tables differently.


Test Yourself with Exercises!

Exercise 1 »    Exercise 2 »    Exercise 3 »    Exercise 4 »    Exercise 5 »   


HTML Tables - Complete Tag Reference

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