Создание HTML таблицы

Этот пример демонстрирует генерацию HTML-таблицы с помощью специальной функции tag на языке Julia.

Введение

Алгоритм создания HTML-таблицы решает задачу генерации динамического содержимого HTML-страниц. В данном случае, мы используем программный подход для создания табличных данных в формате HTML — это полезно для подготовки отчетов, представления результатов вычислений или любых других целей, где нужна структура данных из строк и столбцов.

HTML-таблица состоит из элементов <table>, <thead> / <tbody>, <tr> (строка), <th> (заголовок) и <td> (ячейка). Мы автоматизируем всю эту структуру, используя простую и удобную конструкцию на базе функции tag. Функция позволяет задавать теги и их атрибуты гибко, без необходимости знания всех деталей синтаксиса HTML.

Функция `tag`

Функция tag принимает имя тэга (первым аргументом) и список пар атрибутов name => value. Она формирует строку с HTML-разметкой вида:

"""
Функция tag(x::Pair, attr::Pair...) создаёт HTML-тег.
:param x: пара вида (:TagName => Content)
:param attr: переменное количество пар :AttributeName => Value
:return: строковое представление тега
"""
function tag(x::Pair, attr::Pair...)
    t, b = x       # извлекаем имя тега (t) и содержимое (b)
    attrstr = join(" $n=\"$p\"" for (n, p) in attr)  # собираем строки атрибутов
    return "<$t$attrstr>$b</$t>"            # строим сам тег
end

tag

Генерация столбцов таблицы (`colnames`)

На следующем шаге определяются названия колонок таблицы. Они берутся путём разделения строки ",X,Y,Z" запятой с помощью функции split().

Массив colnames будет содержать массив строк ["", "X", "Y", "Z"].

# Разделить строку ",X,Y,Z" по символу ',' чтобы получить список имён столбцов.
# В результате получаем пустое поле перед первой запятой – это заголовок левого столбца.
colnames = split(",X,Y,Z", ',')

colnames

Формирование строки заголовков (`<thead>`)

Создается строка заголовков — каждое имя столбца оборачивается в HTML-тег <th>. После этого все ячейки объединяются с помощью join(...) через \n.

Эта часть будет использоваться внутри тега <tr> при дальнейшем формировании заголовков таблицы.

# Создаём строку с заголовками таблицы. Для каждой ячейки делаем тег th.
header = join(tag(:th => txt) for txt in colnames) * "\n"

header

Подготовка строк данных (`<tbody>`)

Далее генерируются сами строки данных в теле таблицы. Циклом проходим от 1 до 6:

Для каждого номера i создается строка <tr>
Первая ячейка имеет стиль bold, остальные три — случайные числа от 1000 до 9999

Строковый вывод сохраняется в коллекции rows.

# Генерируем строки таблицы - у каждой строки есть несколько ячеек td со случайными значениями.
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
)

rows

Комбинирование заголовка и данных

Формируем окончательную структуру <tbody>, добавляя символы переноса строк вокруг блока строк таблицы.

# Объединяем все строки с данными в один блок тела таблицы.
body = "\n" * join(rows, '\n') * "\n"

body

Итоговая сборка таблицы

Финальный этап — собрать всё вместе: помещаем подготовленные части в общий тег <table>, который также имеет собственные атрибуты. В данном случае задается ширина таблицы 60%.

Итоговая структура:

Собираем всю таблицу в тег <table>.

table = tag(:table => string('\n', header, body, '\n'), :style => "width: 60%")

"<table style=\"width: 60%\">\n<th></th><th>X</th><th>Y</th><th>Z</th>\n\n<tr><td style=\"font-weight: bold;\">1</td><td>9971</td><td>7158</td><td>9406</td></tr>\n<tr><td style=\"font-weight: bold;\">2</td><td>8512</td><td>6578</td><td>5560</td></tr>\n<tr><td style=\"font-weight: bol" ⋯ 51 bytes ⋯ "tr>\n<tr><td style=\"font-weight: bold;\">4</td><td>5204</td><td>6699</td><td>7601</td></tr>\n<tr><td style=\"font-weight: bold;\">5</td><td>3784</td><td>7417</td><td>8041</td></tr>\n<tr><td style=\"font-weight: bold;\">6</td><td>1713</td><td>9585</td><td>2317</td></tr>\n\n</table>"

Окончательный вывод HTML-результата.

print(table)

<table style="width: 60%">
<th></th><th>X</th><th>Y</th><th>Z</th>

<tr><td style="font-weight: bold;">1</td><td>9971</td><td>7158</td><td>9406</td></tr>
<tr><td style="font-weight: bold;">2</td><td>8512</td><td>6578</td><td>5560</td></tr>
<tr><td style="font-weight: bold;">3</td><td>6905</td><td>5379</td><td>6109</td></tr>
<tr><td style="font-weight: bold;">4</td><td>5204</td><td>6699</td><td>7601</td></tr>
<tr><td style="font-weight: bold;">5</td><td>3784</td><td>7417</td><td>8041</td></tr>
<tr><td style="font-weight: bold;">6</td><td>1713</td><td>9585</td><td>2317</td></tr>

</table>

Скопируем полученный результат и вставим в Markdown-текстовую ячейку для проверки:

	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

Заключение

Мы рассмотрели реализацию алгоритма динамической генерации HTML-таблицы. Нами была создана пользовательская функция tag, которая позволяет легко собирать любые HTML-элементы, в том числе сложные теги с атрибутами. На основе этой функции были успешно сформированы строки и столбцы таблицы, сгенерированные заголовки и данные.

Подобный подход широко используется для генерации отчётов, анализа данных, автоматизации создания интерфейсов или даже экспортных данных в формате HTML. Теперь вы можете применять этот шаблон в своих проектах!

Пример разработан с использованием материалов Rosetta Code

Создание HTML-таблицы