Leaderboard Ranking Table

<!DOCTYPE html>
<title>My Example</title>

.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>