Bordered and borderless tables in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What does this Bootstrap table look like?

Given the following HTML code using Bootstrap classes, what visual style will the table have when rendered in a browser?

Bootsrap

<table class="table table-bordered">
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td></tr>
    <tr><td>Bob</td><td>25</td></tr>
  </tbody>
</table>

A The table has borders around each cell and the entire table.

B The table has no borders at all, just plain text.

C The table has only horizontal lines separating rows, no vertical borders.

D The table has striped rows with alternating background colors but no borders.

💡 Hint

The class 'table-bordered' adds borders around table cells.

The Bootstrap class 'table-bordered' adds borders around every cell and the table itself, making the table fully bordered.

🧠 Conceptual

intermediate

Which Bootstrap class removes all borders from a table?

You want a table with no visible borders or lines between cells. Which Bootstrap class should you add to the table element?

A table-bordered

B table-striped

C table-borderless

D table-hover

💡 Hint

Look for a class name that suggests 'no borders'.

The 'table-borderless' class removes all borders from the table cells, making the table appear borderless.

📝 Syntax

advanced

Identify the error in this Bootstrap table code

What error will this code cause when rendered in a browser?

Bootsrap

<table class="table table-borderless">
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>John</td><td>40</td></tr>
  </tbody>
</table>

A The table will render normally with no errors.

B The table header 'Name' cell is missing a closing </th> tag, causing rendering issues.

C The table body row has mismatched <td> tags causing a syntax error.

D The class 'table-borderless' is invalid and will cause a CSS error.

💡 Hint

Check if all HTML tags are properly closed.

The for 'Name' is missing its closing tag , which can cause the browser to render the header incorrectly or merge cells unexpectedly.

❓ selector

advanced

Which CSS selector targets only borderless tables in Bootstrap?

You want to write custom CSS that only applies to Bootstrap tables without borders. Which selector correctly targets these tables?

A table.table-striped

B table.table-bordered

C .table-borderless > tbody > tr > td

D table.table-borderless

💡 Hint

Look for the class that means borderless and select the table element.

The selector 'table.table-borderless' targets elements with the class 'table-borderless', which are borderless tables in Bootstrap.

❓ accessibility

expert

How to improve accessibility for a borderless Bootstrap table?

Borderless tables can be harder to read for some users. Which approach best improves accessibility while keeping the table borderless?

A Add <caption> describing the table and use <th scope="col"> for headers.

B Add visible borders using CSS to all <td> cells.

C Remove all table headers and use only <td> cells for simplicity.

D Use only <div> elements styled as tables instead of <table>.

💡 Hint

Think about semantic HTML elements that help screen readers.

Adding a

and proper

headers improves screen reader navigation and understanding, which is important especially when visual borders are missing.