Tables in HTML

  • Last updated Apr 25, 2024

In HTML, tables are structural elements used to display data in a tabular format, organizing information into rows and columns.

Here's the basic structure of an HTML table:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
  • <table>: The container element for the entire table.
  • <tr>: Stands for table row and contains the cells (data or header) of a row.
  • <th>: Represents a header cell, typically used for column and row headings.
  • <td>: Represents a data cell, holding the actual content.
Example

Here's an example of a simple HTML table:

Name Registration Number Programming course
Mikke 10005 Java
Danny 10004 Python
Kenny 10003 .Net
Victory 10002 PHP
Jimmz 10001 React

Complete code for creating a table in an HTML document:

<!doctype html>
<html lang="en">
<head>
<title>My web page</title>
<style>
     table,
     th,
     td {
          padding:10px;
          border:1px solid black;
          border-collapse:collapse;
       }
</style>
</head>
<body>
<table class="table table-sm table-bordered">
    <tr>
        <th>Name</th>
        <th>Registration Number</th>
        <th>Programming course</th>
    </tr>
    <tr>
        <td>Mikke</td>
        <td>10005</td>
        <td>Java</td>
    </tr>
    <tr>
        <td>Danny</td>
        <td>10004</td>
        <td>Python</td>
    </tr>
    <tr>
        <td>Kenny</td>
        <td>10003</td>
        <td>.Net</td>
    </tr>
    <tr>
        <td>Victory</td>
        <td>10002</td>
        <td>PHP</td>
    </tr>
    <tr>
        <td>Jimmz</td>
        <td>10001</td>
        <td>React</td>
    </tr>
</table>
</body>
</html>