Hover Highlight Table Template

Instantly improve user interaction by highlighting table rows as the user hovers over them.

This simple CSS effect helps users focus their attention and easily track data across wide tables, reducing eye strain and improving navigation.

Screenshot of an HTML table where one row is highlighted with a light background color to indicate a mouse hover.

Get Source Code → Preview →

About this "Hover-Highlight" Table

This template enhances a standard table with a dynamic hover effect. When a user moves their mouse over any row in the table body, the row's background color changes, providing immediate visual feedback. This is accomplished using the CSS :hover pseudo-class, making it an extremely lightweight and high-performance solution for improving user experience.

Key Features:

Improved User Focus: The highlight makes it easy for users to keep track of the row they are examining.
Interactive Feedback: Provides a responsive feel, signaling that the rows are distinct elements.
CSS-Only: No JavaScript is required, ensuring fast load times and simplicity.
Highly Combinable: This hover effect can be easily added to almost any other table style, such as bordered or zebra-striped tables.

Ideal Use Cases:

Wide tables with many columns where it's easy to lose your place.
Long tables where users will be scanning many rows.
Admin dashboards, file lists, or any table where rows might be clickable entities.

Dependencies:

None. This template uses only pure HTML and CSS.

Accessibility Notes:

The hover effect is a purely visual enhancement for mouse users and does not interfere with keyboard navigation or screen readers. The underlying structure is semantic, using thead and scoped th elements to maintain a high level of accessibility.

Code

Here's the full code for the hover highlight table template:

.table-hover thead th {
    /* Style for the header */
    padding: 12px 15px;
    background-color: #f4f4f4;
    border-bottom: 2px solid #ccc;
    text-align: left;
}

.table-hover td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

/* This is the key part of the template */
.table-hover tbody tr:hover {
    background-color: #f5f5f5; /* A light grey for the highlight */
    cursor: pointer; /* Changes the cursor to a pointer to indicate interactivity */
}
</style>

<table class="table-hover">
    <thead>
        <tr>
            <th scope="col">Document Title</th>
            <th scope="col">Modified By</th>
            <th scope="col">Last Modified</th>
            <th scope="col">File Size</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Q2 Financial Projections.xlsx</td>
            <td>Carol Danvers</td>
            <td>2024-05-20 11:45 AM</td>
            <td>1.2 MB</td>
        </tr>
        <tr>
            <td>Marketing Strategy Deck.pptx</td>
            <td>Peter Parker</td>
            <td>2024-05-19 03:22 PM</td>
            <td>5.8 MB</td>
        </tr>
        <tr>
            <td>Client Onboarding Notes.docx</td>
            <td>Jessica Jones</td>
            <td>2024-05-21 09:10 AM</td>
            <td>256 KB</td>
        </tr>
        <tr>
            <td>Project Phoenix Spec.pdf</td>
            <td>Bruce Banner</td>
            <td>2024-05-18 05:00 PM</td>
            <td>3.1 MB</td>
        </tr>
        <tr>
            <td>Final Logo Assets.zip</td>
            <td>Peter Parker</td>
            <td>2024-05-19 04:00 PM</td>
            <td>12.5 MB</td>
        </tr>
    </tbody>
</table>

View Output