Table caption placement in Bootsrap - Mini Project: Build & Apply

Table Caption Placement with Bootstrap

📖 Scenario: You are creating a simple webpage that shows a table of monthly sales data. You want to add a caption to the table to describe what the data represents. Using Bootstrap styles, you will place the caption correctly to make the table clear and accessible.

🎯 Goal: Build a Bootstrap-styled table with a caption placed above the table rows, describing the content as "Monthly Sales Data".

📋 What You'll Learn

Use a <table> element with Bootstrap's table class

Add a <caption> element with the exact text "Monthly Sales Data"

Place the caption above the table rows

Use semantic HTML5 elements

Ensure the table is responsive on small screens

💡 Why This Matters

🌍 Real World

Tables with captions are common in reports, dashboards, and data presentations on websites. Proper caption placement improves accessibility and clarity.

💼 Career

Knowing how to use Bootstrap tables with captions and responsive wrappers is essential for front-end developers building professional, accessible web pages.

1

Create the basic Bootstrap table structure

Create a <table> element with the class table. Inside it, add a <thead> with a row containing two headers: Month and Sales. Then add a <tbody> with two rows: first row with January and $1000, second row with February and $1200.

Bootsrap

Need a hint?

Remember to use <thead> for headers and <tbody> for data rows. Use Bootstrap's table class on the <table> tag.

2

Add a caption element with the text

Add a <caption> element inside the <table> with the exact text Monthly Sales Data. Place it as the first child inside the <table>.

Bootsrap

  
  
    
      Month
      Sales
    
  
  
    
      January
      $1000
    
    
      February
      $1200
    
  

Need a hint?

The <caption> tag should be the first child inside the <table> to appear above the rows.

3

Make the table responsive

Wrap the entire <table> inside a <div> with the Bootstrap class table-responsive to make the table scroll horizontally on small screens.

Bootsrap

  
    Monthly Sales Data
    
      
        Month
        Sales
      
    
    
      
        January
        $1000
      
      
        February
        $1200
      
    
  

Need a hint?

Bootstrap's table-responsive class on a wrapping <div> makes tables scroll horizontally on small screens.

4

Add a page container and header

Wrap the responsive table inside a <main> element with the Bootstrap class container. Above the table, add a <h1> heading with the text Sales Report.

Bootsrap

  
  
    
      Monthly Sales Data
      
        
          Month
          Sales
        
      
      
        
          January
          $1000
        
        
          February
          $1200
        
      
    
  

Need a hint?

Use a <main> with class container to center content and add a heading above the table.