объединение таблицы и иерархического списка в html

<p>я работаю над редизайном устаревшего набора инструментов и смотрю, как лучше отобразить некоторую информацию как в презентационном, так и в семантическом виде.</p><p>данные иерархически по своей природе, но имеют свойства, которые должны быть легко видны пользователям. желаемый макет похож на ниже.</p><pre><code>seq item name min max - anything under here isn't shown 1 identifier 1 1 (required) 2 name 1 1 2.1 first name 1 1 2.2 middle name - - (optional but unlimted) 2.3 last name 1 1 3 age - 1 (optional) </code></pre><p>на данный момент это целая таблица, и отступ для номера sequence (<code>seq</code>) достигается путем вставки дополнительных ячеек таблицы, чтобы как бы поднять все вправо.</p><p>задача, которую я имею, состоит в том, чтобы выяснить, как эффективно отображать эту информацию.</p><p><strong> прежде всего это табличные данные? </strong>я бы сказал нет, так как иерархия важна, а «столбцы» - это просто атрибуты элемента в каждой «строке».</p><p><strong> если это не таблица, что это такое и как это будет сделано? </strong>я бы лично сказал, что это набор вложенных списков <code>ul</code> - порядковый номер является необязательным и не всегда является числом. если это набор списков, это будет правильно делать отступы для списков, но каков наилучший способ представления коротких атрибутов?</p><p><strong> если это таблица, каков наилучший способ представить семантическое существование иерархии в таблице? </strong></p>

<p>я хотел бы представить его с помощью таблицы и путем добавления <a href="http://www.w3.org/tr/2011/wd-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes">пользовательских атрибутов данных</a> к тегам <code>td</code>:</p><pre><code><table id="mytable" class="table"> <tr> <td data-indent="0">1</td> <td data-indent="0">test</td> <td data-indent="0">test 1</td> </tr> <tr> <td data-indent="1">1.1</td> <td data-indent="1">another</td> <td data-indent="0">test 1.1</td> </tr> <tr> <td data-indent="2">1.1.1</td> <td data-indent="3">another</td> <td data-indent="0">test 1.1.1</td> </tr> <tr> <td data-indent="2">1.1.2</td> <td data-indent="3">another one</td> <td data-indent="0">another test 1.1.2</td> </tr> <tr> <td data-indent="0">2</td> <td data-indent="0">test</td> <td data-indent="0">test 2</td> </tr> </table> </code></pre><p>затем с помощью jquery установите заполнение каждого значения ячейки в вашей таблице:</p><pre><code>$("td") .css("padding-left", function (index) { return 10  parseint($(this).data("indent")) + "px"; }); </code></pre><p>посмотрите, как это работает на <a href="http://jsfiddle.net/2eqrl/3/">jsfiddle</a> .</p>

