How to format HTML tables generated by Python tabulate

The tabulate library simplifies the generation of HTML tables and with a bit of customization, you can style these tables using CSS.

In this tutorial, you’ll learn how to format HTML tables generated by tabulate and apply various styling methods.

 

 

Add Classes to Tabulate Tables

Assign Classes

You can add classes to the HTML elements generated by tabulate to target them with CSS.

To assign a class to the <table> element, you can replace the opening tag in the HTML string.

from tabulate import tabulate
data = [
    ['Ahmed', 'Cairo', 29],
    ['Mona', 'Alexandria', 34],
    ['Youssef', 'Giza', 27]
]
headers = ['Name', 'City', 'Age']
html_table = tabulate(data, headers, tablefmt='html')

# Assign a class to the <table> tag
html_table = html_table.replace('<table>', '<table class="my-table">')
print(html_table)

Output:

<table class="my-table">
<thead>
<tr><th>Name   </th><th>City      </th><th style="text-align: right;">  Age</th></tr>
</thead>
<tbody>
<tr><td>Ahmed  </td><td>Cairo     </td><td style="text-align: right;">   29</td></tr>
<tr><td>Mona   </td><td>Alexandria</td><td style="text-align: right;">   34</td></tr>
<tr><td>Youssef</td><td>Giza      </td><td style="text-align: right;">   27</td></tr>
</tbody>
</table>

The <table> tag now includes class="my-table", which you can use in your CSS for styling.

Assign classes for multiple elements

You can also add classes to <tr>, <th>, and <td> elements:

# Assign classes to <thead> and <tbody> rows
html_table = html_table.replace('<thead>', '<thead class="table-head">')
html_table = html_table.replace('<tbody>', '<tbody class="table-body">')

# Assign classes to <th> and <td> elements
html_table = html_table.replace('<th>', '<th class="table-header">')
html_table = html_table.replace('<td>', '<td class="table-data">')
print(html_table)

Output:

<table class="my-table">
<thead class="table-head">
<tr><th class="table-header">Name   </th><th class="table-header">City      </th><th style="text-align: right;">  Age</th></tr>
</thead>
<tbody class="table-body">
<tr><td class="table-data">Ahmed  </td><td class="table-data">Cairo     </td><td style="text-align: right;">   29</td></tr>
<tr><td class="table-data">Mona   </td><td class="table-data">Alexandria</td><td style="text-align: right;">   34</td></tr>
<tr><td class="table-data">Youssef</td><td class="table-data">Giza      </td><td style="text-align: right;">   27</td></tr>
</tbody>
</table>

Now, each element has a specific class.

 

Add CSS to Tabulate Tables

You can apply CSS directly within the HTML using <style> tags or link to an external stylesheet.

Using Inline CSS:

css = '''
<style>
.my-table {
    width: 60%;
    border-collapse: collapse;
}
.table-header, .table-data {
    border: 1px solid #cccccc;
    padding: 8px;
}
</style>
'''

# Combine CSS with the HTML table
html_content = css + html_table
print(html_content)

Output:

<style>
.my-table {
    width: 60%;
    border-collapse: collapse;
}
.table-header, .table-data {
    border: 1px solid #cccccc;
    padding: 8px;
}
</style>
<table class="my-table">
<thead class="table-head">
<tr><th class="table-header">Name   </th><th class="table-header">City      </th><th style="text-align: right;">  Age</th></tr>
</thead>
<tbody class="table-body">
<tr><td class="table-data">Ahmed  </td><td class="table-data">Cairo     </td><td style="text-align: right;">   29</td></tr>
<tr><td class="table-data">Mona   </td><td class="table-data">Alexandria</td><td style="text-align: right;">   34</td></tr>
<tr><td class="table-data">Youssef</td><td class="table-data">Giza      </td><td style="text-align: right;">   27</td></tr>
</tbody>
</table>

This HTML content now includes inline CSS that styles the table when rendered in a browser.

Style Specific Rows

You can apply styles to specific rows or columns by adding classes or using CSS selectors.

# Add a class to the second row
html_table = html_table.replace(
    '<tr><td class="table-data">Mona',
    '<tr class="highlight-row"><td class="table-data">Mona'
)
print(html_table)

Output:

<table class="my-table">
<thead class="table-head">
<tr><th class="table-header">Name   </th><th class="table-header">City      </th><th style="text-align: right;">  Age</th></tr>
</thead>
<tbody class="table-body">
<tr><td class="table-data">Ahmed  </td><td class="table-data">Cairo     </td><td style="text-align: right;">   29</td></tr>
<tr class="highlight-row"><td class="table-data">Mona   </td><td class="table-data">Alexandria</td><td style="text-align: right;">   34</td></tr>
<tr><td class="table-data">Youssef</td><td class="table-data">Giza      </td><td style="text-align: right;">   27</td></tr>
</tbody>
</table>

