HTML <table> tag

Definition and Usage

<table> The tag defines an HTML table.

An HTML table is composed of one <table> elements and one or more <tr>,<th> and <td> Element composition:

HTML tables can also contain the following elements:

See also:

HTML Tutorial:HTML Table

HTML DOM Reference Manual:Table Object

CSS Tutorial:Set table styles

Instance

Example 1

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

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

Try It Yourself

Example 2

How to add collapsed borders to a table (using CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
{}
</style>
</head>
<body>
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Try It Yourself

Example 3

How to right-align a table (using CSS):

<table style="float:right">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try It Yourself

Example 4

How to center-align a table (using CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
{}
table.center {
  margin-left: auto;
  margin-right: auto;
{}
</style>
</head>
<body>
<table class="center">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try It Yourself

Example 5

How to add a background color to a table (using CSS):

<table style="background-color:#00FF00">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try It Yourself

Example 6

How to add padding to a table (using CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
{}
th, td {
  padding: 10px;
{}
</style>
</head>
<body>
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Try It Yourself

Example 7

How to set table width (using CSS):

<table style="width:400px">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try It Yourself

Example 8

How to create table headers:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Try It Yourself

Example 9

How to create a table with a title:

<table>
  <caption>Monthly Savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try It Yourself

Example 10

How to define a table cell spanning multiple rows or columns:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Try It Yourself

Global Attributes

<table> The tag also supports Global Attributes in HTML.

Event Attributes

<table> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <table> Element:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
{}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support