HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Table Structure

• <table>: Container element for the table
• <tr>: Table row
• <th>: Table header cell (bold and centered by default)
• <td>: Table standard data cell

The HTML tables allows to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows, <th> tag is used to create table head cell and <td> tag is used to create table data cells.

This example shows how to create a table:

Example

<table>
<tr>
  <th>First Name</th>
  <th>Last Name</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
</tr>
<tr>
  <td>John</td>
  <td>Wick</td>
</tr>
</table>

Try this code ❯

HTML Table Heading

The table heading can be defined using <th> tag.

This example shows how to add table head cells:

Example

<table>
<tr>
  <th>First Name</th>
  <th>Last Name</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
</tr>
<tr>
  <td>John</td>
  <td>Wick</td>
</tr>
</table>

Try this code ❯

HTML Table Colspan and Rowspan Attributes

colspan: The colspan attribute takes a numeric value that indicates how many columns wide a cell should be.

rowspan: rowspan attribute takes a numeric value that indicates how many rows high a table cell should span.

Example

<table>
<tr>
  <th>First Name</th>
  <th>Last Name</th>
</tr>
<tr>
  <td rowspan="2">John</td>
  <td>Doe</td>
</tr>
<tr>
  <td>John</td>
  <td>Wick</td>
</tr>
</table>

Try this code ❯

Table Borders

The HTML tables can have borders of different styles and shapes.

How To Add a Border

This example shows how to add a border, use the CSS border property on table, th, and td elements:

Example

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

Try this code ❯

Collapsed Table Borders

It's used to avoid double borders like in the example above, set the CSS border-collapse property to collapse.

This example shows how to make the borders collapse into a single border:

Example

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

Try this code ❯

Table Sizes

This example shows how to set sizes for table:

Example

<table style="width: 100%;">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
</tr>
<tr>
  <td>John</td>
  <td>Wick</td>
</tr>
</table>

Try this code ❯

HTML Table styling

This example shows how to add styles for table:

Example

<style type="text/css">
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
  border: 1px solid #E0E0E0;
  padding: 8px;
  padding: 5px 16px;
  font-weight: 400;
}

table th {
  background-color: #ddd;
  font-family: monaco;
}

table tr:nth-child(even){
  background-color: #f2f2f2;
}
</style>

Try this code ❯

HTML Table Related Tags

Note: A complete list of all HTML tags, see HTML Tag Reference.