📘 Lesson · Lesson 13

Styling Lists and Tables

Lists और Tables Styling

Styling Lists — list-style-type

ul { list-style-type: square; }    /* ■ instead of ● */
ol { list-style-type: upper-roman; } /* I, II, III */
ul { list-style-type: none; }      /* remove markers entirely */

Value	Marker
disc / circle / square	● ○ ■ (for ul)
decimal	1, 2, 3 (default ol)
upper-roman / lower-alpha	I, II / a, b, c
none	No marker at all

You met these marker types in the HTML lists chapter — now you set them with CSS instead of the old type attribute (the CSS way is preferred). The most-used value by far is none, which strips the bullets completely — the first step in turning a list into something that doesn't look like a list, such as a navigation menu.

Lists into Navigation — the classic pattern

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

.nav {
    list-style: none;      /* remove bullets */
    padding: 0;            /* remove default indent */
    display: flex;         /* put items in a row */
    gap: 20px;             /* space between them */
}

This is how nearly every website's navigation bar is built. Semantically, a menu IS a list of links — so you use a <ul>, then CSS transforms its appearance: remove the bullets and default padding, then display: flex lays the items in a horizontal row instead of a vertical stack. The result looks nothing like a bulleted list, but keeps the correct, accessible HTML structure underneath. Structure stays semantic; CSS handles the look — the core CSS philosophy in action.

Styling Tables — making them readable

table { width: 100%; }
th, td {
    padding: 12px;           /* breathing room in cells */
    text-align: left;
    border-bottom: 1px solid #ddd;
}
th {
    background: #f4f4f4;      /* highlight the header row */
    font-weight: bold;
}

Raw HTML tables look cramped and dated. Two changes fix 80% of it: padding inside cells (th/td) gives content room to breathe, and a subtle border-bottom on rows creates clean separating lines instead of heavy boxes. Styling the header row (th) with a light background makes it stand out. These few rules turn an ugly default table into a clean, professional one — perfect for the marksheets and timetables from your HTML tables chapter.

border-collapse — the table borders fix

table {
    border-collapse: collapse;   /* merge double borders into single */
}

WITHOUT collapse: ╔═╤═╗ doubled, gap-py borders ╠═╪═╣ WITH collapse: ┌─┬─┐ clean single lines ├─┼─┤

The one table property everyone must know. By default, table cells each have their OWN border, so adjacent cells show DOUBLED borders with tiny gaps — it looks messy. border-collapse: collapse merges those touching borders into single clean lines. It's almost always the first thing you set on a styled table. Without it, borders look broken; with it, they look professional. Memorise this one.

Striped Rows and Hover — polish

/* Zebra stripes - color every even row */
tr:nth-child(even) {
    background: #f9f9f9;
}
/* Highlight the row under the mouse */
tr:hover {
    background: #eef4ff;
}

Two touches that make big tables far easier to read: zebra striping (nth-child(even) colours alternate rows) helps the eye track across wide rows without losing the line, and a hover highlight (tr:hover) shows exactly which row you're pointing at. These use pseudo-classes (a full chapter ahead) — but they're so useful for tables that they're worth meeting now. Add these to a data table and it instantly feels polished and interactive.

Exam Corner

Q: How do you remove bullet points from a list? list-style: none; (and usually padding: 0).

Q: How is a navigation bar built from a list? A ul of links, then list-style: none + display: flex to make a horizontal row.

Q: What does border-collapse: collapse do? Merges doubled cell borders into single clean lines.

Q: How do you create striped table rows? tr:nth-child(even) { background: ...; }

Q: Which property gives table cells breathing room? padding on th and td.

Lists Style करना — list-style-type

ul { list-style-type: square; }    /* ● ki jagah ■ */
ol { list-style-type: upper-roman; } /* I, II, III */
ul { list-style-type: none; }      /* markers poori tarah hatao */

Value	Marker
disc / circle / square	● ○ ■ (ul के लिए)
decimal	1, 2, 3 (default ol)
upper-roman / lower-alpha	I, II / a, b, c
none	कोई marker नहीं

