Pandas HTML Export

Introduction

Converting pandas DataFrames to HTML format is a powerful way to share your data analysis results on websites, in reports, or as part of web applications. The HTML export functionality in pandas allows you to transform your data into well-formatted HTML tables that can be styled, customized, and integrated with web content.

In this tutorial, you'll learn how to:

Export pandas DataFrames to HTML format
Customize the appearance of HTML tables
Save HTML output to files
Integrate HTML tables into web applications
Style your tables for better presentation

Basic HTML Export

Let's start with the simplest case - converting a DataFrame to HTML format.

python
import pandas as pd
import numpy as np

# Create a sample DataFrame
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie', 'David', 'Eva'],
    'Age': [25, 30, 35, 28, 22],
    'City': ['New York', 'Boston', 'Chicago', 'Seattle', 'Miami'],
    'Salary': [72000, 85000, 92000, 78000, 65000]
})

# Convert DataFrame to HTML
html_table = df.to_html()

# Display the first 200 characters of the HTML output
print(html_table[:200] + "...")

Output:

html
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>...

The to_html() method converts your DataFrame into an HTML table with proper rows and columns. The resulting string contains a complete HTML <table> element that you can integrate into web pages.

Customizing HTML Output

The to_html() method accepts several parameters to customize how your table is rendered:

python
# Customize HTML table appearance
html_table = df.to_html(
    index=False,          # Hide the index
    classes='table table-striped',  # Add CSS classes (Bootstrap in this case)
    border=0,             # Remove border
    justify='center'      # Center-align text
)

print(html_table[:200] + "...")

Output:

html
<table border="0" class="table table-striped" style="text-align: center;">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>...

Common Customization Options

Here are the most useful parameters for to_html():

Parameter	Description	Default
`index`	Whether to include the index	`True`
`classes`	CSS classes for the table	`None`
`border`	Border width (0 for no border)	`1`
`justify`	Text alignment ('left', 'right', 'center')	`None`
`na_rep`	How to represent NaN values	`'NaN'`
`bold_rows`	Whether to make row headers bold	`True`
`escape`	Whether to escape HTML characters	`True`
`max_rows`	Maximum number of rows to display	`None`

Saving HTML to Files

You can save your HTML table to a file for later use:

python
# Export DataFrame to HTML file
df.to_html('employee_data.html', index=False)

# With more customization
with open('styled_employee_data.html', 'w') as f:
    # Write HTML header
    f.write('''
    <html>
    <head>
        <title>Employee Data</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body { padding: 20px; }
            .table { margin-top: 20px; }
        </style>
    </head>
    <body>
        <h1>Employee Information</h1>
    ''')
    
    # Write the table
    f.write(df.to_html(index=False, classes='table table-striped table-hover'))
    
    # Write HTML footer
    f.write('''
    </body>
    </html>
    ''')

print("HTML files created successfully!")

Output:

HTML files created successfully!

This creates two files:

employee_data.html - Just the HTML table
styled_employee_data.html - A complete HTML page with Bootstrap styling

Styling Tables with Pandas Styling API

For more advanced styling, you can use the pandas Styling API before converting to HTML:

python
# Create a styled DataFrame
styled_df = df.style.hide_index() \
    .set_caption("Employee Information") \
    .set_properties(**{'background-color': '#f5f5f5', 'border': '1px solid #ddd'}) \
    .set_table_styles([
        {'selector': 'th', 'props': [('background-color', '#4CAF50'), ('color', 'white')]},
        {'selector': 'caption', 'props': [('caption-side', 'top'), ('font-weight', 'bold')]}
    ]) \
    .highlight_max(subset=['Salary'], color='#ffeb3b') \
    .format({'Salary': '${:,.0f}'})

# Convert the styled DataFrame to HTML
styled_html = styled_df.to_html()

# Save to file
with open('advanced_styled_table.html', 'w') as f:
    f.write(styled_html)

print("First 200 characters of styled HTML:")
print(styled_html[:200] + "...")

Output:

First 200 characters of styled HTML:
<style type="text/css">
#T_6e7cb caption {
  caption-side: top;
  font-weight: bold;
}
#T_6e7cb th {
  background-color: #4CAF50;
  color: white;
}
#T_6e7cb_row0_col0, #T_6e7cb_row0_col1, #T_6e7cb_...

The styling API provides numerous options to format and style your tables before exporting them to HTML.

Real-World Application: Creating an Interactive Dashboard

Let's create a simple sales dashboard using pandas HTML export and some JavaScript:

python
# Create sales data
sales_data = pd.DataFrame({
    'Product': ['Laptop', 'Smartphone', 'Tablet', 'Monitor', 'Keyboard'],
    'Q1': [350, 270, 180, 120, 70],
    'Q2': [410, 320, 190, 140, 90],
    'Q3': [380, 340, 230, 160, 85],
    'Q4': [520, 490, 280, 210, 105]
})

