MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Tables are the best way to display structured grid data like exam report cards, cricket scorecards, sports leaderboards, and pricing comparisons. 📊
However, by default, an unstyled HTML <table> looks like something from 1993:
With just a few lines of modern CSS, you can transform clumsy raw data into clean, readable, professional tables that look fantastic on both desktop screens and smartphones.
In this lesson, you will master:
border-collapse: collapse;:nth-child(even)Think about your Annual Report Card Marksheet:
+-------------------------------------------------------------------------+ | UGLY VS MODERN STYLED TABLE | +-------------------------------------------------------------------------+ | DEFAULT HTML TABLE (Prison Cell Cage): | | +----+---------+-----+ | | |Roll|Subject |Marks| <-- Double borders with 2px gap between cells! | | +----+---------+-----+ | | | 10 |Science | 94 | <-- Text touches the borders directly. | | +----+---------+-----+ | | | | MODERN CSS STYLED TABLE (Clean Report Card): | | ----------------------------------------------------------------------- | | Roll No Subject Name Theory Practical Total Marks | | ----------------------------------------------------------------------- | | 101 Mathematics 78 19 97 | | ----------------------------------------------------------------------- | | 102 Science & Tech 75 20 95 | <-- Soft Zebra Stripe | ----------------------------------------------------------------------- | | 103 English Literature 82 -- 82 | | ----------------------------------------------------------------------- | | * Single collapsed lines, generous padding, and readable stripes! | +-------------------------------------------------------------------------+
border-collapse: collapse;By default, browsers set border-collapse: separate;. This means every single <td> and <th> draws its own independent border box, leaving an awkward 2-pixel gap between adjacent cells.
The first rule you should always write for any table is:
In unstyled tables, numbers and letters touch the cell walls. To make tables comfortable to read, add generous padding to both <th> (table headers) and <td> (table data cells):
left, financial numbers, percentages, and total marks are much easier to scan when aligned right!
```css
.col-number {
text-align: right;
}
```Beginners often write border: 1px solid black; on every cell, which makes the table look like a heavy metal cage.
Modern UI designers use subtle, light gray horizontal dividers only:
When a table has 20 or 50 rows of data (like a sports day participant list), it is easy for a reader's eyes to slip into the wrong row.
Zebra striping gives every alternating row a soft, tinted background. In CSS, we do this using the :nth-child() pseudo-class:
Here is a common mobile nightmare: A student opens their school timetable on a smartphone with a 380px wide screen, but the 6-day timetable is 800px wide. The table either shrinks until the text is microscopic, or blows through the screen edge and breaks the entire website layout!
Never apply overflow-x: auto; directly to the <table> tag—browsers do not handle table overflow reliably.
Instead, wrap your table inside an outer <div>:
Now, on small smartphone screens, the table scrolls smoothly left and right without stretching or breaking the rest of your page!
Here is a complete, production-grade stylesheet for modern data tables:
| Bad Practice ❌ | Why It Fails ⚠️ | Better Approach ✅ |
|---|---|---|
Forgetting border-collapse: collapse; | Cells show double-thick borders with ugly 2px white gaps. | Always add border-collapse: collapse; to your table selector. |
| Putting heavy black borders on every cell | The table looks like a prison cage and distracts from the data. | Use light gray row dividers (border-bottom: 1px solid #e2e8f0;). |
Putting overflow-x: auto; directly on <table> | Browsers often fail to apply overflow scrolling to raw <table> elements. | Wrap the <table> in a <div class="table-container"> with overflow-x: auto;. |
| Center-aligning long text descriptions | Ragged, uneven starting letters make reading difficult. | Left-align text (text-align: left;) and right-align numbers (text-align: right;). |
border-collapse: collapse; is mandatory to eliminate double-spaced cell borders.th, td { padding: ... } creates breathing room so data does not touch borders.tbody tr:nth-child(even) { background-color: ... } improves row scanability.tbody tr:hover { background-color: ... } highlights active rows.<div style="overflow-x: auto;"> with a min-width on the table to allow horizontal scrolling on mobile.border-collapse: collapse; preferred over heavy black grid borders around every individual cell?<th>)?student-report-card.html.In the next lesson, we will continue your web styling journey with Block vs Inline vs Inline-Block: Mastering CSS Display (Display and Visibility).
👉 Continue to Next Lesson: Block vs Inline vs Inline-Block: Mastering CSS Display →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Styling Ordered and Unordered Lists | Block vs Inline vs Inline-Block: Mastering CSS Display |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.