About this set
A printable invoice sheet built around a line items table. The header shows the studio name and contact line on the left and the invoice number, issue date and due date on the right; below it the table lists items with a bold name and a grey description, a centred quantity, a right-aligned rate and amount, all in tabular figures. The totals are a second tbody under the items: Subtotal and Tax rows with right-aligned labels, and a Total due row with a heavy rule above it. Using row headers with colspan for those labels keeps the totals inside the same table, so columns stay aligned and screen readers announce each amount with its label. A dashed note at the bottom holds payment terms. Print styles remove the page background, the shadow and the rounded corners, so the sheet prints as a clean page. On narrow screens the padding shrinks and the invoice details move under the studio name. Use it for invoice, receipt and quote pages in billing tools. There is no JavaScript. The Bootstrap version uses .table with .text-end and .text-center utilities, and the Tailwind version uses print: variants.
What’s included
- Line items with name, description, quantity, rate and amount
- Totals in a second tbody with row-header labels
- Tabular numerals and right-aligned money columns
- Print styles that drop the card look
- Narrow-screen layout with tighter padding
Accessibility
The table is labelled by the Invoice INV-1041 heading, column headers use scope="col" and the Subtotal, Tax and Total due labels are row headers, so every amount is announced with its label. Grey text is darkened to #636b7a for 4.5:1 contrast. Nothing on the sheet is interactive.
Customise it
Colours are in the .inv rules: ink #191d24, muted #636b7a, rules #eceef2 and #dfe3ea; change padding on .inv for sheet margins. Bootstrap uses --bs-table-* variables on .inv-table; in Tailwind edit the text-, border- and print: utilities.
