| Kosten | Среда, 06 Июня 2018, 23:02 | Сообщение 1 |
| Вашему вниманию адаптивная под все мобильные аппараты идет таблица, которая создана на чистом html и css. Он идет в простом формате, где все отлично отображается, плюс для пользователя и гостей отлично будет смотреться в плане разнообразия и вероятности в том, что корректно выводит знаки. Все по стандарту, где общая ширина таблицы, безусловно задана в пикселях, где идет стилистика для того, чтоб ее отредактировать под свой дизайн. Один из моих любимых мотивов в веб дизайне - это то, как таблицы часто не оптимизируются для работы без использования рабочего стола.
Если вы новичок в создании гибких таблиц, я попытался подробно описать каждый шаг. Если вы опытны и даже используете другие методы для гибких таблиц, то здесь все понятно расставлено по классу, которые отвечают за свои элементы. Это простая таблица, что не охватывающие ячейки и заголовки строк, то к концу этого поста у вас будет достаточно информации.
И так, чтобы разобраться с ними самостоятельно под заметками о доступности из моего сообщения, утверждая, что все еще нормально использовать таблицы. Это некоторые базовые стили, которые я использую, чтобы найти помощь с читабельностью. Они носят общий характер, не применяются ко всем случаям и сообщаются сочетанием опыта, тестирования пользователей и мнения.
На этом этапе вы должны заметить, что заголовки столбцов просто сложены в верхней части таблицы, не предлагая ничего полезного никому. Вы также можете не решаться удалить их, потому что вы все еще хотите, чтобы читатели экрана могли разобраться в таблице.
В реальном размере:
Это уже с мобильного гаджета:
HTML
Код <table>
<caption>ZorNet.Ru: Создание сайта uCoz</caption>
<thead>
<tr>
<th scope="col">ZORNET.RU</th>
<th scope="col">СКРИПТЫ</th>
<th scope="col">ШАБЛОНЫ</th>
<th scope="col">ДИЗАЙН</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Надпись</td>
<td data-label="Due Date">Здесь дата</td>
<td data-label="Amount">$4,564</td>
<td data-label="Period">11/12/1987 - 12/25/1974</td>
</tr>
<tr>
<td scope="row" data-label="Account">Запрос под номером</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$5,776</td>
<td data-label="Period">11/28/1865 - 12/31/1963</td>
</tr>
<tr>
<td scope="row" data-label="Account">Скрипты сайта</td>
<td data-label="Due Date">Дата</td>
<td data-label="Amount">Цена</td>
<td data-label="Period">Дата плюс с выхода</td>
</tr>
<tr>
<td scope="row" data-label="Acount">Запрос под номером 3</td>
<td data-label="Due Date">Здесь дата</td>
<td data-label="Amount">$745</td>
<td data-label="Period">12/25/1983 - год-месяц</td>
</tr>
</tbody>
</table>
CSS
Код table {
border: 1px solid #c7c2c2;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f9f4f4;
border: 1px solid #d8d2d2;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #d6d0d0;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #d6d0d0;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
Демонстрация
Используя разные оттенки фона, вы можете избежать хлопот замены цветов по мере изменения тем вашего сайта. То же самое с заголовками столбцов, где обязательно сохраняйте свои коэффициенты цветового контраста.
Эта коллекция HTML и CSS, что будет работать и выводить корректно на всех браузерах Более сложные таблицы, большие таблицы, таблицы с различными типами контента.
Надеюсь, здесь достаточно информации и контекста, из которых вы можете создать собственное решение, соответствующее вашим или вашим потребностям проекта.
| | Страна: (RU) |
| |
