HTML Tables

❮ Previous Next ❯

HTML tables provide a way for web developers to organise data systematically by arranging it in rows and columns.

Define an HTML Table

In HTML, a table is formed by using table cells placed within rows and columns.

Table Cells

In HTML, each table cell is represented by the <td> and a </td> tag.

The td stands for table data. Anything enclosed between the <td> and </td> tags constitutes the content of the respective table cell.

Note: A table cell can hold a diverse range of HTML elements, such as text, images, lists, links, other tables, and more etc.

Table Rows

In HTML, every table row is delineated by the <tr> and ends with a </tr> tags. Thetr stands for table row.

Table Headers

Occasionally, you may need specific cells to serve as table header cells. In such instances, utilize the <th> tag instead of the <td> tag:

th stands for table header.

Typically, the text inside elements is both bold and centered. However, you have the option to modify this appearance using CSS.

HTML Table Headers

HTML tables can include headers for each column or row, or for multiple columns/rows.

EMIL	TOBIAS	LINUS

8:00
9:00
10:00
11:00
12:00
13:00

	MON	TUE	WED	THU	FRI
8:00
9:00
10:00
11:00
12:00

DECEMBER

Vertical Table Headers

To make the first column of a table act as headers, designate the initial cell in each row as a element.

HTML Table Colspan & Rowspan

HTML tables can contain cells that cover more than one row and/or column.

NAME

APRIL

2022

FIESTA
FIESTA

HTML Table - Colspan

To have a cell cover more than one column, apply the colspan attribute in your HTML code.

Note: The colspan attribute's value tells how many columns it should cover.

HTML Table - Rowspan

To have a cell cover more than one row in a table, utilize the rowspan attribute.

Note: The rowspan attribute's value shows how many rows it should cover.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
<style>
table, th, td {
border:1px solid black;
}
</style>
    <title>Page Title</title>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
<style>
table, th, td {
border:1px solid black;
}
</style>
    <title>Page Title</title>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
      </tr>
      <tr>
        <td>16</td>
        <td>14</td>
        <td>10</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
<style>
table, th, td {
border:1px solid black;
}
</style>
    <title>Page Title</title>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <th>Person 1</th>
        <th>Person 2</th>
        <th>Person 3</th>
      </tr>
      <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
      </tr>
      <tr>
        <td>16</td>
        <td>14</td>
        <td>10</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
  <body>
    <h2>TH elements define table headers</h2>
    <table style="width:100%">
      <tr>
        <th>Person 1</th>
        <th>Person 2</th>
        <th>Person 3</th>
      </tr>
      <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
      </tr>
      <tr>
        <td>16</td>
        <td>14</td>
        <td>10</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <h2>Vertical Table Headers</h2>
    <p>The first column becomes table headers if you set the first table cell in each table row to a TH element:</p>
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <td>Jill</td>
        <td>Eve</td>
      </tr>
      <tr>
        <th>Lastname</th>
        <td>Smith</td>
        <td>Jackson</td>
      </tr>
      <tr>
        <th>Age</th>
        <td>50</td>
        <td>94</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <h2>Cell that spans two columns</h2>
    <p>To expand a cell across multiple columns, utilize the colspan attribute..</p>
    <table style="width:100%">
      <tr>
        <th colspan="2">Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>43</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>57</td>
      </tr>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>
<p>To expand a cell across multiple rows, utilize the 'rowspan' attribute.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
  </tr>
</table>
</body>
</html>

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5 MathML