Formatting HTML with Python

Question

I want to format my html code in python.

My Python file is:

titles = ['aaa', 'bbb', 'ccc', 'ddd', 'eee']
html_text = """<html>
<head>
    <style type="text/css">
        table { border-collapse: collapse;}
        td { text-align: center; border: 5px solid #ff0000; border-style: dashed; font-size: 30px; }
    </style>
</head>
<body>
    <table width="100%" height="100%" border="5px">
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
    </table>
</body>
</html> % (titles[0], titles[1], titles[2], titles[3], titles[4])"""

f = open('temp.html', 'w')
f.write(html_text)
f.close()

I want to make those %s to be titles[0], titles[1], titles[2], titles[3], titles[4].

How can I make it?

What have you tried so far? Edit: My bad didn't see the bottom of the scroll box — Brandon
– Brandon, Commented Jan 13, 2019 at 6:41

Tom Wojcik · Accepted Answer · 2019-01-13 06:48:30Z

2

fstrings is what cool kids use nowadays.

titles = ['aaa', 'bbb', 'ccc', 'ddd', 'eee']
html_text = f"""<html>
<head>
    <style type="text/css">
        table {{ border-collapse: collapse;}}
        td {{ text-align: center; border: 5px solid #ff0000; border-style: dashed; font-size: 30px; }}
    </style>
</head>
<body>
    <table width="100%" height="100%" border="5px">
        <tr>
            <td>{titles[0]}</td>
        </tr>
        <tr>
            <td>{titles[1]}</td>
        </tr>
        <tr>
            <td>{titles[2]}</td>
        </tr>
        <tr>
            <td>{titles[3]}</td>
        </tr>
        <tr>
            <td>{titles[4]}</td>
        </tr>
    </table>
</body>
</html>"""


with open('temp.html', 'w') as f:
    f.write(html_text)

You put variable in {} within a text, and your styles have to be escaped with double {{}}. Try it out.

Also, pythonic way of writing to a file is with a context manager. It handles closing without the need of .close() on an opened file.

answered Jan 13, 2019 at 6:48

Tom Wojcik

6,2894 gold badges38 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hoseong Jeon Over a year ago

It give me an error: </html>""" SyntaxError: invalid syntax

Tom Wojcik Over a year ago

It works just fine, trust me. I run it here. Unless, of course, you work on Python 2.x. It has to be 3.x

iz_ Over a year ago

Python 3.6+, to be specific.

buran · Accepted Answer · 2019-01-13 07:24:51Z

2

You can use some template engine that mix logic into template.

Example with jinja2:

install with pip install jinja2

2 then the code would be:

html_text = """<html>
<head>...</head>
<body>
    <table width="100%" height="100%" border="5px">
        {% for title in titles %}
        <tr>
            <td>{{title}}</td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>"""

from jinja2 import Template
titles = ['aaa', 'bbb', 'ccc', 'ddd', 'eee']
my_templ = Template(html_text)
with open('temp.html', 'w') as f:
    f.write(my_templ.render(titles=titles))

Note that it is flexible to handle list of variable length. Template engines are used in the web frameworks.

edited Jan 13, 2019 at 7:24

answered Jan 13, 2019 at 7:16

buran

14.4k13 gold badges45 silver badges76 bronze badges

Comments

BoarGules · Accepted Answer · 2019-01-13 09:27:33Z

There are two errors in your format string. The first, as U9-Forward pointed out, is here:

</html> % (titles[0], titles[1], titles[2], titles[3], titles[4])"""

The % is an interpolation operator so it needs to go between the string and the data:

</html>""" % (titles[0], titles[1], titles[2], titles[3], titles[4])

The second error, apparent only after you fixed that one, is here:

<table width="100%" height="100%" border="5px">

When you use the % operator, the character % becomes special, so that %s does what you expect. But when that happens, "100%" isn't legal, because, as the error message told you, it puts an unsupported format character '"' (0x22) at index 237. You could have found this out for yourself in under a minute by putting your cursor at the beginning of the string and pressing right-arrow 237 times.

In this case, the % that you want to stay % must be doubled:

<table width="100%%" height="100%%" border="5px">

That gives

html_text = '''<html>
<head>
    <style type="text/css">
        table { border-collapse: collapse;}
        td { text-align: center; border: 5px solid #ff0000; border-style: dashed; font-size: 30px; }
    </style>
</head>
<body>
    <table width="100%%" height="100%%" border="5px">
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
    </table>
</body>
</html>''' % (titles[0], titles[1], titles[2], titles[3], titles[4])

But the fundamental problem here is that Python %-strings are a formatting mini-language, and HTML is a formatting language, and so constructing HTML like this means you are programming in two languages simultaneously. The doublethink that this involves gives some experienced programmers a kick, but the rest of us are happier separating our concerns and dealing with one language at a time. Instead of %-strings, consider using lxml to construct your HTML. There is more of a learning curve (eased by an excellent tutorial) but your code will be easier to write and maintain, and lxml will ensure your HTML is free of syntax errors.

U13-Forward · Accepted Answer · 2019-01-13 06:45:53Z

0

You ended the string in the wrong place, so use the below as full code:

titles = ['aaa', 'bbb', 'ccc', 'ddd', 'eee']
html_text = '''<html>
<head>
    <style type="text/css">
        table { border-collapse: collapse;}
        td { text-align: center; border: 5px solid #ff0000; border-style: dashed; font-size: 30px; }
    </style>
</head>
<body>
    <table width="100%" height="100%" border="5px">
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
        <tr>
            <td>%s</td>
        </tr>
    </table>
</body>
</html>''' % (titles[0], titles[1], titles[2], titles[3], titles[4])

f = open('temp.html', 'w')
f.write(html_text)
f.close()

So now you'll get your expected HTML file.

edited Jan 13, 2019 at 6:45

answered Jan 13, 2019 at 6:41

U13-Forward

71.8k15 gold badges100 silver badges125 bronze badges

4 Comments

Hoseong Jeon Over a year ago

Thank you for quick answer, but your code doesn't work. It gives me this error: ValueError: unsupported format character '"' (0x22) at index 237, and my HTML file isn't changed, too.

U13-Forward Over a year ago

@HoseongJeon Error?

Jean-Baptiste Yunès Over a year ago

@HoseongJeon then type it yourself, don't use cut-n-paste... At least make some effort.

U13-Forward Over a year ago

@Jean-BaptisteYunès I agree with you, yeah.

Collectives™ on Stack Overflow

Formatting HTML with Python

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related