ये marker types आपने HTML lists chapter में देखे — अब इन्हें पुराने type attribute के बजाय CSS से set करते हैं (CSS तरीका पसंदीदा). सबसे ज़्यादा use होने वाली value none है, जो bullets पूरी तरह हटाती है — list को ऐसी चीज़ बनाने का पहला कदम जो list जैसी न दिखे, जैसे navigation menu.

Lists से Navigation — classic pattern

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

.nav {
    list-style: none;      /* bullets hatao */
    padding: 0;            /* default indent hatao */
    display: flex;         /* items ko row me rakho */
    gap: 20px;             /* unke beech space */
}

लगभग हर website का navigation bar ऐसे ही बनता है. Semantically, menu links की एक list HAI — तो आप <ul> use करते हैं, फिर CSS उसकी दिखावट बदलती है: bullets और default padding हटाओ, फिर display: flex items को vertical stack के बजाय horizontal row में रखता है. नतीजा bulleted list जैसा बिल्कुल नहीं दिखता, पर नीचे सही, accessible HTML structure रखता है. Structure semantic रहता है; CSS look संभालती है — core CSS philosophy काम करते हुए.

Tables Style करना — पढ़ने लायक बनाना

table { width: 100%; }
th, td {
    padding: 12px;           /* cells me saans lene ki jagah */
    text-align: left;
    border-bottom: 1px solid #ddd;
}
th {
    background: #f4f4f4;      /* header row highlight */
    font-weight: bold;
}

कच्ची HTML tables तंग और पुरानी दिखती हैं. दो बदलाव 80% ठीक कर देते हैं: cells (th/td) के अंदर padding content को सांस लेने की जगह देता है, और rows पर हल्का border-bottom भारी boxes के बजाय साफ अलग करने वाली lines बनाता है. Header row (th) को हल्के background से style करना उसे अलग दिखाता है. ये कुछ rules भद्दी default table को साफ, professional बना देते हैं — आपके HTML tables chapter की marksheets और timetables के लिए perfect.

border-collapse — table borders का fix

table {
    border-collapse: collapse;   /* double borders ko single me merge */
}

collapse ke BINA: ╔═╤═╗ doubled, gap wale borders ╠═╪═╣ collapse ke SAATH: ┌─┬─┐ saaf single lines ├─┼─┤

वह एक table property जो सबको पता होनी चाहिए. Default रूप से हर table cell का अपना border होता है, तो साथ वाली cells DOUBLED borders छोटे gaps के साथ दिखाती हैं — गड़बड़ लगता है. border-collapse: collapse उन छूते borders को single साफ lines में merge करता है. Styled table पर यह लगभग हमेशा पहली चीज़ set करते हैं. इसके बिना borders टूटे दिखते हैं; इसके साथ professional. इसे याद कर लीजिए.

Striped Rows और Hover — polish

/* Zebra stripes - har even row ko color */
tr:nth-child(even) {
    background: #f9f9f9;
}
/* Mouse ke neeche wali row highlight */
tr:hover {
    background: #eef4ff;
}

दो touches जो बड़ी tables पढ़ना कहीं आसान बनाते हैं: zebra striping (nth-child(even) बारी-बारी rows रंगता है) आंख को चौड़ी rows पर line खोए बिना track करने में मदद करता है, और hover highlight (tr:hover) ठीक दिखाता है आप किस row पर point कर रहे हैं. ये pseudo-classes use करते हैं (पूरा chapter आगे) — पर tables के लिए इतने काम के हैं कि अभी मिलना सही है. Data table में ये जोड़िए और तुरंत polished तथा interactive लगता है.

Exam Corner

Q: List से bullet points कैसे हटाते हैं? list-style: none; (और आमतौर पर padding: 0).

Q: List से navigation bar कैसे बनता है? Links की ul, फिर list-style: none + display: flex से horizontal row.

Q: border-collapse: collapse क्या करता है? Doubled cell borders को single साफ lines में merge करता है.

Q: Striped table rows कैसे बनाते हैं? tr:nth-child(even) { background: ...; }

Q: कौन-सी property table cells को साँस लेने की जगह देती है? th और td पर padding.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.