Table rows and columns in HTML

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>

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.

Practice

1. Which HTML tag is used to create a row in a table?

easy

A. <tr>

B. <td>

C. <th>

D. <table>

Solution

1. Step 1: Understand table structure

   A table is made of rows and columns. Rows group cells horizontally.

2. Step 2: Identify the row tag

   The <tr> tag defines a table row, while <td> and <th> define cells inside rows.

3. Final Answer:

   <tr> -> Option A

4. Quick Check:

   Row tag = <tr> [OK]

Hint: Rows use <tr>, cells use <td> or <th> [OK]

Common Mistakes:

• Confusing <td> as row tag
• Using <th> for rows instead of headers
• Using <table> as row tag

2. Which of the following is the correct way to create a table header cell?

easy

A. <table>Header</table>

B. <td>Header</td>

C. <tr>Header</tr>

D. <th>Header</th>

Solution

1. Step 1: Know header cell tags

   Table headers use <th> tags to label columns or rows.

2. Step 2: Check the options

   Only <th>Header</th> uses <th> correctly for a header cell.

3. Final Answer:

   <th>Header</th> -> Option D

4. Quick Check:

   Headers use <th> tags [OK]

Hint: Headers always use <th>, not <td> [OK]

Common Mistakes:

• Using <td> for headers
• Using <tr> or <table> as cells
• Missing closing tags

3. What will the following HTML code display in a browser?

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
</table>

medium

A. An error because <th> cannot be used inside <tr>.

B. A list of names and ages without any table structure.

C. A table with two columns labeled 'Name' and 'Age', and one row with 'Alice' and '30'.

D. A table with one column and two rows.

Solution

1. Step 1: Analyze the table structure

   The first row uses <th> for headers 'Name' and 'Age'. The second row uses <td> for data 'Alice' and '30'.

2. Step 2: Understand rendering

   This creates a table with two columns labeled 'Name' and 'Age', and one data row with 'Alice' and '30'.

3. Final Answer:

   A table with two columns labeled 'Name' and 'Age', and one row with 'Alice' and '30'. -> Option C

4. Quick Check:

   Headers + data rows = labeled table [OK]

Hint: Headers in first row, data in next rows form columns [OK]

Common Mistakes:

• Thinking <th> cannot be inside <tr>
• Confusing table with list
• Assuming one column only

4. Identify the error in this table code:

<table>
  <tr>
    <td>Item 1</td>
  <tr>
    <td>Item 2</td>
  </tr>
</table>

medium

A. Table tag is not closed.

B. Missing closing tag for the first <tr>.

C. Using <td> instead of <th> for headers.

D. Extra closing tag at the end.

Solution

1. Step 1: Check row tags

   The first <tr> is opened but not closed before the second <tr> starts.

2. Step 2: Confirm correct nesting

   Each <tr> must have a matching closing </tr>. Here, the first row is missing its closing tag.

3. Final Answer:

   Missing closing tag for the first <tr>. -> Option B

4. Quick Check:

   Every needs a closing [OK]

Hint: Check every has a matching [OK]

Common Mistakes:

• Ignoring missing closing tags
• Confusing <td> and <th> errors
• Assuming table tag is unclosed

5. You want to create a table with 3 columns: 'Product', 'Price', and 'Stock'. The first row should be headers. Which code snippet correctly creates this table structure?

hard

A. <table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</table>

B. <table>
<tr>
<td>Product</td>
<td>Price</td>
<td>Stock</td>
</tr>
</table>

C. <table>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</table>

D. <table>
<tr>
<th>Product</th>
<td>Price</td>
<td>Stock</td>
</tr>
</table>

Solution

1. Step 1: Identify header row requirements

   The first row should use <th> tags for all three headers to label columns.

2. Step 2: Check each option

   <table>
     <tr>
       <th>Product</th>
       <th>Price</th>
       <th>Stock</th>
     </tr>
   </table>

   correctly uses <th> inside a <tr> for all headers.

   <table>
     <tr>
       <td>Product</td>
       <td>Price</td>
       <td>Stock</td>
     </tr>
   </table>

   uses <td> which is for data cells, not headers.

   <table>
     <th>Product</th>
     <th>Price</th>
     <th>Stock</th>
   </table>

   places <th> directly inside <table> without a row.

   <table>
     <tr>
       <th>Product</th>
       <td>Price</td>
       <td>Stock</td>
     </tr>
   </table>

   mixes <th> and <td> in the header row, which is incorrect.

3. Final Answer:

   <pre><table> <tr> <th>Product</th> <th>Price</th> <th>Stock</th> </tr> </table></pre> -> Option A

4. Quick Check:

   Headers = all <th> in a <tr> [OK]

Hint: Headers row uses all <th> inside one <tr> [OK]

Common Mistakes:

• Using <td> for headers
• Placing <th> outside <tr>
• Mixing <th> and <td> in header row