<p>я думаю, что есть два разумных способа, как представить это в html:</p><ul> <li>используйте <code>table</code> и сделайте связь/иерархию явными с естественным языком</li> <li>используйте элементы секционирования (соответственно заголовки, если вы используете html 4.01)</li> </ul><h3><code>table</code> с колонкой, объясняющей иерархию</h3><p>если нет разметки для определения этого отношения, вы должны использовать текст. если визуальное представление однозначно, вы можете визуально скрыть этот текст, чтобы он был доступен только для пользователей программы чтения с экрана/текстового браузера.</p><p>в вашем случае вы можете добавить столбец, который объясняет отношения строк, которые являются «подпунктами»:</p><pre><code><table> <tr> <th>seq</th> <th>relation</th> <!-- or some clever better label --> <th>item name</th> <th>min</th> <th>max</th> </tr> <!-- … --> <tr id="2"> <td>2</td> <td></td> <!-- "parent", "root", "container", empty -- whatever makes sense for your case --> <td>name</td> <td>1</td> <td>1</td> </tr> <tr id="2.1"> <td>2.1</td> <td>child of <a href="#2">name</a></td> <td>first name</td> <td>1</td> <td>1</td> </tr> </table> </code></pre><p>каждая строка может получить <code>id</code> (со значением seq или item name), так что эта строка может быть связана {обратите внимание, что значения <code>id</code>, начинающиеся с цифры, не разрешены в html 4.01; вы можете использовать что-то вроде <code>id="seq-2.1"</code> там}. если элемент является дочерним по отношению к другому элементу, вы можете указать ссылку на строку родительского элемента. </p><p>таким образом, вы проясните для людей, и машины все еще видят, что эти строки связаны, хотя конкретная семантика этого отношения не читается машиной. вы можете использовать тип ссылки (<code>rel</code> value) здесь, если вы хотите ясно понять значение отношения. в html 4.01 вы можете создать значение самостоятельно, в html5 оно должно быть <a href="http://www.w3.org/tr/html5/links.html#other-link-types">зарегистрировано</a> первым.</p><h2>элементы секционирования/заголовки</h2><p>вместо использования <code>table</code> вы можете использовать контуры html. {в следующем примере используются <a href="http://www.w3.org/tr/html5/sections.html#headings-and-sections">элементы секционирования html5</a> . если вы используете html 4.01, просто замените элементы секционирования на <code>div</code> (или вообще без элемента) и используйте только заголовки.}</p><p>каждый раздел (введенный заголовком) представляет элемент. схема заголовков (соответственно вложенность элементов секционирования) представляет иерархию ваших элементов.</p><p>вот пример, чтобы увидеть всю структуру:</p><pre><code> <article> <h1><!-- heading for the whole data --></h1> <section class="item" id="1"> <h2>identifier</h2> </section> <section class="item" id="2"> <h2>name</h2> <section class="item" id="2.1"> <h3>first name</h3> </section> <section class="item" id="2.2"> <h3>middle name</h3> </section> <section class="item" id="2.3"> <h3>last name</h3> </section> </section> <section class="item" id="3"> <h2>age</h2> </section> </article> </code></pre><p>каждая <code>section</code> может содержать <code>dl</code> для свойств:</p><pre><code><section class="item" id="3"> <h2>age</h2> <dl> <dt>min</dt> <dd>1</dd> <dt>max</dt> <dd>1</dd> </dl> </section> </code></pre><p>в зависимости от фактического значения вашего контента, вы можете использовать элемент <a href="http://www.w3.org/tr/html5/text-level-semantics.html#the-code-element"><code>code</code></a> для имен элементов (например, если он описывает элементы языка разметки) и/или элемент <a href="http://www.w3.org/tr/html5/text-level-semantics.html#the-dfn-element"><code>dfn</code></a> , если следующее содержание является определением этого элемента.</p>

<p>я предлагаю использовать вложенные упорядоченные списки для сохранения вашей иерархической структуры, а затем описательные списки для представления «столбцов» для каждой строки.</p><p>например, список описания для первой строки может выглядеть примерно так:</p><pre><code><dl> <dt>item name</dt> <dd>identifier</dd> <dt>min</dt> <dd>1</dd> <dt>max</dt> <dd>1</dd> <dt>notes</dt> <dd>(required)</dd> </dl> </code></pre><p>вам придется использовать css, чтобы скрыть термины описания (так как вы не хотите, чтобы они отображались в каждой строке) и настроить макет так, чтобы он больше походил на таблицу.</p><p>недостатком этого формата является то, что вы собираетесь дублировать заголовки столбцов в каждой строке. но семантически я думаю, что это имеет смысл, и это также должно сделать контент более значимым для программы чтения с экрана.</p><p>я сделал первую попытку css для этого, чтобы вы могли понять, как это может работать. это, вероятно, не очень хорошо сделано, но по крайней мере это даст вам кое-что для начала.</p><p> <a href="http://codepen.io/anon/pen/morfj">codepen link</a> </p>

