start learning
Image 1
3HTMLTables

HTML Tables

HTML tables are used to organize and display data in rows and columns on a web page. They are created using a combination of HTML tags, such as <table>, <tr>, <th>, and <td> .

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 .


Simple Table with Headers


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

Preview :
Header 1 Header 2
Data 1 Data 2

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


Table with Multiple Rows and Columns


      <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 :

Header 1 Header 2
Data 1 Data 2
Data 3 Data 4

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


Table with Rowspan and Colspan


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

Preview :
Header 1 Header 2 Header 3
Data 1

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


Complex Table with Styling


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

Preview :
ID Name Email
1 X name Xname@example.com
2 Y name Yname@example.com

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:


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

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

Table Preview:
ID Name Email Phone
1 X name Xname@example.com (123) 456-7890
2 Y name Yname@example.com (112) 233-4455
3 L name Lname@example.com (555) 666-7777

×
b