Css красивые таблицы: Готовые CSS стили для таблиц

Синтаксис:

 
 td{
    выравнивание текста: <влево | центр| справа>;
}
 

Пример: Давайте выровняем тексты в таблице по центру после того, как мы добавили отступы и границы.

Код CSS:

 
 тд{
    выравнивание текста: по центру;
}
 

Приведенный выше центр кода CSS выравнивает текст во всех ячейках.

Код CSS для выравнивания по левому и правому краю:

 
 td{
    выравнивание текста: по левому краю;
}
 

 
 тд{
    выравнивание текста: вправо;
}
 

Вывод для выравнивания по центру (это будет аналогично для выравнивания по левому и правому краям):

Цвет фона таблицы CSS

Теперь, когда у нас есть достаточно хорошо выглядящая таблица после добавления свойств рамки, отступов и выравнивания текста, мы можем добавить немного цвета фона, чтобы улучшить читаемость. Создание таблицы в полоску «зебра» обычно является хорошей привычкой.

Синтаксис:

 
 тело {
фон: ;
}
 

Примечание : название цвета обычно указывается в шестнадцатеричном коде, поскольку его легко найти в цветовых палитрах. Для обычных цветов, таких как красный, синий или белый, мы можем напрямую использовать названия, такие как красный, синий или белый.

Пример: Давайте раскрасим стол в полоску зебры. Для этого нам нужно указать цвет нечетных и четных строк отдельно. Давайте посмотрим на код CSS ниже, чтобы понять, как это сделать.

Код CSS:

 
 tbody tr:nth-child(нечетный) {
     фон: #202932;
}
tbody tr:nth-child(even) {
     фон: #2c3844;
}
 

Приведенный выше код CSS окрашивает нечетные строки, начиная с первой строки в теле таблицы (заголовок здесь исключен), одним цветом, а четные строки — другим контрастным цветом.

Выход:

Но, как мы видим, черный цвет шрифта не делает текст очень читабельным, не так ли?

Для этого у нас есть свойство цвета таблицы CSS.

Цвет таблицы CSS

