Order History Table Template

Empower your customers by providing a clear and accessible history of their past orders.

This table template is perfect for the "My Account" section of an e-commerce site, presenting order information in a clean, scannable, and actionable format.

Screenshot of a customer's order history table showing order ID, date, status, and total.

Get Source Code → Preview →

About this Order History Table

A good order history page is crucial for customer trust and retention. This template displays all the essential information a customer needs: order number, date, total cost, and a clear, color-coded status. Key elements like the Order ID and an explicit "View" link are made clickable to encourage users to see more details. The design is modern and clean, using status badges to convey information quickly without cluttering the interface.

Key Features:

Clear Status Indicators: Color-coded badges instantly show if an order is Processing, Shipped, Delivered, or Cancelled.
Action-Oriented: Includes a clickable Order ID and a "View Details" link to take the user to the full order page.
Professional Formatting: Follows standard e-commerce UI patterns for a familiar and intuitive user experience.
Clean and Scannable: A minimalist design with plenty of whitespace ensures information is easy to find and read.

Ideal Use Cases:

"My Orders" page in an e-commerce customer account.
An administrator's view of a specific customer's order history.
Order summaries for marketplace or B2B platforms.

Dependencies:

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the order history table:

.order-history-table thead th {
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
    color: #333;
    background-color: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}
.order-history-table thead .th-right {
    text-align: right;
}

.order-history-table tbody td {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}
.order-history-table tbody tr:last-child td {
    border-bottom: none;
}
.order-history-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Order ID Link Styling */
.order-id a {
    font-weight: 600;
    color: #007bff;
    text-decoration: none;
}
.order-id a:hover {
    text-decoration: underline;
}

/* Status Badge Styling */
.status-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}
.status-delivered {
    background-color: #eafaf1;
    color: #27ae60;
}
.status-shipped {
    background-color: #ebf5fb;
    color: #3498db;
}
.status-processing {
    background-color: #fef5e7;
    color: #f39c12;
}
.status-cancelled {
    background-color: #f4f6f6;
    color: #7f8c8d;
}

.total-amount {
    font-weight: 600;
    text-align: right;
}

.action-link a {
    font-weight: 600;
    color: #6c757d;
    text-decoration: none;
}
.action-link a:hover {
    color: #343a40;
}
.action-link {
    text-align: right;
}
</style>

<table class="order-history-table">
    <thead>
        <tr>
            <th scope="col">Order</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col" class="th-right">Total</th>
            <th scope="col" class="th-right">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="order-id"><a href="#">#34590</a></td>
            <td>August 12, 2024</td>
            <td><span class="status-badge status-delivered">Delivered</span></td>
            <td class="total-amount">$145.50</td>
            <td class="action-link"><a href="#">View Details</a></td>
        </tr>
        <tr>
            <td class="order-id"><a href="#">#34502</a></td>
            <td>July 28, 2024</td>
            <td><span class="status-badge status-shipped">Shipped</span></td>
            <td class="total-amount">$89.99</td>
            <td class="action-link"><a href="#">Track Order</a></td>
        </tr>
        <tr>
            <td class="order-id"><a href="#">#34488</a></td>
            <td>July 25, 2024</td>
            <td><span class="status-badge status-processing">Processing</span></td>
            <td class="total-amount">$212.00</td>
            <td class="action-link"><a href="#">View Details</a></td>
        </tr>
        <tr>
            <td class="order-id"><a href="#">#34415</a></td>
            <td>June 15, 2024</td>
            <td><span class="status-badge status-cancelled">Cancelled</span></td>
            <td class="total-amount">$56.25</td>
            <td class="action-link"><a href="#">View Details</a></td>
        </tr>
    </tbody>
</table>

View Output