Таблица без тега table
Когда-то дизайн сайтов делали на таблицах.
Сегодня распространена противоположная крайность - даже для отображения табличных данных используют div'ы, но не тег <table>.
Что ж, так сделать можно, вот типичный изврат, таблица без тега <table>:
таблица без тега table - что вы выиграли?
Её код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок окна</title>
</head>
<body>
<style>
div {
margin: 5px;
padding: 5px;
border: 1px dotted white;
}
.table {
display: table;
padding: 0;
background-color: #CCCCCC;
border-color: #333333;
border-spacing: 5px;
text-align: center;
}
.row {
display: table-row;
background-color: #EEEEEE;
border-color: #111111;
}
.cell {
background-color: #DDDDDD;
border-color: #666666;
display: table-cell;
}
</style>
<div class="table">
<div class="row">
<div class="cell">Город</div>
<div class="cell">Посещения</div>
<div class="cell">Страниц</div>
<div class="cell">Время</div>
</div>
<div class="row">
<div class="cell">СПБ</div>
<div class="cell">500</div>
<div class="cell">6</div>
<div class="cell">00:08:05</div>
</div>
<div class="row">
<div class="cell">Нск</div>
<div class="cell">300</div>
<div class="cell">4</div>
<div class="cell">00:06:05</div>
</div>
</div>
</body>
</html>
Что удивительно, меня порой детки упрекают, что у меня тут подписи к картинкам делаются "вручную", а не через <figcaption>, да ещё и <main> не показан... что фигкэпшэны и мэйны в новом стандарте стали результатом именно моей и многих коллег моего поколения деятельности, им невдомёк :)
P.S. Достичь имитации свойств colspan, rowspan, управляющих объединением ячеек, наверное, проще всего вложением наших псевдотабличных элементов, вот небольшой пример:
<style>
.table1 {
display: table;
margin: 0 auto;
width: 200px;
height: 100px;
}
.row1 {
display: table-row;
}
.cell1 {
display: table-cell;
width:50%;
padding: 5px;
border: 1px dotted #000;
border-collapse: collapse;
}
</style>
<div class="table1">
<div class="row1">
<div class="table1">
<div class="cell1">One</div>
<div class="cell1">Two</div>
</div>
<div class="cell1">Three</div>
</div>
<div class="row1">
<div class="cell1">Four</div>
<div class="cell1">Five</div>
</div>
</div>
Ну или делать больше классов с указанием ширины и высоты объединённых ячеек в процентах для каждого случая объединения.
17.06.2019, 18:37 [2113 просмотров]