HTML Tables

❮ Previous Home Next ❯

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>



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>



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>






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;
}

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;
}



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>



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>



HTML Table Related Tags

TagsDescription
<caption> Define a caption for table.
<col> Defines a column within a table.
<colgroup> Defines an explicit group of table columns containing col elements to provide for table column-level scripting or formatting.
<table> Defines a table.
<tbody> Defines the body content in an HTML table.
<td> Defines a data cell in a table
<tfoot> Defines group footer content in an HTML table.
<th> Defines a header cell in a table.
<thead> Defines header rows at the top of a table.

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

❮ Previous Home Next ❯