Module 37 : Bootstrap Tables – Basics.
1. Introduction to Bootstrap Tables
Tables are essential components in web applications for displaying structured data such as user lists, reports, pricing details, marksheets, dashboards, and analytics. Bootstrap provides predefined table classes that make tables:
Responsive
Visually consistent
Easy to style
Faster to develop without writing custom CSS
Bootstrap tables rely on standard HTML <table> elements, enhanced using Bootstrap utility and component classes.
2. Basic Structure of an HTML Table (Foundation)
Before Bootstrap styling, every table follows this structure:
<table> <thead> <tr> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Data</td> </tr> </tbody> </table>
<table> → Defines the table
<thead> → Header section
<tbody> → Body section
<tr> → Table row
<th> → Table heading (bold by default)
<td> → Table data cell
Bootstrap does not replace HTML tables, it enhances them.
3. Creating a Basic Bootstrap Table
Syntax
<table class="table"> ... </table>
Example
<table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Ali</td> <td>ali@example.com</td> </tr> <tr> <td>2</td> <td>Sara</td> <td>sara@example.com</td> </tr> </tbody> </table>
.table adds:
Padding to cells
Light horizontal lines
Clean typography
No borders by default
Professional appearance without CSS
4. Table Head Styling
Bootstrap automatically styles table headers.
Dark Header Example
<thead class="table-dark">
<thead class="table-dark"> <tr> <th>ID</th> <th>Product</th> <th>Price</th> </tr> </thead>
table-dark gives contrast
Improves readability
Often used in dashboards
5. Table Variations (Visual Styling)
5.1 Striped Rows
<table class="table table-striped">
Purpose:
Improves readability for large datasets
5.2 Bordered Table
<table class="table table-bordered">
Purpose:
Shows borders around all cells
Useful for invoices and reports
5.3 Hover Effect
<table class="table table-hover">
Purpose:
Highlights row on mouse hover
Common in admin panels
Combined Example
<table class="table table-striped table-bordered table-hover">
6. Contextual Table Classes (Color)
Bootstrap allows color- rows or cells.
Row Coloring Example
<tr class="table-success"> <td>1</td> <td>Completed</td> </tr> <tr class="table-danger"> <td>2</td> <td>Failed</td> </tr>
Common Classes
Class
Meaning
table-primary
Important
table-success
Success
table-danger
Error
table-warning
Warning
table-info
Information
table-secondary
Neutral
table-dark
Dark theme
7. Responsive Tables
Tables can break on small screens. Bootstrap solves this.
Responsive Wrapper
<div class="table-responsive"> <table class="table"> ... </table> </div>
Explanation
Adds horizontal scrolling on small devices
Prevents layout breaking
Essential for mobile-first design
8. Exercise
Exercise 1: Create a table with:
Roll No
Name
Subject
Marks
Result (color coded)
<table class="table table-bordered table-striped"> <thead class="table-dark"> <tr> <th>Roll No</th> <th>Name</th> <th>Subject</th> <th>Marks</th> <th>Result</th> </tr> </thead> <tbody> <tr> <td>101</td> <td>Rahul</td> <td>Math</td> <td>85</td> <td class="table-success">Pass</td> </tr> <tr> <td>102</td> <td>Anita</td> <td>Math</td> <td>35</td> <td class="table-danger">Fail</td> </tr> </tbody> </table>
Header styling
Row coloring
Structured data presentation
9. Creating a Responsive Bootstrap Table
Objective
To design a responsive, styled data table using Bootstrap classes.
Requirements
Bootstrap CDN
Basic HTML knowledge
Steps
Include Bootstrap CSS CDN
Create HTML table structure
Apply .table class
Add .table-striped and .table-hover
Wrap table in .table-responsive
Code
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="p-4"> <div class="table-responsive"> <table class="table table-hover table-striped"> <thead class="table-primary"> <tr> <th>ID</th> <th>Employee</th> <th>Department</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>IT</td> <td>50000</td> </tr> <tr> <td>2</td> <td>Mary</td> <td>HR</td> <td>45000</td> </tr> </tbody> </table> </div> </body> </html>
Result
Fully responsive table
Professional UI
Mobile-friendly
10. Research
Topic: Bootstrap Tables vs Custom CSS Tables
Key Findings
Aspect
Bootstrap Table
Custom CSS Table
Development Time
Fast
Slow
Responsiveness
Built-in
Manual
Consistency
High
Depends
Learning Curve
Low
Medium
Customization
Moderate
High
Industry Usage
Admin dashboards
CRM systems
ERP applications
Data reporting tools
Use Bootstrap tables for standard data
Combine with JavaScript libraries (DataTables.js) for:
Sorting
Pagination
Search
11. Summary
Bootstrap tables are HTML-based + class-driven
.table is the foundation
Responsive tables are essential for mobile devices
Contextual classes improve UX
Ideal for beginners and professionals
No comments:
Post a Comment