Weekly timesheet HTML template

A weekly timesheet template in HTML, A4 landscape, with projects, tasks, daily hours, totals, billable summary and signature lines. Export it to PDF for clients or payroll.

Convert this to PDF → Download .html

Paper: A4 landscape · preview scaled to fit

Render it with the API

curl https://html-pdf.com/v1/pdf \
  -H "Authorization: Bearer $HTML_PDF_KEY" \
  -F "index.html=@timesheet.html" \
  -F 'options={"prefer_css_page_size": true}' \
  -o timesheet.pdf

Or ask your AI agent: "Make me a timesheet PDF using the html-pdf.com timesheet template." · Guides · API reference

Tips

Uses @page { size: A4 landscape }, so send "prefer_css_page_size": true.
Numbers use font-variant-numeric: tabular-nums so columns line up.
Build the rows from Toggl, Clockify or Harvest exports in n8n, then email the PDF every Friday.

HTML source

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Timesheet, week 41 2026</title>
<style>
  @page { size: A4 landscape; margin: 14mm; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; font-size: 11.5px; line-height: 1.45; margin: 0; }
  .top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
  h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
  .muted { color: #666; }
  .info { display: flex; gap: 28px; margin-bottom: 16px; }
  .label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: #888; }
  table { width: 100%; border-collapse: collapse; }
  thead { display: table-header-group; }
  th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: #666; text-align: left; padding: 6px 8px; border-bottom: 1.5px solid #111; }
  td { padding: 7px 8px; border-bottom: 1px solid #e6e6e6; vertical-align: top; }
  .n { text-align: right; font-variant-numeric: tabular-nums; width: 52px; }
  .we { background: #f6f6f4; }
  tr { break-inside: avoid; }
  tfoot td { border-top: 1.5px solid #111; border-bottom: 0; font-weight: 700; }
  .sum { display: flex; justify-content: space-between; gap: 32px; margin-top: 18px; break-inside: avoid; }
  .cards { display: flex; gap: 12px; }
  .card { border: 1px solid #ddd; padding: 8px 12px; min-width: 120px; }
  .card b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
  .sign { display: flex; gap: 28px; }
  .sign div { width: 180px; border-top: 1px solid #111; padding-top: 6px; font-size: 10px; color: #666; height: 40px; }
  @media screen {
    html { background: #e9e9e7; }
    body { width: 297mm; min-height: 210mm; margin: 24px auto; padding: 14mm; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); box-sizing: border-box; }
  }
</style>
</head>
<body>
  <div class="top">
    <div><h1>Timesheet</h1><div class="muted">Week 41 · October 5 to 11, 2026</div></div>
    <div class="muted">Your Company S.L.</div>
  </div>

  <div class="info">
    <div><div class="label">Name</div>Jordan Example</div>
    <div><div class="label">Role</div>Senior developer</div>
    <div><div class="label">Client</div>Acme Inc.</div>
    <div><div class="label">Rate</div>$95.00 / h</div>
  </div>

  <table>
    <thead><tr><th>Project</th><th>Task</th><th class="n">Mon</th><th class="n">Tue</th><th class="n">Wed</th><th class="n">Thu</th><th class="n">Fri</th><th class="n we">Sat</th><th class="n we">Sun</th><th class="n">Total</th></tr></thead>
    <tbody>
      <tr><td>Website redesign</td><td>Component library</td><td class="n">4.0</td><td class="n">5.5</td><td class="n">3.0</td><td class="n">6.0</td><td class="n">2.5</td><td class="n we"></td><td class="n we"></td><td class="n">21.0</td></tr>
      <tr><td>Website redesign</td><td>CMS integration</td><td class="n">2.0</td><td class="n">1.5</td><td class="n">3.5</td><td class="n"></td><td class="n">3.0</td><td class="n we"></td><td class="n we"></td><td class="n">10.0</td></tr>
      <tr><td>Billing portal</td><td>PDF invoice export</td><td class="n">1.5</td><td class="n"></td><td class="n">1.0</td><td class="n">1.5</td><td class="n">1.0</td><td class="n we"></td><td class="n we"></td><td class="n">5.0</td></tr>
      <tr><td>Internal</td><td>Meetings and planning</td><td class="n">0.5</td><td class="n">1.0</td><td class="n">0.5</td><td class="n">0.5</td><td class="n">1.5</td><td class="n we"></td><td class="n we"></td><td class="n">4.0</td></tr>
    </tbody>
    <tfoot><tr><td colspan="2">Total hours</td><td class="n">8.0</td><td class="n">8.0</td><td class="n">8.0</td><td class="n">8.0</td><td class="n">8.0</td><td class="n we">0.0</td><td class="n we">0.0</td><td class="n">40.0</td></tr></tfoot>
  </table>

  <div class="sum">
    <div class="cards">
      <div class="card"><span class="label">Billable</span><b>36.0 h</b></div>
      <div class="card"><span class="label">Non-billable</span><b>4.0 h</b></div>
      <div class="card"><span class="label">Amount</span><b>$3,420.00</b></div>
    </div>
    <div class="sign">
      <div>Employee signature</div>
      <div>Approved by</div>
    </div>
  </div>
</body>
</html>

More templates

Invoice · Receipt · Certificate · Report · Resume · Proposal · Packing slip · Shipping label · Event ticket · Quote · Purchase order · all templates