Create a clean, professional HTML template for a monthly sales report with sections for summary metrics, regional performance, top
products, and year-over-year comparisons. Return fully self-contained HTML code with inline CSS—no partial or snippet formats.

Recreate the identical design as HTML. Return fully self-contained HTML code with inline CSS—no partial or snippet formats.

Generate HTML optimized for PDF conversion with the following requirements:
 
- Fixed-Width Layout: All layout dimensions must be specified using absolute pixel values (`px`). Do not use percentages, responsive units (e.g., `%`, `em`, or `rem`), or any other relative measurement units.
- Consistent Spacing: Apply explicit margin and padding values for every HTML element to ensure consistent spacing throughout the layout. Avoid using default or unspecified spacing.
- Explicit Dimensions: Define fixed dimensions (in pixel values) for all containers, elements, and components. No container should have undefined or relative dimensions.
- Strategic Page Breaks: Use CSS `page-break-before`, `page-break-after`, and `page-break-inside` properties strategically to control where page breaks occur in the PDF output.
- Print-Optimized Colors: Avoid subtle gradients and ensure all colors have sufficient contrast for print clarity. Use solid colors whenever possible.
- Font Consistency: Use consistent fonts throughout the document, and define appropriate font-family fallbacks. Avoid font variations that might not be supported in PDF rendering.
- Proper Box-Sizing: Set `box-sizing: border-box` for all elements to ensure predictable element dimensions and alignment in the layout.
- Close All HTML Tags: All HTML tags must be properly closed, including self-closing tags like `<br>` and `<img>`. Do not leave any tag unclosed or partially closed.
- Use `&amp;` Instead of `&`: Replace every instance of the raw `&` character with the encoded entity `&amp;`. The raw `&` character must never appear in the HTML code.
- Avoid Using `&nbsp;`: Do not use the non-breaking space entity `&nbsp;`. Replace it with alternative spacing methods if needed.
- Absolute Measurements Only: All measurements (e.g., width, height, font-size) must use absolute units such as `px` or `pt`. Relative units like `%`, `em`, or `rem` are strictly prohibited.

Format the document as A4 portrait with standard margins.

Format the document as US Letter size with standard margins.

Apply narrow margins (1.5cm) to maximize content area.

Apply wide margins (3cm) for a more formal document appearance.

Add page numbering at the bottom center of each page showing "Page X of Y".

  Add page numbering at the bottom right corner showing only the current page
  number.

  Start page numbering from the second page, leaving the first page without a
  number.

Add page numbering with section prefix, like "Section 1, Page 2".

  Add a consistent header on each page containing the company logo and document
  title.

  Include a footer on each page with contact information and copyright notice.

  Apply a different header on the first page than on subsequent pages.

  Include the document title in the header and the date in the footer.

  Include a table of contents in the header for easy navigation.

  Include a watermark in the background of each page.

  Include a disclaimer in the footer of each page.

  Include the document date in the header and page numbers in the footer.

  Ensure proper page break handling for a multi-page document, keeping related
  content together.

  For tables that span multiple pages, repeat the table headers on each new
  page.

  Prevent widows and orphans (single lines at start/end of pages) throughout the
  document.

  Set up sections with different formatting, each starting on a new page.

  Create tables that properly paginate across multiple pages with repeating
  headers.

  Format financial tables with right-aligned monetary values and proper currency
  symbols.

  Design data tables with alternating row colors that print properly.

  Ensure tables are responsive to content size, avoiding overflow or clipping.

  Use fixed-width columns for tables to maintain alignment across pages.

  Ensure tables have proper borders and padding for readability.

  Use CSS for table styling instead of relying on HTML attributes.

  Hide screen-only elements when printing to PDF.

  Use print-specific styles to adjust layout and visibility of elements.

  Ensure all images are embedded in the document for proper printing.

  Use high-resolution images for better print quality.

  Avoid using background images or colors that may not print well.

  Ensure all hyperlinks are styled appropriately for print.

  Use CSS media queries to apply print-specific styles.

  Ensure all hyperlinks appear properly in the PDF without disrupting the
  layout.

  Make sure background colors and images print correctly in the PDF.

  Use CSS for print styles instead of relying on HTML attributes.

  Ensure all images are embedded in the document for proper printing.

  Use high-resolution images for better print quality.

  Avoid using background images or colors that may not print well.

  Ensure all hyperlinks are styled appropriately for print.

  Use CSS media queries to apply print-specific styles.

  Ensure all hyperlinks appear properly in the PDF without disrupting the
  layout.

  Use only web-safe fonts or embed custom fonts properly to ensure consistent
  rendering.

  Optimize text for PDF output with proper line heights and character spacing.

  Ensure proper font sizing for headability in print format (minimum 10pt for
  body text).

  Include proper document metadata (title, author, subject) for PDF cataloging.