Это свойство используется для настройки цвета шрифта содержимого таблицы (мы можем сделать это для всей таблицы, применив его к тегу

 
 <элемент таблицы HTML>{
ширина: <измерение>;
}

<Элемент HTML-таблицы>{
высота: <измерение>;
}
 

Пример: Давайте попробуем изменить высоту строки заголовка в нашей таблице на 80 пикселей, а высоту элементов данных таблицы на 50 пикселей. Сделаем так же всю ширину таблицы 50% от всего окна просмотра.

Код CSS:

 
 {
    высота: 80 пикселей;
}
 
тд {
    высота: 50 пикселей;
}
 
стол {
    ширина: 50%;
}
 

Приведенный выше код CSS изменяет высоту элемента заголовка таблицы

Выход:

Пустая ячейка таблицы CSS

Это свойство позволяет удалить границу пустых ячеек. У значения есть два свойства: показать и скрыть. Значение по умолчанию — показать. Мы применяем это свойство к HTML-элементу

ВАЖНО: Это свойство не будет иметь никакого эффекта при использовании вместе с border-collapse: свернуть.

Синтаксис:

 
 таблица{
    пустые ячейки: <скрыть | показать>;
}
 

Пример: Рассмотрим следующую таблицу:

Последние две ячейки в третьем столбце пусты. И границы тоже видны. Теперь давайте применим свойство empty-cells: hide.

Код CSS:

 
 стол {
    пустые ячейки: скрыть;
}
 

Приведенный выше код CSS применяет свойство empty-cells: hide к элементу

Вывод:

Таблица CSS Table-Tayout

Это свойство определяет способ отображения макета таблицы в браузере . У этого свойства есть два значения: автоматическое и фиксированное. Значение по умолчанию — авто. Мы применяем это свойство к HTML-элементу

Примечание : Макет — это способ расположения всех визуальных элементов на веб-сайте.

• авто: Таблица изменит ширину столбца, чтобы уместить все содержимое в этом конкретном столбце. Таким образом, перед установкой ширины столбца необходимо проверить все ячейки в столбце. По этой причине рендеринг таблицы с table-layout: auto происходит медленно.

• исправлено: Ширина столбца определяется на основе ширины таблицы или указанной ширины столбца. Ширина столбца определяется на основе ширины элемента первой строки этого столбца. Поскольку ширину всего столбца можно определить, взглянув только на первую строку, рендеринг выполняется быстрее по сравнению с автоматическим режимом.

Синтаксис:

 
 <таблица>{
    макет таблицы: <авто | исправлено>;
}
 

Пример: Сделаем таблицу с тремя столбцами и тремя строками. Ширина первого столбца первой строки установлена ​​нами равной 400 px (мы увидим, что при изменении макета таблицы с автоматического на фиксированный этот столбец остается неизменным). А остальные записи не имеют заданной ширины. Вся таблица имеет ширину 100%.

HTML-код:

 
 <тело>
    <таблица>
        

Приведенный выше HTML-код создает необходимую таблицу. Теперь давайте добавим к нему немного CSS. Код CSS:

 
 заголовок {
    размер шрифта: 1.8rem;
}
стол {
    ширина: 100%;
    размер шрифта: 1.2rem;
    поле: 20px авто;
}
 
tbody tr:nth-child(нечетный) {
    фон: #202932;
}
 
tbody tr:nth-child(even) {
    фон: #2c3844;
}
 
тело {
    белый цвет;
}
 
стол, тд, й {
    граница коллапса: коллапс;
}
 
й, тд {
    отступ: 10 пикселей;
    граница: 1px сплошная #777;
    выравнивание текста: по центру;
}
 
.firstRowFirstColumn {
    ширина: 400 пикселей;
}
 

Приведенный выше код CSS устанавливает ширину первого столбца первой строки как 400 пикселей. Остальная часть CSS просто добавляет отступы, границы, регулирует размер шрифта и т. д., как мы видели в предыдущих разделах этой статьи.

Выход: макет таблицы: авто

Теперь добавим свойство table-layout: fixed и посмотрим, как визуально изменится таблица.

Код CSS:

 
 <таблица>{
    макет таблицы: фиксированный;
}
 

Приведенный выше код CSS устанавливает для свойства table-layout фиксированное значение.

Выход: макет таблицы: фиксированный

Как мы видим, ширина первого столбца остается фиксированной и составляет 400 пикселей независимо от значения table-layout. Это потому, что мы явно упомянули об этом в нашем коде CSS. В то время как другие столбцы настроены так, чтобы иметь одинаковую ширину.

Советы по стилю таблиц

• Выравнивание текста внутри ячеек
  • Горизонтальное выравнивание содержимого ячейки: текст можно выровнять по горизонтали (т. е. слева, по центру или справа от ячейки) с помощью свойства text-align. У этого свойства есть три значения: слева, по центру и справа. Оставлено значение по умолчанию.

Вертикальное выравнивание содержимого ячейки: Текст можно выровнять по вертикали (т. е. по нижнему, среднему или верхнему краю ячейки) с помощью свойства вертикального выравнивания. У этого свойства есть три значения: нижнее, среднее и верхнее. Значение по умолчанию — среднее.

На приведенном выше изображении значение стороны заголовка установлено наверх.

На изображении выше показано, когда значение стороны заголовка установлено внизу.

• Создание таблицы с полосами зебры: Таблица с полосами зебры означает, что чередующиеся строки имеют контрастные цвета, чтобы они отличались друг от друга. Создание таблицы с полосами зебры значительно повышает удобочитаемость, поскольку соседние строки можно легко различить. Это делается путем установки контрастного цвета фона для нечетных и четных строк с помощью свойства фона HTML-элемента

Код CSS:

 
 tbody tr:nth-child(нечетный) {
    фон: ;
}

tbody tr:nth-child(even) {
    фон: ;
}
 

Пример: Давайте создадим таблицу с большим количеством столбцов и сделаем ее отзывчивой, используя относительные единицы и свойство overflow-x.

Код HTML для создания таблицы:

 
 <дел>
    <таблица>
    

 

Содержимое таблицы записывается внутри элемента

Код CSS:

 
 таблица {
    ширина: 100%;
}
 

Приведенный выше код CSS делает ширину таблицы адаптивной и устанавливает ее равной 100% ширины окна просмотра.

Вывод:

Когда таблица не помещается в окно, появляется горизонтальная полоса прокрутки.

Когда использовать таблицы?

Таблицы используются, когда нам нужно представить некоторые данные в табличной форме. Сценарии, такие как сведения об учениках в классе, сведения о сотрудниках в офисе, цены, календари и многие другие подобные данные, представлены в формате таблицы.

Практические примеры использования таблиц:

Образец 1:

Образец 2:

Когда не следует использовать таблицы?

Никогда не используйте таблицы при создании макета веб-страницы. Казалось бы, это может показаться хорошим, но это что-то очень нетрадиционное. Сами табличные элементы имеют некоторую семантику, и использовать их в другом месте явно неправильно с точки зрения разработчика.

У вас могут возникнуть вопросы, например, будет ли это видно зрителю? Ну, ответ на это НЕТ. Но поток вашей веб-страницы будет совершенно другим. Вы можете получить четкое представление об искаженном потоке, когда используете программу чтения страниц. Он будет рассматривать весь макет веб-страницы, разработанный с элементами таблицы, как таблицу. Часто он может считывать начало таблицы, что будет звучать совершенно неправильно!

Устаревшие атрибуты

Устаревшие атрибуты — это атрибуты, которые больше не используются. Это не значит, что вы не можете их использовать! Вы можете использовать их в своем коде, но есть и более новые способы сделать то же самое! При использовании STRICT DOCTYPE эти устаревшие атрибуты могут быть объявлены недействительными.

ПРИМЕЧАНИЕ. Просто чтобы устранить путаницу между свойствами и атрибутами, мы используем атрибуты следующим образом:

 
 <таблица bgcolor="F57A0A">
 

Но мы используем свойства в нашем CSS или внутри тегов