Team Roster Table Template

Display your team's lineup clearly and professionally with this classic roster table.

Ideal for sports clubs, project teams, or any group, this template presents key member information in a straightforward, easy-to-read format.

Screenshot of a sports team roster showing player number, name, position, and status.

Get Source Code → Preview →

About this Team Roster Table

A team roster needs to be, above all else, clear and easy to scan. This template prioritizes clarity with a simple, high-contrast design. It features a bold header and alternating row colors (zebra-striping) to make tracking information across the table effortless. It includes common roster fields like player number, name, position, and status, making it a versatile starting point for any team or group list.

Key Features:

High Readability: Uses zebra-striping and clear typography for an easy-to-scan list.
Classic Roster Format: Includes standard columns like Number, Name, and Position that can be easily customized.
Simple and Clean: A straightforward design that puts the focus on the information itself.
Lightweight: Built with minimal, pure CSS, ensuring it's fast and easy to integrate into any website.

Ideal Use Cases:

Sports team websites (e.g., soccer, basketball, hockey).
Corporate "About Us" pages listing team members.
Club or organization membership lists.
Project team directories within an intranet.

Dependencies:

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the team roster table:

.roster-table caption {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: left;
}

.roster-table thead th {
    background-color: #333;
    color: white;
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
}
.roster-table .th-center {
    text-align: center;
}

.roster-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
}
.roster-table .td-center {
    text-align: center;
}

.roster-table .player-name {
    font-weight: bold;
}

/* Zebra-striping for readability */
.roster-table tbody tr:nth-of-type(even) {
    background-color: #f8f8f8;
}

.roster-table tbody tr:hover {
    background-color: #efefef;
}
</style>

<table class="roster-table">
    <caption>Dragons FC - First Team Roster</caption>
    <thead>
        <tr>
            <th scope="col" class="th-center">#</th>
            <th scope="col">Player Name</th>
            <th scope="col">Position</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="td-center">1</td>
            <td class="player-name">Sam Jones</td>
            <td>Goalkeeper</td>
            <td>Active</td>
        </tr>
        <tr>
            <td class="td-center">4</td>
            <td class="player-name">Carla Rodriguez</td>
            <td>Defender</td>
            <td>Active</td>
        </tr>
        <tr>
            <td class="td-center">6</td>
            <td class="player-name">Mike Chen</td>
            <td>Midfielder</td>
            <td>Active</td>
        </tr>
        <tr>
            <td class="td-center">9</td>
            <td class="player-name">Aisha Khan</td>
            <td>Forward</td>
            <td>Active</td>
        </tr>
         <tr>
            <td class="td-center">10</td>
            <td class="player-name">David Lee</td>
            <td>Forward</td>
            <td>Injured Reserve</td>
        </tr>
         <tr>
            <td class="td-center">15</td>
            <td class="player-name">Laura Petrova</td>
            <td>Defender</td>
            <td>Active</td>
        </tr>
    </tbody>
</table>

View Output