**Create a clean, professional template for a payslip report with the following sections,
which are commonly included in such documents.
 
The generated HTML must fulfill the following requirements to ensure it is optimized for
PDF conversion:**
 
1. **Layout and Dimensions**:
   - Fixed-width layout: Use absolute pixel values (`px`) for all layout dimensions.
   Relative units like `%`, `em`, or `rem` must not be used.
   - Explicit dimensions: Specify fixed dimensions for all containers, elements,
   and components—no relative or undefined measurements.
   - Ensure the main areas of the report are well aligned, creating a visually
   appealing and structured final design.
 
2. **Sections**:
   - **Header**:
     - Company name, logo, address, and contact information.
     - Payslip title (e.g., "Employee Payslip") and date of issuance.
   - **Employee Details**:
     - Employee's full name.
     - Employee ID or payroll number.
     - Department and job designation.
   - **Earnings**:
     - Basic salary.
     - Allowances (e.g., housing, transport).
     - Bonuses or incentives.
     - Overtime pay (if applicable).
   - **Deductions**:
     - Tax deductions (e.g., income tax).
     - Social security contributions.
     - Insurance premiums.
     - Other deductions (e.g., loan repayment).
   - **Summary**:
     - Gross pay (total earnings before deductions).
     - Total deductions.
     - Net pay (final amount paid to the employee after deductions).
   - **Footer**:
     - Bank details (e.g., account number for payment).
     - Employer's contact details for payroll queries.
     - Any disclaimers or notes (e.g., "This payslip is for reference only").
 
3. **Spacing**:
   - Apply explicit margin and padding values to every element for consistent spacing.
   Default or unspecified spacing is not allowed.
 
4. **Visual and Print-Optimized Design**:
   - Print-optimized colors: Avoid subtle gradients and ensure all colors have high
   contrast for clarity. Use solid colors wherever possible.
   - Font consistency: Define consistent fonts with appropriate font-family fallbacks
   throughout the document. Avoid unsupported font variations in PDF rendering.
 
5. **HTML Standards**:
   - Set `box-sizing: border-box` for all elements for predictable alignment and dimensions.
   - Close all HTML tags properly, including self-closing tags like `<br>` and `<img>`.
   - Replace the `&` character with `&amp;` to ensure valid HTML code.
   - Avoid using `&nbsp;`; replace it with alternative spacing methods.
 
6. **Measurements**:
   - Use absolute units (e.g., `px`, `pt`) for all measurements such as width, height,
   and font size.
 
7. **Page Format**:
   - Format the document for A4 portrait orientation with standard margins.
   - Ensure the output PDF consolidates all content into a single page, maintaining
   the integrity and readability of the payslip.
 
**Return fully self-contained HTML code with inline CSS—no partial or snippet formats—and
ensure the design aligns with both the requirements of the payslip template and
PDF conversion rules.**

# Excel "HTML-based" Report Template Generator
 
## Report Requirements
 
### Overview
 
_Describe your report purpose, e.g., "Create a monthly employee payslip that clearly shows earnings and deductions"._
 
### Structure and Layout
 
List the main sections your report needs, e.g.:
 
- Company header with name and address
- Employee information section
- Earnings and deductions table
- Summary totals and net pay
- Signature area
 
### Visual Design
 
#### Color Scheme:
 
- **Main color**: [e.g., dark blue] for headers
- **Accent color**: [e.g., light blue] for subtotals
 
#### Typography:
 
- **Font family**: [e.g., Arial, sans-serif]
- **Text size preferences**: [e.g., regular 11pt for data, bold 12pt for headings]
 
### Content Requirements
 
Specify the data fields needed, using ReportBurster variable format where applicable:
 
#### Employee Information:
 
- Employee Name: `${col0}`
- Employee ID: `${col1}`
- Social Security #: `${col2}`
- Department: `${col4}`
- Position/Grade: `${col5}`
 
#### Earnings and Deductions:
 
- Basic Salary: `${col6}`
- Tax Deductions: `${col7}`
- Net Pay: `${col16}`
 
## Generate HTML that produces an Excel report based on the requirements above and the technical specifications below.
 
Your response must include:
 