<p><strong>update: я добавил использование идентификаторов и атрибута «headers» для семантической разметки иерархии.</strong></p><p>это окончательно табличные данные (вы должны толкнуть определение «список», чтобы оправдать использование ul или dl здесь!).</p><p>я думаю, что хорошим подходом было бы использование разных tbodys для группировки этих связанных строк (что-то вроде этого он использовал здесь <a href="http://www.w3.org/tr/2012/wd-html5-20120329/the-table-element.html#the-table-element">http://www.w3.org/tr/2012/wd-html5-20120329/the-table-element .html # the-table-element</a> see "таблица, используемая для разметки головоломки судоку")</p><pre><code><table> <thead> <tr> <th id="seq">seq</th> <th>item name</th> <th>min</th> <th>max</th> </tr> </thead> <tbody> <tr> <th id="s1" headers="seq">1</th> <td>identifier</td> <td>1</td> <td>1</td> </tr> </tbody> <tbody> <tr> <th id="s2" headers="seq">2</th> <td>name</td> <td>1</td> <td>1</td> </tr> <tr class="sub"> <th id="s2\_1" headers="seq s2">2.1</th> <td>first name</td> <td>1</td> <td>1</td> </tr> <tr class="sub"> <th id="s2\_2" headers="seq s2">2.2</th> <td>middle name</td> <td>-</td> <td>-</td> </tr> <tr class="sub"> <th id="s2\_3" headers="seq s2">2.3</th> <td>last name</td> <td>1</td> <td>1</td> </tr> <tr class="sub sub"> <th id="s2\_3\_1" headers="seq s2 s2\_3">2.3.1</th> <td>last name</td> <td>1</td> <td>1</td> </tr> <tr class="sub sub"> <th id="s2\_3\_2" headers="seq s2 s2\_3">2.3.2</th> <td>last name</td> <td>1</td> <td>1</td> </tr> </tbody> <tbody> <tr> <th id="s3" headers="seq">3</th> <td>age</td> <td>-</td> <td>1</td> </tr> </tbody> </table> </code></pre><p>тогда вы можете использовать что-то вроде этого:</p><pre><code>table { border-collapse: collapse; } tbody { border-bottom:1px solid #000; } tbody .sub td { padding-left: 10px; } </code></pre><p>на самом деле, я думаю, что вы можете использовать только tbody, чтобы сгруппировать строки и оставить отдельные строки в покое. </p><pre><code><tr> <td>1</td> <td>identifier</td> <td>1</td> <td>1</td> </tr> <tbody> <tr> <td>2</td> <td>name</td> <td>1</td> <td>1</td> </tr> <tr class="sub"> <td>2.1</td> <td>first name</td> <td>1</td> <td>1</td> </tr> ... </tbody> <tr> <td>3</td> <td>age</td> <td>-</td> <td>1</td> </tr> </code></pre>

<p>я думаю, что вы должны использовать стол. правда, иерархия важнее, но ее также можно отобразить, записав вручную первый столбец. но атрибуты min, max и имя элемента не могут быть отображены в списке так же легко, как в таблице. мое мнение: используйте таблицу и предоставьте колонку seq вручную!</p>

<p>почему не оба? сетка дерева - это хороший способ представления табличных данных, которые также соответствуют иерархии.</p><p>это <a href="http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html">один из таких примеров</a> .</p><p>однако, используя extjs в двух очень больших проектах, я лично рекомендую держаться от него подальше, если вы собираетесь создавать большое приложение. хотя это может быть хорошо для одноразовой сетки, я лично считаю, что она плохо реализована и может стать более громоздкой по мере увеличения размера проекта. тем не менее, он очень многофункциональный, поэтому панель <a href="http://www.sencha.com/products/extjs/examples/">примеры</a> может дать вам больше идей по сеткам (таблицам), которые могут вам помочь.</p><p>имейте в виду, что вы всегда должны задавать себе вопрос: «на какие вопросы пытаются ответить мои пользователи?» затем спросите себя: «какие графические устройства дают самый ясный и простой способ ответить на этот вопрос?»</p><p>одной книгой, которая действительно помогла мне с этими вопросами, была <a href="https://rads.stackoverflow.com/amzn/click/com/0596100167">книга по дизайну приборной панели</a> . несмотря на то, что вы, возможно, не строите панель мониторинга, у нее есть много методов и теорий ux, которые упростили мне выбор подходящего элемента ui (относительно данных).</p><p>надеюсь, это поможет...</p>