HTML Table

What is Table in HTML?

HTML tables allow web developers to arrange data into rows and columns.

Table consists of table cells inside rows and columns.

HTML Table Concepts:

Note: Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Note: Each table rows is defined by a <tr> and a </tr> tag.

tr stands for table rows.

Note: In those cases use the <th> tag instead of the <td> tag.

th stands for table header.

HTML Table Header

Example of HTML Table Header <th>Header:</th>

                          
  <table>
    <tr>
      <th>Name</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>C++</td>
      <td>2000</td>
    </tr>
  </table>

HTML Table with one rows

Table with one row <tr>Table row</tr>

                          
<table>
 <tr>
   <th>Name</th>
   <th>Year</th>
 </tr>
</table>

Example of HTML Table with more than one rows

Full html code with table with more than one rows and it contain css code.

                          
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Programming Languages Table</title>
  <style>
    table {
      width: 50%;
      border-collapse: collapse;
      margin: auto;
      margin-top: 20px;
    }
    th, td {
      padding: 12px;
      border: 1px solid #3498db; /* Blue color for table borders */
    }
    th {
      background-color: #3498db;
      color: #ffffff; /* White color for table header text */
    }
    tr:nth-child(even) {
      background-color: #f2f2f2; /* Alternate background color for even rows */
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>C++</td>
      <td>2000</td>
    </tr>
    <tr>
      <td>Java</td>
      <td>2005</td>
    </tr>
  </table>
</body>
</html>