1. Complete HTML code with all required elements - do not provide partial code snippets
2. All CSS styles must be included inline within the document head - no external CSS file references
3. The HTML code should be fully self-contained and ready to use without any additional dependencies
4. Include all necessary data attributes for Excel export functionality as specified in the technical documentation
5. Ensure the code follows best practices for Excel export compatibility
 
Please provide the entire HTML document in a single code block.
 
---
 
**TECHNICAL DOCUMENTATION - DO NOT MODIFY BELOW THIS LINE**
 
# ReportBurster Excel Exporter
 
ReportBurster transforms CSS styled HTML into Excel spreadsheets with robust formatting and features.
 
## Overview
 
ReportBurster allows you to generate professional Excel spreadsheets from HTML content, maintaining styling, formulas, and other Excel-specific features.
The main advantage is the ability to use familiar HTML/CSS for report generation, combined with a good templating engine for producing high-quality Excel output.
 
## Features
 
- Complete CSS styling support
- Excel formulas
- Cell comments
- Freeze panes
- Merged cells
- Multiple worksheets
- Date/time formatting
- Numeric formatting
- Text cell forcing
 
## CSS Support
 
ReportBurster maps CSS styles to corresponding Excel formatting. The following CSS properties are supported:
 
- **Font:** `font-family`, `font-size`, `font-weight`, `font-style`, `text-decoration`
- **Alignment:** `text-align`, `vertical-align`
- **Colors:** `color`, `background-color`
- **Borders:** All border properties including color, style, and width
 
**CSS Notes:**
 
- Colors can be specified as literals (e.g., `red`, `black`) or hex values (must use long format: `#ff0000` not `#f00`)
- Border widths must be specified as `thin`, `medium`, or `thick`
- Supported border styles: `solid`, `dotted`, `dashed`, `double` (widths apply only to `solid` style)
 
## Excel-Specific Attributes
 
The following data attributes allow you to access Excel-specific functionality:
 
| Attribute                     | Description                                                       | Example                                                                  |
| ----------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `data-group`                  | Adds cell to named ranges for formula references                  | `<td data-group="sales_total, region_sum">486</td>`                      |
| `data-group-output`           | Replaces cell value with a formula operating on a specified range | `<td data-group-output="sales_total">0</td>`                             |
| `data-cell-comment`           | Adds a comment to a cell                                          | `<td data-cell-comment="This is a comment">Value</td>`                   |
| `data-cell-comment-dimension` | Sets the size of a comment (columns,rows)                         | `<td data-cell-comment-dimension="4,2">Value</td>`                       |
| `data-freeze-pane-cell`       | Defines the freeze pane position                                  | `<td data-freeze-pane-cell="true">Value</td>`                            |
| `data-new-sheet`              | Creates a new worksheet                                           | `<table data-new-sheet="true">...</table>`                               |
| `data-sheet-name`             | Names a worksheet                                                 | `<table data-sheet-name="Sales Report">...</table>`                      |
| `data-date-cell-format`       | Sets date/time format                                             | `<td data-date-cell-format="dd/MM/yy HH:mm:ss">01-01-2022 13:00:00</td>` |
| `data-text-cell`              | Forces cell content to be treated as text                         | `<td data-text-cell="true">13.54</td>`                                   |
| `data-numeric-cell-format`    | Sets numeric format                                               | `<td data-numeric-cell-format="##0.00">123.45</td>`                      |
 
## Examples
 
### Formula Support
 
<!-- Cell added to two different ranges for formula references -->
<td data-group="store_Dumfries_2_value, region_1_1_pg_5_value" class="numeric">
  486
</td>
 
<!-- Cell that contains a SUM formula referencing all cells in a specified range -->
<td data-group-output="region_1_1_pg_6_count" data-group="area_1_pg_6_count">
  32
</td>
 
### Cell Comments
 
<td data-cell-comment="An Excel Comment" data-cell-comment-dimension="4,2">
  some value
</td>
 
### Freeze Panes
 
<td data-freeze-pane-cell="true">some value</td>
 
### Merged Cells
 
<td rowspan="3" colspan="3">some value</td>
 
### Multiple Worksheets
 
<table data-sheet-name="Table 1">
  <!-- table data-->
</table>
<table data-new-sheet="true" data-sheet-name="Table 2">
  <!-- table data-->
</table>
 
### Date Handling
 
<td data-date-cell-format="dd/MM/yy HH:mm:ss">01-01-2022 13:00:00</td>
 
### Forcing Text Output
 
<td data-text-cell="true">13.54</td>
 
## Limitations
 
- When using border widths with non-solid styles, the width property is ignored
- Certain Excel features might not be available through the HTML interface