Table caption placement in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a caption above the table using Bootstrap.

Bootsrap

<table class="table">
  [1] Caption text here
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

A<tfoot>

B<thead>

C<caption>

D<div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using instead of for the caption.

Placing the caption inside a

which is invalid inside a table.

The element is used to add a caption to a table, and it appears above the table by default.

2fill in blank

medium

Complete the code to place the caption below the table using Bootstrap classes.

Bootsrap

<table class="table">
  <caption class="[1]">Caption below the table</caption>
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Acaption-bottom

Bcaption-top

Ctext-center

Dtable-footer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'caption-top' which places caption above the table.

Using unrelated classes like 'text-center' which only centers text.

Bootstrap provides the class 'caption-bottom' to place the caption below the table.

3fill in blank

hard

Fix the error in the code to correctly add a caption above the table with Bootstrap.

Bootsrap

<table class="table">
  [1] Caption text
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

A<span>

B<div>

C<header>

D<caption>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or instead of inside the table.

Placing caption outside the table element.

Only the tag is valid inside a table to add a caption; other tags cause errors or invalid HTML.

4fill in blank

hard

Fill both blanks to create a table with a caption below and a header row.

Bootsrap

<table class="table">
  <caption class="[1]">Table caption</caption>
  <thead>
    <tr><th>[2]</th></tr>
  </thead>
  <tbody>
    <tr><td>Content</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Acaption-bottom

Bcaption-top

CName

DTitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'caption-top' which places caption above instead of below.

Using unrelated header text that doesn't fit the table context.

The class 'caption-bottom' places the caption below the table, and 'Name' is a valid header text.

5fill in blank

hard

Fill all three blanks to create a table with a caption above, a header, and a footer.

Bootsrap

<table class="table">
  <caption class="[1]">[2]</caption>
  <thead>
    <tr><th>ID</th></tr>
  </thead>
  <tfoot>
    <tr><td>[3]</td></tr>
  </tfoot>
  <tbody>
    <tr><td>001</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Acaption-top

BUser List

CEnd of table

Dcaption-bottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'caption-bottom' for caption above the table.

Putting header text in the footer cell.

The class 'caption-top' places the caption above the table, 'User List' is the caption text, and 'End of table' is footer text.