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.