Таблица HTML: отображать горизонтальное двоичное дерево через rowspan?
Я хотел бы создать следующее представление двоичного дерева с помощью элемента HTML table (рисунок ниже был создан в редакторе изображений, а не в HTML):
Учитывая мой предыдущий опыт работы с атрибутом colspan, успешно создающим подобные вертикальные деревья, кажется, что это вполне возможно, используя атрибут rowspan с чем-то вроде следующего кода:
<!DOCTYPE html>
<html>
<body>
<table border = "1" cellpadding = "0" cellspacing = "0">
<tr>
<td rowspan = "4">1</td>
<td rowspan = "2">2</td>
<td rowspan = "1">4</td>
</tr>
<tr>
<td rowspan = "2">3</td>
<td rowspan = "1">5</td>
</tr>
<tr>
<td rowspan = "1">6</td>
</tr>
<tr>
<td rowspan = "1">7</td>
</tr>
</table>
</body>
</html>
Однако результат приведенного выше кода не отображается должным образом ни в одной из последних версий каждого современного браузера, который я пробовал (Chrome, Safari, Firefox, Brave):
Я делаю что-то неправильно? Возможно ли это с таблицей HTML? Вроде должно быть, но не работает...
Примечания:
Я бы очень хотел сделать таблицу HTML, если это возможно.
На самом деле я хочу расширить это дерево на большее количество поколений (возможно, даже до 10 или 12 или около того), поэтому в идеале для этого подойдет любое решение.
Я экспериментировал с новыми функциями «CSS Grid» — хороший инструмент, но CSS Grid кажется плохо подходящим для расширения такого дерева на многие поколения, поскольку кажется, что каждая ячейка сетки требует явной спецификации CSS
grid-row-startдля правильного размещения. в нужной строке дерева (а не просто перемещаться в следующую доступную естественную позицию, как с таблицами HTML). Если я расширим эту древовидную диаграмму на поколения, содержащие сотни или тысячи ячеек, то объявление явных значенийgrid-row-startдля каждой ячейки покажется непрактичным (или, по крайней мере, крайне нежелательным).
Хороший! Я думаю, что все еще предпочитаю html-таблицу, но я думаю, что это была бы приемлемая замена (тогда как мое первоначальное понимание CSS Grid было в основном неприемлемым, потому что оно было значительно хуже).
Ответы 1
Типично: формулировка и перечитывание вопроса заставили меня осознать ошибку в моем HTML-коде.
Следующий (слегка измененный) код работает так, как ожидалось/желалось:
<!DOCTYPE html>
<html>
<body>
<table border = "1" cellpadding = "0" cellspacing = "0">
<tr>
<td rowspan = "4">1</td>
<td rowspan = "2">2</td>
<td rowspan = "1">4</td>
</tr>
<tr>
<td rowspan = "1">5</td>
</tr>
<tr>
<td rowspan = "2">3</td>
<td rowspan = "1">6</td>
</tr>
<tr>
<td rowspan = "1">7</td>
</tr>
</table>
</body>
</html>
Мне кажется, вы слишком легкомысленно относитесь к CSS Grid. См. jsbin.com/vukehuzizo/1/edit?html,css,output, чтобы узнать, как можно сделать макет. Надеюсь, вы видите закономерность и то, как ее можно распространить на сотни или тысячи клеток.