Table rows and columns in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What HTML tag is used to create a table row?

The <tr> tag is used to create a table row in HTML.

beginner

Which tags define columns inside a table row?

The <td> tag defines a standard data cell (column), and <th> defines a header cell (column) inside a table row.

beginner

What is the difference between <td> and <th>?

<td> creates a normal data cell, while <th> creates a header cell that is usually bold and centered by default.

intermediate

How do you group rows inside a table body?

Use the <tbody> tag to group rows inside the main body of a table.

intermediate

Why should you use semantic tags like <thead>, <tbody>, and <tfoot>?

They help browsers and assistive technologies understand the table structure better, improving accessibility and styling.

Which tag creates a new row in an HTML table?

A <tr>

B <td>

C <th>

D <table>

The <tr> tag defines a table row.

Which tag is used for a header cell in a table column?

A <thead>

B <td>

C <tr>

D <th>

<th> creates a header cell, usually bold and centered.

What tag groups the main rows of a table?

A <thead>

B <tfoot>

C <tbody>

D <tr>

<tbody> groups the main body rows of a table.

Which tag defines a single data cell in a table row?

A <td>

B <th>

C <tr>

D <table>

<td> defines a standard data cell.

Why use semantic tags like <thead> and <tbody>?

A To add colors to the table

B To improve accessibility and structure

C To make the table bigger

D To add animations

Semantic tags help browsers and assistive tools understand the table better.

Explain how to create a table with rows and columns in HTML.

Think about how you organize data in a grid on paper.

Why is it important to use for header cells instead of just styling ?

Consider how someone using a screen reader understands the table.

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