Skip to main content
Bootstrap
CHAPTER 09 Beginner

Bootstrap Tables

Updated: May 18, 2026
5 min read

# CHAPTER 9

Bootstrap Tables

1. Chapter Introduction

Tables display structured data — grades, orders, user lists, analytics. Bootstrap's table utilities transform plain HTML tables into professional, responsive data displays with striping, hover highlights, color variants, and mobile-ready overflow scrolling.

2. Learning Objectives

  • Apply Bootstrap table classes.
  • Add striped rows, hover, and borders.
  • Color table rows using contextual classes.
  • Make tables responsive on mobile.
  • Build a student marks table.

3. Basic Table

html
123456789101112131415161718192021222324 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Subject</th>
      <th scope="col">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Alice Johnson</td>
      <td>Mathematics</td>
      <td>92</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Bob Smith</td>
      <td>Physics</td>
      <td>78</td>
    </tr>
  </tbody>
</table>

4. Table Variants

html
1234567891011121314151617181920 
<!-- Striped rows -->
<table class="table table-striped">...</table>

<!-- Striped columns -->
<table class="table table-striped-columns">...</table>

<!-- Hoverable rows -->
<table class="table table-hover">...</table>

<!-- Bordered -->
<table class="table table-bordered">...</table>

<!-- Borderless -->
<table class="table table-borderless">...</table>

<!-- Small (compact) -->
<table class="table table-sm">...</table>

<!-- Combine variants -->
<table class="table table-striped table-hover table-bordered table-sm">...</table>

5. Table Color Variants

html
1234567891011121314151617 
<!-- Dark header -->
<table class="table">
  <thead class="table-dark">
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr class="table-success"><td>Alice</td><td>95</td></tr>
    <tr class="table-warning"><td>Bob</td><td>61</td></tr>
    <tr class="table-danger"><td>Carol</td><td>42</td></tr>
    <tr class="table-info"><td>David</td><td>88</td></tr>
    <tr class="table-primary"><td>Eve</td><td>77</td></tr>
    <tr class="table-secondary"><td>Frank</td><td>55</td></tr>
  </tbody>
</table>

<!-- Full dark table -->
<table class="table table-dark table-striped table-hover">...</table>

6. Responsive Tables

html
12345678910111213141516171819202122 
<!-- Wrap in div for horizontal scroll on small screens -->
<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>ID</th><th>Name</th><th>Email</th><th>Phone</th>
        <th>City</th><th>Country</th><th>Score</th><th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td><td>Alice</td><td>alice@mail.com</td>
        <td>+1234567890</td><td>New York</td><td>USA</td><td>92</td>
        <td><span class="badge bg-success">Active</span></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Responsive at specific breakpoints -->
<div class="table-responsive-md">...</div>  <!-- scroll only below md -->
<div class="table-responsive-lg">...</div>  <!-- scroll only below lg -->

7. Mini Project: Student Marks Table

html
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Student Marks</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
</head>
<body class="bg-light">
  <div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h2 class="mb-0">📊 Student Results</h2>
      <span class="badge bg-primary fs-6">Class 10-A</span>
    </div>
    <div class="card shadow-sm border-0">
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-striped table-hover mb-0">
            <thead class="table-dark">
              <tr>
                <th>#</th><th>Student Name</th><th>Math</th>
                <th>Science</th><th>English</th><th>Total</th><th>Grade</th><th>Status</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td><td><strong>Alice Johnson</strong></td>
                <td>95</td><td>88</td><td>92</td>
                <td><strong>275</strong></td>
                <td><span class="badge bg-success">A+</span></td>
                <td><span class="badge bg-success">Pass</span></td>
              </tr>
              <tr>
                <td>2</td><td><strong>Bob Smith</strong></td>
                <td>72</td><td>65</td><td>70</td>
                <td><strong>207</strong></td>
                <td><span class="badge bg-primary">B</span></td>
                <td><span class="badge bg-success">Pass</span></td>
              </tr>
              <tr class="table-warning">
                <td>3</td><td><strong>Carol Davis</strong></td>
                <td>48</td><td>52</td><td>45</td>
                <td><strong>145</strong></td>
                <td><span class="badge bg-warning text-dark">D</span></td>
                <td><span class="badge bg-danger">Fail</span></td>
              </tr>
            </tbody>
            <tfoot class="table-secondary fw-bold">
              <tr>
                <td colspan="2">Class Average</td>
                <td>71.7</td><td>68.3</td><td>69</td>
                <td>209</td><td colspan="2"></td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

8. Common Mistakes

  • Forgetting scope attributes: <th scope="col"> for header cells and <th scope="row"> for row headers are important for screen reader accessibility.
  • Not wrapping wide tables: Without .table-responsive, wide tables overflow their container on mobile, breaking the layout.

9. MCQs

Question 1

What class applies alternating row colors?

Question 2

Responsive table wrapper class?

Question 3

Dark table header?

Question 4

Compact table class?

Question 5

Hover highlight class?

Question 6

Row success color?

Question 7

scope="col" on <th> means?

Question 8

Full dark table?

Question 9

table-responsive-md means?

Question 10

Borderless table?

10. Interview Questions

  • Q: How does Bootstrap make tables responsive on mobile devices?
  • Q: What accessibility attributes should be included in Bootstrap tables?

11. Summary

Bootstrap tables transform plain HTML <table> elements with striping, hover effects, color variants, and responsive wrapping. The .table-responsive wrapper solves the mobile overflow problem. Combining table-striped table-hover with contextual row colors creates professional data displays.

12. Next Chapter Recommendation

In Chapter 10: Bootstrap Cards, we master the most versatile Bootstrap component — cards for product listings, profile displays, blog posts, and pricing sections.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Bootstrap Forms
Next Chapter Bootstrap Cards

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1