Tables

Tables

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Tables—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Tables in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Tables in your own words.

Apply table to a semantic <table> for baseline styling. Enhance with table-striped, table-hover, table-bordered, and responsive wrappers table-responsive.

Structure and scope

Use proper <thead>, <tbody>, and scope="col" on headers—Bootstrap styles do not replace HTML table semantics. For dense admin UIs, table-sm reduces padding.

Important interview questions and answers

Q: Why wrap tables in table-responsive?
A: Enables horizontal scroll on narrow viewports instead of squashing columns or breaking layout.
Q: When not use a table?
A: Pure layout or single-column lists—use grid or list-group; tables are for tabular data.

Self-check

Which class adds zebra striping?
What wrapper fixes overflow on mobile?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

table-striped vs hover—when each?
How would you make wide tables responsive?

No discussion yet. Be the first to ask a question.