Current Location：How HTML > HTML Articles > Content

HTML Tables

HTML Tables

HTML tables are used to display data in rows and columns. They are widely used in web development to organize and present data in a structured format. In this article, we will cover all aspects of creating, styling, and working with HTML tables.

Creating a Basic Table

A simple HTML table consists of the <table>, <tr>, and <td> tags. The <table> tag defines the table, the <tr> tag defines a row, and the <td> tag defines a cell.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Adding Headers to the Table

To add headers to a table, you can use the <th> tag. This tag is used to define header cells in a table.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Spanning Rows and Columns

You can span rows and columns in a table using the rowspan and colspan attributes. These attributes define the number of rows or columns a cell should span.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <tr>
    <td rowspan="2">Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Styling Tables with CSS

You can style tables using CSS to change their appearance. Here is an example of styling a table with CSS:

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Adding Borders to Tables

You can add borders to tables using CSS. By setting the border property, you can control the border style, color, and width of the table.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 2px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Adding Background Colors to Tables

You can add background colors to tables using CSS. By setting the background-color property, you can specify the color of the table and its cells.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    background-color: lightblue;
  }
  th, td {
    background-color: lightgray;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Applying Alternating Row Colors

You can apply alternating row colors to tables using CSS. This can help improve the readability of the table.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 100%;
  }
  tr:nth-child(even) {
    background-color: lightgray;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Making Tables Responsive

To make tables responsive on smaller screens, you can use CSS media queries to adjust the table layout. Here is an example of making a table responsive:

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 100%;
  }
  th, td {
    padding: 8px;
    text-align: left;
  }
  @media screen and (max-width: 600px) {
    th, td {
      display: block;
    }
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>Header 1</th>
    <td>Cell 1</td>
  </tr>
  <tr>
    <th>Header 2</th>
    <td>Cell 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Sorting Tables with JavaScript

You can enable sorting functionality in tables using JavaScript. This allows users to sort table data by clicking on headers.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="myTable">
  <tr>
    <th onclick="sortTable(0)">Name</th>
    <th onclick="sortTable(1)">Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

<script>
  function sortTable(columnIndex) {
    var table, rows, switching, i, x, y, shouldSwitch;
    table = document.getElementById("myTable");
    switching = true;
    while (switching) {
      switching = false;
      rows = table.rows;
      for (i = 1; i < (rows.length - 1); i++) {
        shouldSwitch = false;
        x = rows[i].getElementsByTagName("td")[columnIndex];
        y = rows[i + 1].getElementsByTagName("td")[columnIndex];
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
      if (shouldSwitch) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
      }
    }
  }
</script>
</body>
</html>

Output:

HTML Tables

Adding Links and Images to Tables

You can add links and images to tables by using the <a> and <img> tags within table cells.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <tr>
    <th>Name</th>
    <th>Image</th>
  </tr>
  <tr>
    <td><a href="https://how2html.com">How2HTML</a></td>
    <td><img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Image"></td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Spanning Multiple Rows and Columns

You can span multiple rows and columns in a table using the rowspan and colspan attributes. This allows you to merge cells together.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <tr>
    <td rowspan="2">Cell 1</td>
    <td colspan="2">Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Tables

Conclusion

HTML tables are a fundamental part of web development and are used to present data in a structured format. By learning how to create, style, and work with tables, you can effectively organize and display information on your website. Experiment with different table layouts and styles to find the best fit for your content.

Like(0)

HTML Articles