Древообразная таблица с помощью HTML и CSS

Автор: Расс Уикли
Перевод: Всеволод Козлов

Наша цель: с помощью HTML и CSS создать древообразную таблицу.

Что мы получим в итоге:

Древообразная таблица с помощью HTML и CSS

В полной версии статьи Вы увидите HTML и CSS-фрагменты кодов, с помощью которых мы реализовали на практике древообразную таблицу, пример которой Вы увидели выше на рисунке!

Фрагмент HTML-кода

<table summary="folder contents for fly types">
<thead>
<tr>
<th class="name">Name</th>
<th class="location">Location</th>
<th class="color">Color</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">House</th>
</tr>
<tr>
<th class="start">Carrion Fly</th>
<td>Worldwide</td>
<td>gray</td>
</tr>
<tr>
<th class="start">Office Fly</th>
<td>California, Bay Area</td>
<td>white</td>
</tr>
<tr>
<th class="end">Common House Fly</th>
<td></td>
<td>brown</td>
</tr>
<tr>
<th colspan="3">Horse</th>
</tr>
<tr>
<th class="start">Horn Fly</th>
<td>Kansas</td>
<td>red</td>
</tr>
<tr>
<th class="start">Face Fly</th>
<td></td>
<td>green</td>
</tr>
<tr class="end">
<th class="end">Stable Fly</th>
<td></td>
<td>black</td>
</tr>
</tbody>
</table>

Фрагмент CSS-кода

body
{
font-family: arial, helvetica, sans-serif;
}
table
{
border-collapse: collapse;
margin-bottom: 3em;
font-size: 70%;
line-height: 1.1;
}
tr:hover, td.start:hover, td.end:hover
{
background: #FF9;
}
th, td
{
padding: .3em .5em;
}
th
{
font-weight: normal;
text-align: left;
background: url(arrow.gif) no-repeat 2px 50%;
padding-left: 15px;
}
th.name { width: 12em; }
th.location { width: 12em; }
th.color { width: 10em; }
thead th
{
background: #c6ceda;
border-color: #fff #fff #888 #fff;
border-style: solid;
border-width: 1px 1px 2px 1px;
padding-left: .5em;
}
tbody th.start
{
background: url(dots.gif) 18px 54% no-repeat;
padding-left: 26px;
}
tbody th.end
{
background: url(dots2.gif) 18px 54% no-repeat;
padding-left: 26px;
}

Очень надеюсь, что данная техника Вам пригодится!

Оригинал статьи: Replicating a Tree table

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*