ValueError: unsupported format character ';' (0x3b) at index 946 HTML email with pandas dataframe

I'm trying to send an email in HTML format with pandas dataframe

I've converted pandas dataframe to html code using .to_html(index = False)

While passing converted dataframe to HTML code using %s is throwing an error as

ValueError: unsupported format character ';' (0x3b) at index 894

When I use .format() for passing the parameter it is throwing

KeyError: '\npadding' error

Here is my code

html_body = '''<!DOCTYPE html>
<html>
<head>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<style>
th,td{
padding: 10px;
}
.dataframe{
border:1px;
width: 80%;
padding: 25px;
margin: auto;
margin-top:30px;
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #dee2e6;
border: 1px solid black;
}

table thead tr {
background-color: #dee2e6;
}
td{
background-color: white;

}

table, th, td{
border: 1px solid black;
}
</style>
</head>

<body>

<h2 style="text-align: center;"> We found anomalies in following record/s </h2>

{dataframe}



</body>
</html>'''.format(dataframe=html_df)

Solution

I think that the ValueError comes from the fact you have an unescaped % character in your html text (width = 80%;). If you replace it by a double %% it should work (width: 80%%;) as in the following example:

html_body = '''<!DOCTYPE html>
<html>
<head>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<style>
th,td{
padding: 10px;
}
.dataframe{
border:1px;
width: 80%%;
padding: 25px;
margin: auto;
margin-top:30px;
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #dee2e6;
border: 1px solid black;
}

table thead tr {
background-color: #dee2e6;
}
td{
background-color: white;

}

table, th, td{
border: 1px solid black;
}
</style>
</head>

<body>

<h2 style="text-align: center;"> We found anomalies in following record/s </h2>

%(dataframe)s



</body>
</html>'''  % {"dataframe":"bla"}