Creating an HTML table
This example demonstrates the generation of an HTML table using a special function. tag in Julia's language.
Introduction
The HTML table creation algorithm solves the problem of generating dynamic HTML page content. In this case, we use a programmatic approach to create tabular data in HTML format. This is useful for preparing reports, presenting calculation results, or any other purposes where a row and column data structure is needed.
An HTML table consists of the following elements <table>, <thead> / <tbody>, <tr> (line), <th> (title) and <td> (cell). We automate this entire structure using a simple and convenient design based on the function tag. The function allows you to set tags and their attributes flexibly, without having to know all the details of HTML syntax.
Function tag
Function tag accepts the tag name (as the first argument) and a list of attribute pairs name => value. It forms a string with HTML markup in the form:
"""
The tag(x) function::Pair, attr::Pair...) creates an HTML tag.
:param x: a pair of the form (:TagName => Content)
:param attr: variable number of pairs :attributeName => Value
:return: string representation of the tag
"""
function tag(x::Pair, attr::Pair...)
t, b = x # extracting the tag name (t) and the content (b)
attrstr = join(" $n=\"$p\"" for (n, p) in attr) # collecting attribute strings
return "<$t$attrstr>$b</$t>" # building the tag itself
end
Generating table columns (colnames)
In the next step, the column names of the table are determined. They are taken by separating the string ",X,Y,Z" with a comma using the function split().
Array colnames will contain an array of strings ["", "X", "Y", "Z"].
# Split the string ",X,Y,Z" by the character ',' to get a list of column names.
# As a result, we get an empty field before the first comma – this is the header of the left column.
colnames = split(",X,Y,Z", ',')
Forming a header line (<thead>)
A header row is created — each column name is wrapped in an HTML tag. <th>. After that, all the cells are combined using join(...) through \n.
This part will be used inside the tag. <tr> during further formation of the table headers.
# Creating a row with the table headers. We make a th tag for each cell.
header = join(tag(:th => txt) for txt in colnames) * "\n"
Preparing data rows (<tbody>)
Next, the data rows themselves are generated in the body of the table. We cycle from 1 to 6:
- For each room
ia string is being created<tr> - The first cell has a style
boldThe other three are random numbers from 1000 to 9999
The string output is saved in the collection rows.
# We generate the rows of the table - each row has several td cells with random values.
rows = collect(
tag(:tr =>
join(
tag(:td => i, :style => "font-weight: bold;") *
join(tag(:td => rand(1000:9999)) for j in 1:3)
)
) for i in 1:6
)
Combining header and data
Forming the final structure <tbody> by adding line breaks around a block of table rows.
# We combine all rows with data into one block of the table body.
body = "\n" * join(rows, '\n') * "\n"
Final table assembly
The final stage is to put everything together: we put the prepared parts in a common tag <table>, which also has its own attributes. In this case, the table width is set to 60%.
The final structure:
We collect the entire table in the tag <table>.
table = tag(:table => string('\n', header, body, '\n'), :style => "width: 60%")
The final output of the HTML result.
print(table)
Copy the result and paste it into a Markdown text cell for verification.:
| X | Y | Z | |
|---|---|---|---|
| 1 | 9971 | 7158 | 9406 |
| 2 | 8512 | 6578 | 5560 |
| 3 | 6905 | 5379 | 6109 |
| 4 | 5204 | 6699 | 7601 |
| 5 | 3784 | 7417 | 8041 |
| 6 | 1713 | 9585 | 2317 |
Conclusion
We have reviewed the implementation of the dynamic HTML table generation algorithm. We have created a custom function tag, which makes it easy to assemble any HTML elements, including complex tags with attributes. Based on this function, the rows and columns of the table, the generated headers and data were successfully generated.
This approach is widely used for generating reports, analyzing data, automating the creation of interfaces, or even exporting data in HTML format. Now you can apply this template in your projects!
The example was developed using materials from Rosetta Code