[X(B)] STRUCTURING (HTML Element) TABLE

This CSS code snippet styles an HTML data table to make it visually appealing, readable, and functional (specifically with a sticky header). Here is a detailed breakdown of what each rule does:

---

1. Overall Table Structure

table { border-collapse: collapse; min-width: 700px; }

• border-collapse: collapse;: Merges adjacent table borders into a single, clean border instead of showing double lines between cells.
• min-width: 700px;: Ensures the table maintains a minimum width of 700 pixels, preventing it from squishing awkwardly on smaller containers or screens.

2. Cells and Borders

th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }

• border: 1px solid #ccc;: Adds a light gray border around every header (th) and data (td) cell.
• padding: 10px;: Adds inner spacing around the text inside every cell, preventing content from touching the borders and improving readability.
• text-align: left;: Aligns all cell text to the left (the standard convention for data readability).

3. Sticky Table Header

th { background-color: #5a2ea6; color: #fff; position: sticky; top: 0; z-index: 2; }

• background-color: #5a2ea6;: Gives the header a bold purple background color.
• color: #fff;: Turns the header text white for high contrast and readability against the purple background.
• position: sticky; and top: 0;: Keeps the header pinned to the very top of the table container when users scroll down through long lists of data.
• z-index: 2;: Ensures the header stays stacked above the scrolling table rows so the text doesn't bleed underneath them.

4. Row Striping (Zebra Striping)

tr:nth-child(even) { background-color: #f9f9f9; }
tr:nth-child(odd) { background-color: #ffffff; }

• tr:nth-child(even): Applies a very light gray background (#f9f9f9) to even-numbered rows.
• tr:nth-child(odd): Keeps odd-numbered rows pure white (#ffffff).
• Combined effect: Alternating row colors make it much easier for the human eye to track data horizontally across wide tables without losing place.

5. Interactive Hover Effect

tr:hover { background-color: #e0e0ff; }

• tr:hover: Detects when the user places their mouse cursor over any row.
• background-color: #e0e0ff;: Changes that specific row's background to a soft light purple/blue, providing visual feedback to help users focus on the row they are currently reading.

---

<div>

    <h2>Employee Directory</h2>

    <p>Here is an example of how the CSS styles are applied to an HTML data table to create a clean, sticky header with

        zebra striping and hover effects.</p>

    <!-- Embedded CSS matching your sample -->

    <style>

        .demo-table-container {

            max-height: 250px;

            overflow-y: auto;

            border: 1px solid #ddd;

            margin-top: 15px;

            margin-bottom: 15px;

        }

        .demo-table-container table {

            border-collapse: collapse;

            min-width: 700px;

            width: 100%;

        }

        .demo-table-container th,

        .demo-table-container td {

            border: 1px solid #ccc;

            padding: 10px;

            text-align: left;

        }

        .demo-table-container th {

            background-color: #5a2ea6;

            color: #fff;

            position: sticky;

            top: 0;

            z-index: 2;

        }

        .demo-table-container tr:nth-child(even) {

            background-color: #f9f9f9;

        }

        .demo-table-container tr:nth-child(odd) {

            background-color: #ffffff;

        }

        .demo-table-container tr:hover {

            background-color: #e0e0ff;

        }

    </style>

    <!-- Scrollable Table Container -->

    <div class="demo-table-container">

        <table>

            <thead>

                <tr>

                    <th>ID</th>

                    <th>Full Name</th>

                    <th>Job Title</th>

                    <th>Department</th>

                    <th>Office Location</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>101</td>

                    <td>Sarah Jenkins</td>

                    <td>Frontend Developer</td>

                    <td>Engineering</td>

                    <td>New York</td>

                </tr>

                <tr>

                    <td>102</td>

                    <td>Michael Chang</td>

                    <td>UI/UX Designer</td>

                    <td>Design</td>

                    <td>San Francisco</td>

                </tr>

                <tr>

                    <td>103</td>

                    <td>Amanda Smith</td>

                    <td>Project Manager</td>

                    <td>Product</td>

                    <td>Chicago</td>

                </tr>

                <tr>

                    <td>104</td>

                    <td>David Ross</td>

                    <td>Backend Engineer</td>

                    <td>Engineering</td>

                    <td>Austin</td>

                </tr>

                <tr>

                    <td>105</td>

                    <td>Elena Rostova</td>

                    <td>Content Strategist</td>

                    <td>Marketing</td>

                    <td>Boston</td>

                </tr>

                <tr>

                    <td>106</td>

                    <td>James Wilson</td>

                    <td>Data Analyst</td>

                    <td>Analytics</td>

                    <td>Seattle</td>

                </tr>

            </tbody>

        </table>

    </div>

</div>

---

Employee Directory

Here is an example of how the CSS styles are applied to an HTML data table to create a clean, sticky header with zebra striping and hover effects.

ID	Full Name	Job Title	Department	Office Location
101	Sarah Jenkins	Frontend Developer	Engineering	New York
102	Michael Chang	UI/UX Designer	Design	San Francisco
103	Amanda Smith	Project Manager	Product	Chicago
104	David Ross	Backend Engineer	Engineering	Austin
105	Elena Rostova	Content Strategist	Marketing	Boston
106	James Wilson	Data Analyst	Analytics	Seattle