0
0
HTMLmarkup~5 mins

Table rows and columns in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Tables help organize information in rows and columns, like a grid. This makes data easy to read and compare.

Showing a schedule with days and times
Listing products with prices and descriptions
Displaying scores or statistics in sports
Organizing contact information like names and phone numbers
Comparing features of different items side by side
Syntax
HTML
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

<table> starts the table.

<tr> creates a row, and <td> creates a cell (column) inside that row.

Examples
A simple 2-row, 2-column table showing fruits and their colors.
HTML
<table>
  <tr>
    <td>Apple</td>
    <td>Red</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
</table>
Using <th> for header cells to label columns.
HTML
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
  </tr>
</table>
Sample Program

This code creates a simple table with three rows of fruits and their colors. It uses <th> for headers and <td> for data cells. The table has borders and spacing for clarity. The aria-label helps screen readers understand the table's purpose.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Simple Table</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
      max-width: 400px;
      margin: 1rem auto;
      font-family: Arial, sans-serif;
    }
    th, td {
      border: 1px solid #333;
      padding: 0.5rem 1rem;
      text-align: left;
    }
    th {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <main>
    <h1>Fruit Colors</h1>
    <table aria-label="Fruit colors table">
      <tr>
        <th>Fruit</th>
        <th>Color</th>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Red</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>Yellow</td>
      </tr>
      <tr>
        <td>Grapes</td>
        <td>Purple</td>
      </tr>
    </table>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use <th> for headers to help people understand the table.

Use aria-label or caption to describe the table for screen readers.

Tables should be simple and clear for easy reading on all devices.

Summary

Tables organize data in rows (<tr>) and columns (<td> or <th>).

Use headers (<th>) to label columns clearly.

Keep tables simple and accessible for everyone.