Некоторые данные лучше всего отображать в виде таблицы, но это не значит, что они должны выглядеть скучно. Таблица может и должна быть оформлена так, чтобы она дополняла контент и дополняла общий вид сайта. Хотя стилизация столов может показаться пугающей, если разбить их на основные элементы, их дизайн не так уж и сложен.
Понимание всех частей
Если вы посмотрите на основные части большинства таблиц, их можно разбить на следующие четыре части:
- Таблица <table> — это контейнер, содержащий все содержимое.
- Заголовки <th> — это заголовки столбцов; если их не стилизовать, они будут выделены жирным шрифтом.
- Строки <tr> — это горизонтальные контейнеры внутри таблицы. Когда строки таблицы окрашены — часто чередующимися цветами — это теги tr.
- Столбцы <td> — тег столбца обозначает данные таблицы, и некоторых это может сбить с толку.
Когда вы смотрите на теги таблицы, вы увидите строку <tr>, за которой следует содержимое каждой ячейки <td>. Каждая из этих ячеек является частью другого столбца. Итак, типичный ряд выглядит так:
<tr>
<td>Строка 1, столбец 1</td>
<td>Строка 1, столбец 2</td>
</tr>
Создание образа
Тег таблицы
Вы можете создать желаемый вид, используя CSS вместо HTML. Начиная с самой таблицы, присвойте ей идентификатор — #YourTable. Здесь вы можете установить стили шрифта, а также общую ширину таблицы. Например,
#ВашСтол {
семейство шрифтов: Trebuchet MS, Arial, Helvetica, без засечек;
ширина:90%;
граница коллапса: коллапс;
цвет:#000000;
}
Свойство border-collapse определяет, будут ли границы свернуты в одну границу или разделены. Вообще говоря, лучше всего свернуть их.
Табличные данные и заголовки
Затем настройте стиль для размера шрифта и любой границы или заполнения ячеек для каждой строки.
# YourTable td, # YourTable th {
размер шрифта: 12px;
граница: 1px сплошная #ff7f00;
отступы: 3px 6px 2px 6px;
}
Цвета строк
# Ваша таблица tr.alternate td {
цвет фона:#ffaa56;
}
Заголовки
Выделите заголовок или строку заголовка, изменив размер шрифта или цвет строки. Используйте любую комбинацию, которая делает очевидным для пользователя, что текст идентифицирует то, что находится внутри столбцов.
#ВашСтол {
размер шрифта: 16 пикселей;
выравнивание текста: по левому краю;
заполнение сверху: 7px;
заполнение снизу: 6px;
цвет фона:#ff7f00;
}
Полный CSS и HTML
Вот как выглядит ваш стиль, когда все собрано вместе.
#ВашСтол {
семейство шрифтов: Trebuchet MS, Arial, Helvetica, без засечек;
ширина:90%;
граница коллапса: коллапс;
цвет:#000000;
}
#YourTable тд, #YourTable й {
размер шрифта: 12px;
граница: 1px сплошная #ff7f00;
отступы: 3px 6px 2px 6px;
}
#ВашСтол {
размер шрифта: 16 пикселей;
выравнивание текста: по левому краю;
заполнение сверху: 7px;
заполнение снизу: 6px;
цвет фона:#ff7f00;
}
#YourTable тр. альтернативный тд {
цвет фона:#ffaa56;
}
<идентификатор таблицы=»ВашаТаблица»>
<tr>
<th>Заголовок 1</th>
<th> Второй заголовок</th>
<th> Заголовок третий</th>
</tr>
<tr>
<td>Строка 1, ячейка 1</td>
<td> Строка 1, ячейка 2</td>
<td> Строка 1, ячейка 3</td>
</tr>
<tr class=»альтернативный»>
<td> Строка 2, ячейка 1</td>
<td> Строка 2, ячейка 2</td>
<td> Строка 2, ячейка 3</td>
</tr>
<tr>
<td> Строка 3, ячейка 1</td>
<td> Строка 3, ячейка 2</td>
<td> Строка 3, ячейка 3</td>
</tr>
<tr class=»альтернативный»>
<td> Строка 4, ячейка 1</td>
<td> Строка 4, ячейка 2</td>
<td> Строка 4, ячейка 3</td>
</tr>
</таблица>
Особые обстоятельства
Самый простой и распространенный способ украсить таблицу — чередовать цвета строк, поскольку это обычно упрощает чтение содержимого. Однако есть и другие способы создания стильных столов. Некоторые другие распространенные способы улучшить внешний вид таблицы включают в себя:
Фоновая картинка
Фоновые изображения могут быть добавлены для создания водяного знака или служить фоном для всей таблицы. Изображение прикрепляется к таблице с помощью атрибута background-image . Однако помните, что если также используется фоновый цвет, он перекроет или заблокирует отображение изображения.
#ВашСтол {
background: url(«image.jpg») без повторов;
}
Скругленные углы
Это все более популярный способ украсить стол. Вы можете скруглить один или все углы настолько, насколько это необходимо. Чтобы закруглить два верхних угла:
#YourTable th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
радиус границы: 6px 0 0 0;
}
th:последний ребенок {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
радиус границы: 0 6px 0 0;
}
th: единственный ребенок {
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
радиус границы: 6px 6px 0 0;
}
Коробчатая тень
Вы можете придать таблице тень, чтобы казалось, что она отрывается от страницы. Это достигается с помощью атрибута box-shadow . Первые два числа, используемые для стиля, управляют вертикальным и горизонтальным положением тени. Они обязательны, но все остальные атрибуты необязательны. Третье значение управляет степенью размытия тени, а четвертое значение устанавливает размер тени. Вы также можете выбрать цвет тени.
Чтобы разместить тень на вашем столе с серой тенью, используйте этот код:
#ВашСтол {
box-shadow: 5px 5px 4px 1px #ccc;
}
Помните о цели
Создание хорошо продуманного и функционального стола выходит далеко за рамки его стиля. Когда пользователи приходят на ваш сайт за информацией, контент — это то, что их интересует. Первое правило при разработке таблицы качества — убедиться, что информация изложена в логической и легкой для понимания форме. Использование «умного» дизайна не будет иметь большого значения для пользователей, если они не смогут найти, понять или интерпретировать данные, отображаемые в вашей таблице.