HTML Tables

Here is a step-by-step example of creating a simple HTML table :

You can use our free live html editor to test tutorial codes .

• Start with the <table> tag to define the table.
• Use the <tr> tag to define each row in the table.
• Use the <th> tag to define the table header cell(s) in each row (optional).
• Use the <td> tag to define the data cells in each row.

Edit Copy Hide

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

This example creates a simple table with two headers and two data cells.

• Extend the previous example by adding more rows and columns.
• Add additional <tr> elements for each row.
• Add corresponding <td> elements within each row.

Edit Copy Hide

      <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

Preview :

This example expands the table to include two rows with two data cells each.

• Introduce the 'rowspan' and 'colspan' attributes to merge cells vertically and horizontally, respectively.
• Use the 'rowspan' attribute to specify the number of rows a cell should span.
• Use the 'colspan' attribute to specify the number of columns a cell should span.

Edit Copy Hide

    <table>
  <tr>
    <th rowspan="2">Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td colspan="2">Data 1</td>
  </tr>
</table>

In this example, the first header cell spans two rows, and the second data cell spans two columns.

• Combine advanced HTML and CSS techniques to create a visually appealing and interactive table.
• Apply CSS styles to customize the table's appearance, such as borders, background colors, and font styles.
• Utilize CSS frameworks or libraries, like Bootstrap, to enhance the table with additional features like responsive design and sorting capabilities.

Edit Copy Hide

<table class="styled-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>X name</td>
      <td>Xname@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Y name</td>
      <td>Yname@example.com</td>
    </tr>
  </tbody>
</table>

This example demonstrates a styled table with a separate <thead> (table header) and <tbody> (table body) section, making it easier to apply different styles to each section.

Another complex HTML table example with corresponding CSS styles:

this example, we have a table with four columns: ID, Name, Email, and Phone. The CSS styles applied to the table include:

• 'width: 100%;' sets the table width to 100% of its parent container.
• 'border-collapse: collapse;' removes the spacing between table cells.
• '.complex-table thead th' styles the table header cells, setting a background color, bold font weight, and padding.
• '.complex-table tbody td' styles the table data cells, applying padding.
• '.complex-table tbody tr:nth-child(even)' applies a background color to alternate rows, creating a striped effect.
• '.complex-table tbody tr:hover' changes the background color of rows when hovered over, providing a visual feedback to the user.

Edit Copy Hide

<table class="complex-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>X name</td>
      <td>Xname@example.com</td>
      <td>(123) 456-7890</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Y name</td>
      <td>Yname@example.com</td>
      <td>(112) 233-4455</td>
    </tr>
    <tr>
      <td>3</td>
      <td>L name</td>
      <td>Lname@example.com</td>
      <td>(555) 666-7777</td>
    </tr>
  </tbody>
</table>

Edit Copy Hide

.complex-table {
  width: 100%;
  border-collapse: collapse;
}

.complex-table thead th {
  background-color: #f2f2f2;
  font-weight: bold;
  padding: 10px;
  text-align: left;
}

.complex-table tbody td {
  padding: 10px;
}

.complex-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.complex-table tbody tr:hover {
  background-color: #e2e2e2;
}