x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
4
<style>
5
/* 
6
    Optional wrapper to make the table responsive.
7
    On smaller screens, it allows the table to scroll horizontally.
8
*/
9
.table-container {
10
    overflow-x: auto;
11
}
12
13
.table-zebra {
14
    width: 100%;
15
    border-collapse: collapse;
16
    font-family: sans-serif;
17
    font-size: 0.9rem;
18
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
19
}
20
21
.table-zebra caption {
22
    caption-side: bottom;
23
    text-align: right;
24
    font-size: 0.8rem;
25
    color: #666;
26
    padding: 10px 0;
27
}
28
29
.table-zebra thead {
30
    background-color: #2c3e50; /* A dark blue-grey header */
31
    color: #ffffff;
32
}
33
34
.table-zebra th, 
35
.table-zebra td {
36
    padding: 12px 15px;
37
    text-align: left;
38
    border-bottom: 1px solid #dddddd;
39
}
40
41
/* This is the magic for the zebra-striping */
42
.table-zebra tbody tr:nth-of-type(even) {
43
    background-color: #f3f3f3;
44
}
45
46
.table-zebra tbody tr:last-of-type {
47
    border-bottom: 2px solid #2c3e50;
48
}
49
50
/* Optional: Add a hover effect for better user interaction */
51
.table-zebra tbody tr:hover {
52
    background-color: #e2e8f0;
53
    cursor: pointer;
54
}
55
</style>
56
57
58
<div class="table-container">
59
    <table class="table-zebra">
60
        <caption>List of Active Users as of Today</caption>
61
        <thead>
62
            <tr>
63
                <th scope="col">User ID</th>
64
                <th scope="col">Full Name</th>
65
                <th scope="col">Email Address</th>
66
                <th scope="col">Role</th>
67
                <th scope="col">Last Login</th>
68
            </tr>
69
        </thead>
70
        <tbody>
71
            <tr>
72
                <td>USR-001</td>
73
                <td>Arthur Dent</td>
74
                <td>adent@example.com</td>
75
                <td>Researcher</td>
76
                <td>2024-05-20</td>
77
            </tr>
78
            <tr>
79
                <td>USR-002</td>
80
                <td>Ford Prefect</td>
81
                <td>fprefect@example.com</td>
82
                <td>Journalist</td>
83
                <td>2024-05-21</td>
84
            </tr>
85
            <tr>
86
                <td>USR-003</td>
87
                <td>Zaphod Beeblebrox</td>
88
                <td>zbeeblebrox@example.com</td>
89
                <td>President</td>
90
                <td>2024-05-18</td>
91
            </tr>
92
            <tr>
93
                <td>USR-004</td>
94
                <td>Trisha McMillan</td>
95
                <td>tricia@example.com</td>
96
                <td>Astrophysicist</td>
97
                <td>2024-05-21</td>
98
            </tr>
99
            <tr>
100
                <td>USR-005</td>
101
                <td>Marvin</td>
102
                <td>paranoid.android@example.com</td>
103
                <td>Robot</td>
104
                <td>2024-05-19</td>
105
            </tr>
106
        </tbody>
107
    </table>
108
</div>