Header Footer Tool
Set header footer content, generate usable code
📖 User Guide Click to view detailed usage instructions
Collapse Expand
📖 User Guide
Click to view detailed usage instructions
Header Footer Tool
Free online header footer generator, support setting header and footer left, center, right content, generate HTML, CSS, JavaScript code, one-click copy.
Main Features
1. Flexible Header Settings
- Left content: Can place chapter name, document title, etc.
- Center content: Can place logo, company name, etc.
- Right content: Can place date, page number, etc.
2. Flexible Footer Settings
- Left content: Can place file path, author, etc.
- Center content: Can place copyright info, etc.
- Right content: Can place page number, etc.
3. Dividing Line Control
- Option to show or hide header/footer dividing lines
- Default 1px gray dividing line
4. Multiple Output Formats
- HTML table layout
- CSS @page rules
- JavaScript configuration object
How to Use
- Set header content (left, center, right)
- Set footer content (left, center, right)
- Choose whether to show dividing lines
- Select output format
- Click "Copy Result"
Use Cases
- Document Layout: Set header footer for Word/Excel documents
- Web Printing: Set print style header footer
- Report Making: Add professional header footer for reports
- Contract Documents: Add signature info for contracts
FAQ
Supports auto page numbers?
In generated HTML code, page numbers need to be added manually. CSS code can use counters for auto page numbers.
Can customize dividing line style?
Current version provides default dividing line style, can modify generated CSS code for customization.
How to apply in Word?
Copy generated HTML code, use "Insert HTML" function in Word or manually set header footer.
Header Settings
Footer Settings
Generated Code
html<style>
.document { padding: 20mm; }
.header, .footer {
width: 100%;
font-family: Arial, sans-serif;
font-size: 12pt;
color: #333;
border-bottom: 1px solid #ccc;
padding-bottom: 5mm;
}
.footer { border-top: 1px solid #ccc; border-bottom: none; padding-top: 5mm; }
.header td, .footer td { width: 33.33%; vertical-align: middle; }
.header td:first-child, .footer td:first-child { text-align: left; }
.header td:nth-child(2), .footer td:nth-child(2) { text-align: center; }
.header td:last-child, .footer td:last-child { text-align: right; }
</style>
<table class="header">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div class="document">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<table class="footer">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>