Pandas to_html(): Render a data frame as an HTML table

As you know, Pandas is a Python library for working with data. The data can be in any format like JSON, CSV, etc. You can read them from these formats into a Pandas data frame and also write the data into formats like JSON, CSV, Excel sheets, etc.

In our previous articles, we have talked about the below two Pandas’ functions:

• Pandas to_excel(): Write an object to an Excel Sheet
• Pandas to_csv(): Write an object to a CSV File

In this article, you will learn about the pandas.to_html() function which lets you render a data frame as an HTML table.

Syntax of Pandas to_html()

DataFrame.to_html(buf=None, 
columns=None, 
col_space=None, 
header=True, 
index=True, 
na_rep='NaN', 
formatters=None, 
float_format=None, 
sparsify=None, 
index_names=True, 
justify=None, 
max_rows=None, 
max_cols=None, 
show_dimensions=False, 
decimal='.', 
bold_rows=True, 
classes=None, 
escape=True, 
notebook=False, 
border=None, 
table_id=None, 
render_links=False, 
encoding=None)

Some of the parameters are:

Returns: If buf is None, then return a string. Otherwise, returns None.

Note: In all the below examples, you will get a string that contains the HTML code for the output as I have not specified any buf. You need to write the HTML code in the body section of an HTML file and run it in order to see the outputs. The article contains only the output images.

Rendering the data frame as an HTML table

Let us create a data frame first.

import pandas as pd

# creating a data frame
data = {
    "fruit": ["apple", "banana", "grapes", "orange"],
    "colour": ["red", "yellow", "green", "orange"],
    "quantity": [2, 1, 1, 3],
    "price": [80, 40, 100, 75]
}

df = pd.DataFrame(data)

df

You can just get the HTML code for the table as shown below:

print(df.to_html())

Output:

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>fruit</th>
      <th>colour</th>
      <th>quantity</th>
      <th>price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>apple</td>
      <td>red</td>
      <td>2</td>
      <td>80</td>
    </tr>
    <tr>
      <th>1</th>
      <td>banana</td>
      <td>yellow</td>
      <td>1</td>
      <td>40</td>
    </tr>
    <tr>
      <th>2</th>
      <td>grapes</td>
      <td>green</td>
      <td>1</td>
      <td>100</td>
    </tr>
    <tr>
      <th>3</th>
      <td>orange</td>
      <td>orange</td>
      <td>3</td>
      <td>75</td>
    </tr>
  </tbody>
</table>

This code when written in an HTML file gives the following table:

Specifying only selected columns for the output

Using the ‘columns‘ parameter, you can specify which columns from the Pandas data frame you want in the resulting HTML table.

print(df.to_html(columns=['fruit', 'price']))

Table:

As specified in the code above, only the columns named ‘fruit’ and ‘price’ are included in the output.

Specifying the maximum number of rows and columns

If the data frame is too big and you don’t want all of it to be displayed in the HTML table, you can mention the maximum number of rows and columns to be displayed in the output by using the ‘max_rows’ and ‘max_cols’ parameters.

print(df.to_html(max_rows = 2, max_cols = 1))

Table:

As the code said, 2 rows and 1 column are completely displayed. Note that, the index is not considered as a column here.

Changing the column width

The ‘col_space’ parameter lets you specify the column width for the HTML table. Any integer value in this is considered to be in pixel units by default. Any of the CSS units can be used here.

print(df.to_html(col_space = 55))

Table:

Specifying NA representation

Sometimes the data may contain some missing values. In such cases, you can assign a representative to the missing values using the ‘na_rep’ parameter. You can assign a string containing any character, symbol, or expression to this parameter.

Suppose you modify the previous data frame to contain some missing values as follows:

import pandas as pd
import numpy as np

# creating a data frame
data = {
    "fruit": ["apple", np.nan, "grapes", "orange"],
    "colour": ["red", "yellow", np.nan, "orange"],
    "quantity": [np.nan, np.nan, 1, 3],
    "price": [80, np.nan, 100, 75]
}

df = pd.DataFrame(data)

df

Now, in the below code, the string ‘***’ is used to represent the missing values using the pandas.to_html() function in the resulting HTML table.

print(df.to_html(na_rep = '***'))

Table:

Conclusion

The Pandas to_html() function lets you convert a Pandas data frame into HTML table format. It also provides you with many options to customize your HTML output based on your requirements by using different parameters, some of which are discussed in this article.

Reference

• Pandas to_html() Official Documentation