Inventory / Stock List Table Template

Effectively manage and view your product inventory with this clear and functional stock list table.

Designed for e-commerce backends or stock management systems, this table provides an at-a-glance overview of item details, stock levels, and status.

Screenshot of an inventory list table with columns for product, SKU, quantity, and status.

Get Source Code → Preview →

About this Inventory List Table

This template is built for functionality. It presents essential inventory data (like a product image, name, SKU, price, and quantity) in a highly scannable format. Thoughtful design choices support its use case: numerical data (price and quantity) is right-aligned for easy comparison, and a prominent status indicator uses color and text to immediately convey stock levels (e.g., "In Stock", "Low Stock", "Out of Stock"). This makes it easy for an administrator to quickly identify items that require action, like reordering.

Key Features:

At-a-Glance Status: Color-coded status badges for instant stock level recognition.
Numerical Alignment: Right-aligned price and quantity columns for professional, readable data.
Product Image Column: Includes a small thumbnail for quick visual identification of products.
Clean & Functional: The design avoids unnecessary flair, prioritizing information clarity for internal use.

Ideal Use Cases:

E-commerce store backends.
Warehouse or stockroom management applications.
Asset tracking systems.
Restaurant or cafe ingredient inventory lists.

Dependencies:

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the inventory / stock list table:

.inventory-table thead th {
    padding: 10px 12px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    font-weight: 600;
}

.inventory-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}
.inventory-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Product Info Cell */
.product-info {
    display: flex;
    align-items: center;
}
.product-info .product-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: white;
}

/* For right-aligning headers and data */
.col-number {
    text-align: right;
}

/* Status Indicator Styles */
.status {
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: 500;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
}
.status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-in-stock {
    color: #1a6438;
    background-color: #e8f5e9;
}
.status-in-stock::before {
    background-color: #4caf50;
}

.status-low-stock {
    color: #936001;
    background-color: #fff8e1;
}
.status-low-stock::before {
    background-color: #ffab00;
}

.status-out-of-stock {
    color: #b71c1c;
    background-color: #ffebee;
}
.status-out-of-stock::before {
    background-color: #d32f2f;
}

</style>

<table class="inventory-table">
    <thead>
        <tr>
            <th scope="col">Product</th>
            <th scope="col">SKU</th>
            <th scope="col" class="col-number">Price</th>
            <th scope="col" class="col-number">Quantity</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="product-info">
                    <img src="https://placehold.co/50?text=Product" alt="Espresso Machine" class="product-img">
                    <span>Espresso Machine</span>
                </div>
            </td>
            <td>EM-8991-A</td>
            <td class="col-number">$599.99</td>
            <td class="col-number">12</td>
            <td><span class="status status-in-stock">In Stock</span></td>
        </tr>
        <tr>
            <td>
                <div class="product-info">
                    <img src="https://placehold.co/50?text=Product" alt="Coffee Grinder" class="product-img">
                    <span>Coffee Grinder</span>
                </div>
            </td>
            <td>CG-4550-B</td>
            <td class="col-number">$89.50</td>
            <td class="col-number">4</td>
            <td><span class="status status-low-stock">Low Stock</span></td>
        </tr>
        <tr>
            <td>
                <div class="product-info">
                    <img src="https://placehold.co/50?text=Product" alt="Milk Frother" class="product-img">
                    <span>Milk Frother</span>
                </div>
            </td>
            <td>MF-2010-C</td>
            <td class="col-number">$45.00</td>
            <td class="col-number">0</td>
            <td><span class="status status-out-of-stock">Out of Stock</span></td>
        </tr>
         <tr>
            <td>
                <div class="product-info">
                    <img src="https://placehold.co/50?text=Product" alt="12oz Coffee Mugs (Set of 4)" class="product-img">
                    <span>12oz Coffee Mugs (Set of 4)</span>
                </div>
            </td>
            <td>CM-1204-D</td>
            <td class="col-number">$24.99</td>
            <td class="col-number">45</td>
            <td><span class="status status-in-stock">In Stock</span></td>
        </tr>
    </tbody>
</table>

View Output