# Calculate total and percentage
sales_data['Total'] = sales_data.iloc[:, 1:5].sum(axis=1)
sales_data['% of Total'] = sales_data['Total'] / sales_data['Total'].sum() * 100

# Style the DataFrame
styled_sales = sales_data.style \
    .background_gradient(subset=['Total'], cmap='Blues') \
    .bar(subset=['% of Total'], color='#d65f5f') \
    .format({'Q1': '${:,.0f}', 'Q2': '${:,.0f}', 'Q3': '${:,.0f}', 
             'Q4': '${:,.0f}', 'Total': '${:,.0f}', '% of Total': '{:.1f}%'}) \
    .set_caption('Product Sales by Quarter') \
    .set_table_styles([
        {'selector': 'caption', 'props': [('font-size', '20px'), ('font-weight', 'bold')]},
        {'selector': 'th', 'props': [('background-color', '#3366cc'), ('color', 'white')]}
    ])

# Create an HTML dashboard
dashboard_html = '''
<!DOCTYPE html>
<html>
<head>
    <title>Sales Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { padding: 20px; font-family: Arial, sans-serif; }
        .dashboard-container { max-width: 1200px; margin: 0 auto; }
        .card { margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <h1 class="mb-4">Sales Performance Dashboard</h1>
        
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Quarterly Sales Data</h5>
                        {table_html}
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
'''

# Insert the styled table into the dashboard
dashboard_html = dashboard_html.format(table_html=styled_sales.to_html())

# Save the dashboard to a file
with open('sales_dashboard.html', 'w') as f:
    f.write(dashboard_html)

print("Dashboard created successfully! Open 'sales_dashboard.html' in a browser to view it.")

Output:

Dashboard created successfully! Open 'sales_dashboard.html' in a browser to view it.

This example creates a professional-looking sales dashboard with styled data that could be used in a business reporting context.

Working with Large DataFrames

When working with large DataFrames, rendering complete HTML tables can become unwieldy. Here's how to handle large datasets:

python
# Create a large DataFrame
large_df = pd.DataFrame(np.random.randn(1000, 5), 
                       columns=['A', 'B', 'C', 'D', 'E'])

# Export with limitations
html_large = large_df.to_html(
    max_rows=10,       # Show only 10 rows
    max_cols=3,        # Show only 3 columns
    show_dimensions=True  # Show dimensions of the original DataFrame
)

print(html_large[:500] + "...")

Output:

html
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>-0.472278</td>
      <td>-0.351188</td>
      <td>0.661597</td>
      <td>...</td>
    </tr>
    <!-- More rows here -->
    <tr>
      <th>999</th>
      <td>-0.053582</td>
      <td>1.968251</td>
      <td>1.012961</td>
      <td>...</td>
    </tr>
  </tbody>
</table>
<p>1000 rows × 5 columns</p>

Summary

In this tutorial, you've learned how to:

Convert pandas DataFrames to HTML using to_html()
Customize HTML table appearance with various parameters
Save HTML tables to files
Use the pandas Styling API for advanced table formatting
Create interactive dashboards by combining pandas HTML export with web technologies
Handle large DataFrames efficiently

HTML export is a powerful feature when you need to share your data analysis results in a web-friendly format. With the styling capabilities of pandas, you can create professional-looking tables that effectively communicate your insights.

Additional Resources and Exercises

Resources

Exercises

Basic Export: Create a DataFrame of your choice and export it to an HTML file with the index hidden.
Conditional Styling: Create a DataFrame of student grades and use styling to highlight passing (>60) and failing (<60) grades in different colors.
Dashboard Creation: Extend the sales dashboard example by adding a second table showing top-performing products.
Integration Challenge: Create a DataFrame from a CSV file of your choice, style it, and embed it in an HTML page with a navigation menu and footer.
Advanced Styling: Create a financial report table with profit/loss data that shows negative values in red and positive values in green, with appropriate currency formatting.

Happy coding!

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction​

Basic HTML Export​

Customizing HTML Output​

Common Customization Options​

Saving HTML to Files​

Styling Tables with Pandas Styling API​

Real-World Application: Creating an Interactive Dashboard​

Working with Large DataFrames​

Summary​

Additional Resources and Exercises​

Resources​

Exercises​

Introduction

Basic HTML Export

Customizing HTML Output

Common Customization Options

Saving HTML to Files

Styling Tables with Pandas Styling API

Real-World Application: Creating an Interactive Dashboard

Working with Large DataFrames

Summary

Additional Resources and Exercises

Resources

Exercises