Leaderboard / Ranking Table Template

Display rankings, top users, or contest results with this dynamic and visually appealing leaderboard table.

This template is designed to feel exciting and competitive, using special styling for the top three positions to make them stand out.

Screenshot of a leaderboard table with special medal icons for the top three ranks.

Get Source Code → Preview →

About this Leaderboard Table

A leaderboard is more than just a table; it's a tool for engagement. This template enhances a standard table with features that create a sense of competition and achievement. The most prominent feature is the unique styling for the 1st, 2nd, and 3rd place ranks, using colored "medal" icons and bolding to celebrate the top performers. The rest of the table is clean and easy to scan, allowing users to quickly find their own position and see how they stack up.

Key Features:

Top 3 Highlighting: Special CSS classes and icons to celebrate the gold, silver, and bronze positions.
Engaging Design: Bold rank numbers and a clear score column make the table exciting to view.
User Avatars: Integrates images to personalize the list and make it more engaging.
CSS-Only: All styling, including the "medal" icons (which are unicode characters), is done with pure CSS.

Ideal Use Cases:

Gaming websites to display top player scores.
Sales contests or team performance dashboards.
Educational platforms for student rankings on quizzes or assignments.
Community forums showing top contributors.

Dependencies:

None. This template uses only pure HTML and CSS.

Accessibility Notes:

While the icons and colors provide a strong visual cue, the rank number is always present as plain text, ensuring the information is accessible to everyone. The table is structured semantically with scoped headers for full screen reader support.

Code

Here's the full code for the leaderboard / ranking table:

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif; /* A more playful, modern font */
}

.leaderboard-table thead th {
    padding: 12px 15px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #888;
    text-align: left;
    border-bottom: 2px solid #eee;
}
.leaderboard-table thead .th-score {
    text-align: right;
}

.leaderboard-table tbody td {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}
.leaderboard-table tbody tr:last-child td {
    border-bottom: none;
}

.leaderboard-table .rank {
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    width: 60px; /* Gives rank column a fixed width */
    text-align: center;
}

.leaderboard-table .user {
    display: flex;
    align-items: center;
}
.leaderboard-table .user .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}
.leaderboard-table .user .username {
    font-weight: 600;
}

.leaderboard-table .score {
    text-align: right;
    font-weight: 700;
    font-size: 1.1rem;
    color: #e67e22;
}

/* --- Top 3 Styling --- */
.leaderboard-table .rank-1,
.leaderboard-table .rank-2,
.leaderboard-table .rank-3 {
    font-weight: 700;
}

/* This is a common rule for all medal pseudo-elements */
.leaderboard-table .rank-1 .rank::before,
.leaderboard-table .rank-2 .rank::before,
.leaderboard-table .rank-3 .rank::before {
    font-size: 1.5rem;
    display: block;
    margin: -5px auto 5px; /* Adjust spacing of medal icon */
}

/* Set specific medal content for each rank */
.leaderboard-table .rank-1 .rank::before {
    content: '\1F947'; /* 1st Place Medal */
}
.leaderboard-table .rank-2 .rank::before {
    content: '\1F948'; /* 2nd Place Medal */
}
.leaderboard-table .rank-3 .rank::before {
    content: '\1F949'; /* 3rd Place Medal */
}

/* Background highlights for top ranks */
.leaderboard-table .rank-1 { background-color: #fffbeb; }
.leaderboard-table .rank-2 { background-color: #f8f9fa; }
.leaderboard-table .rank-3 { background-color: #fef5e7; }

</style>

<table class="leaderboard-table">
    <thead>
        <tr>
            <th scope="col">Rank</th>
            <th scope="col">User</th>
            <th scope="col" class="th-score">Score</th>
        </tr>
    </thead>
    <tbody>
        <tr class="rank-1">
            <td class="rank">1</td>
            <td class="user">
                <img src="https://placehold.co/45?text=AV" alt="Avatar" class="avatar">
                <span class="username">Alex Ryder</span>
            </td>
            <td class="score">25,480</td>
        </tr>
        <tr class="rank-2">
            <td class="rank">2</td>
            <td class="user">
                <img src="https://placehold.co/45?text=BV" alt="Avatar" class="avatar">
                <span class="username">Brenda Vance</span>
            </td>
            <td class="score">23,910</td>
        </tr>
        <tr class="rank-3">
            <td class="rank">3</td>
            <td class="user">
                <img src="https://placehold.co/45?text=CK" alt="Avatar" class="avatar">
                <span class="username">Carl Kent</span>
            </td>
            <td class="score">22,500</td>
        </tr>
        <tr>
            <td class="rank">4</td>
            <td class="user">
                <img src="https://placehold.co/45?text=DL" alt="Avatar" class="avatar">
                <span class="username">Diana Lane</span>
            </td>
            <td class="score">21,880</td>
        </tr>
        <tr>
            <td class="rank">5</td>
            <td class="user">
                <img src="https://placehold.co/45?text=EW" alt="Avatar" class="avatar">
                <span class="username">Edward Wallace</span>
            </td>
            <td class="score">20,150</td>
        </tr>
    </tbody>
</table>

View Output