HTML Code Builder (in Python)

html-tag

Learning Objectives


By completing this challenge you will learn how to use count-controlled loops (for loops). You will include a loop within a loop: This is called nesting.

In this challenge you will also use string concatenation techniques.

Finally you will also learn about the following tags in HTML:

  • <UL>, <LI> tags used to create bullet point lists in HTML,
  • <TABLE>, <TR> and <TD> tags used to create tables in HTML.

Bullet Point Lists in HTML


In HTML you can create bullet point lists to display information on the page as follows:
  • First bullet point,
  • Second bullet point,
  • and so on…

To do so you need to use both a <UL> tag to open and close the list and a <LI> tag for each bullet point within the list.
Here is HTML the code:

<UL>
	<LI>First bullet point,</LI>
	<LI>Second bullet point,</LI>
	<LI>and so on...</LI>
</UL>

Using Python we have written a script that prompts the user to enter the number of bullet points they need. In return the script produces the HTML code for the user to copy and paste to their webpage.

HTML Tables


From time to time, when building a webpage in HTML you need to present your data using a table.

A table (<TABLE>) is made of rows (<TR>). Each row is made of data cells (<TD>).

So for instance a 3×2 table contains 3 rows and each row contains 2 data cells. The HTML code of such a table is as follows:

HTML-Table

This is the full code in HTML:

<TABLE>
	<TR>
		<TD> ... </TD>
		<TD> ... </TD>
	</TR>
	<TR>
		<TD> ... </TD>
		<TD> ... </TD>
	</TR>
	<TR>
		<TD> ... </TD>
		<TD> ... </TD>
	</TR>
</TABLE>

Check this other example of table from w3schools.

Your Challenge


Write a python script (or reuse the script above) to prompt the user to enter the number of rows and the number of columns they need for their table. The program should then generate the HTML code for the required table.

Extension Task:


Check how this online HTML Table Code Generator works.

Update your code to ask for additional settings such as:

  • Table width,
  • Table alignment,
  • Cell padding,
  • Background Colour,
  • Border thickness and colour,
  • etc…

Your program should then generate the HTML code for the table, including the given parameters using HTML or CSS attributes.

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Did you like this challenge?

Click on a star to rate it!

Average rating 4.8 / 5. Vote count: 5

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!