Now the second row has the class highlight-row, which you can style in your CSS.

 

Table Border Customization

Set Border Styles

You can customize the border style of your table and cells using CSS.

css = '''
<style>
.my-table {
    border-collapse: collapse;
}
.table-header, .table-data {
    border: 1px dashed #000;
}
</style>
'''
html_content = css + html_table
print(html_content)

Output:

<style>
.my-table {
    border-collapse: collapse;
}
.table-header, .table-data {
    border: 1px dashed #000;
}
</style>
<!-- Rest of the HTML table -->

The borders of the table cells are now styled with a dashed line.

Control Border Width and Color

Adjust the border width and color to suit your design.

css = '''
<style>
.table-header, .table-data {
    border: 2px solid #336699;
}
</style>
'''
html_content = css + html_table
print(html_content)

Output:

<style>
.table-header, .table-data {
    border: 2px solid #336699;
}
</style>
<!-- Rest of the HTML table -->

The table now has thicker borders with a specific color.

 

Alternating Row Colors

You can enhance readability by applying alternating background colors to rows.

css = '''
<style>
.table-body tr:nth-child(odd) {
    background-color: #f2f2f2;
}
.table-body tr:nth-child(even) {
    background-color: #ffffff;
}
</style>
'''
html_content = css + html_table
print(html_content)

Output:

<style>
.table-body tr:nth-child(odd) {
    background-color: #f2f2f2;
}
.table-body tr:nth-child(even) {
    background-color: #ffffff;
}
</style>
<!-- Rest of the HTML table -->

Rows will alternate between light grey and white backgrounds.

 

Hover Effects

Adding a hover effect can make your table more interactive.

css = '''
<style>
.table-body tr:hover {
    background-color: #ddd;
}
</style>
'''
html_content = css + html_table
print(html_content)

Output:

<style>
.table-body tr:hover {
    background-color: #ddd;
}
</style>
<!-- Rest of the HTML table -->

When you hover over a row, its background color will change.

 

Responsive Table Design

To ensure your table looks good on all devices, make it responsive.

css = '''
<style>
.my-table {
    width: 100%;
    max-width: 600px;
    margin: auto;
    overflow-x: auto;
}
</style>
'''
html_content = css + html_table
print(html_content)

Output:

<style>
.my-table {
    width: 100%;
    max-width: 600px;
    margin: auto;
    overflow-x: auto;
}
</style>
<!-- Rest of the HTML table -->

Now, the table will adjust to the screen size, and a horizontal scrollbar will appear if needed.

 

Add Icons to Cells

You can insert icons into your table cells using HTML entities or icon libraries.

# Add an icon to indicate age group
for i, row in enumerate(data):
    age = row[2]
    if age < 30:
        icon = '🔹'  # A blue diamond icon
    else:
        icon = '🔸'  # An orange diamond icon
    data[i][2] = f'{age} {icon}'

# Generate the updated HTML table
html_table = tabulate(data, headers, tablefmt='html')
print(html_table)

Output:

<table>
<thead>
<tr><th>Name    </th><th>City       </th><th>Age       </th></tr>
</thead>
<tbody>
<tr><td>Ahmed   </td><td>Cairo      </td><td>29 🔹    </td></tr>
<tr><td>Mona    </td><td>Alexandria </td><td>34 🔸    </td></tr>
<tr><td>Youssef </td><td>Giza       </td><td>27 🔹    </td></tr>
</tbody>
</table>

Icons are now displayed next to the age in each cell.

 

Handle Image Content in Tables

To include images within your table cells, insert <img> tags into the cell data.

# Add images to the City column
data = [
    ['Ahmed', '<img src="cairo.png" alt="Cairo" width="30">', '29 🔹'],
    ['Mona', '<img src="alexandria.png" alt="Alexandria" width="30">', '34 🔸'],
    ['Youssef', '<img src="giza.png" alt="Giza" width="30">', '27 🔹']
]

html_table = tabulate(data, headers, tablefmt='unsafehtml')
# 'unsafehtml' allows HTML content in cells
print(html_table)

Output:

<table>
<thead>
<tr><th>Name    </th><th>City       </th><th>Age       </th></tr>
</thead>
<tbody>
<tr><td>Ahmed   </td><td><img src="cairo.png" alt="Cairo" width="30"></td><td>29 🔹    </td></tr>
<tr><td>Mona    </td><td><img src="alexandria.png" alt="Alexandria" width="30"></td><td>34 🔸    </td></tr>
<tr><td>Youssef </td><td><img src="giza.png" alt="Giza" width="30"></td><td>27 🔹    </td></tr>
</tbody>
</table>

Now, each city cell displays an image representing the city.