Table rows and columns in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this HTML table?

Look at the HTML code below. How many rows and columns will the table display in the browser?

HTML

<table>
  <tr>
    <td>Apple</td>
    <td>Banana</td>
  </tr>
  <tr>
    <td>Cherry</td>
    <td>Date</td>
  </tr>
</table>

A 2 rows and 2 columns

B 2 rows and 1 column

C 1 row and 2 columns

D 1 row and 1 column

💡 Hint

Count the number of tags for rows and tags inside each for columns.

The <tr> tag creates a table row. There are 2 <tr> tags, so 2 rows. Each row has 2 <td> cells, so 2 columns.

🧠 Conceptual

intermediate

Which tag defines a table header cell?

In HTML tables, which tag is used to create a header cell that is usually bold and centered by default?

A <th>

B <td>

C <tr>

D <thead>

💡 Hint

Header cells are different from regular cells and usually appear at the top of columns.

The <th> tag defines a header cell in a table. It is bold and centered by default. <td> is for regular cells, <tr> is for rows, and <thead> groups header rows.

❓ selector

advanced

Which CSS selector targets all cells in the second column of a table?

Given a table, which CSS selector will select every cell in the second column only?

A table tr:nth-child(2) td

B table tr td:nth-child(2)

C table td:nth-of-type(2)

D table td:nth-child(2)

💡 Hint

Think about selecting the second cell inside each row.

table tr td:nth-child(2) selects the second <td> inside each <tr>, which means the second column cells. Option B selects the second <td> of the whole table, not per row. Option B selects all cells in the second row. Option B selects all <td> that are second child of their parent, but without tr context it may select incorrectly.

❓ layout

advanced

How to make table columns evenly spaced using CSS?

You want all columns in your HTML table to have equal width regardless of content. Which CSS property and value will achieve this?

A table { border-collapse: collapse; }

B table { width: auto; }

C table { display: flex; }

D table { table-layout: fixed; width: 100%; }

💡 Hint

One property controls how the browser calculates column widths.

table-layout: fixed; forces the table to divide width evenly among columns. Setting width: 100% makes the table fill its container. Other options do not evenly space columns: width: auto sizes columns by content, border-collapse affects borders, and display: flex is invalid for tables.

❓ accessibility

expert

Which attribute improves accessibility by associating table headers with data cells?

To help screen readers understand which header belongs to which data cell in a complex table, which attribute should you use on <td> elements?

A role

B aria-labelledby

C headers

D scope

💡 Hint

This attribute lists the IDs of header cells related to the data cell.

The headers attribute on <td> elements contains a space-separated list of id values of <th> elements that act as headers for that cell. This helps screen readers associate data cells with their headers in complex tables. aria-labelledby is similar but less specific for tables. scope is used on <th> to define header scope. role defines element roles but does not link headers to cells.

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