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

Прежде чем мы начнем, давайте рассмотрим общее практическое правило оформления таблиц:

• Столы любят пространство . Тщательно устанавливайте ширину таблиц в соответствии с содержимым. Если вы не знаете идеальную ширину, просто установите ширина таблицы до 100% . Таблицы выглядят лучше, когда они имеют «избыточную ширину», а когда дело доходит до таблиц, слишком большая ширина определенно лучше, чем слишком маленькая.
• Ячейкам требуется дополнение . Конечно, каждая ячейка таблицы связана друг с другом. Но это не значит, что мы должны подтягивать их слишком близко, верно? Определите некоторое пространство между ячейками, переполненные ячейки таблицы намного труднее читать.
• Относитесь к таблицам так же, как к содержимому . Таблицы читаются так же, как мы читаем текст, за исключением того, что это сложнее и занимает больше времени, чтобы прочитать таблицу. Так что будьте осторожны с количеством контраста, который вы даете своей таблице. Используйте мягкие цвета — это легче для глаз. Не относитесь к своему столу как к графическому украшению. Убедитесь, что стиль, который вы к нему применяете, делает контент более читабельным, а не наоборот.

Теперь, когда мы все настроили, давайте приступим, не так ли?

1.

Горизонтальные таблицы — это таблицы, которые читаются скорее горизонтально, чем вертикально. Каждая сущность представлена ​​строкой. Вы можете стилизовать эти типы таблиц в минималистском стиле. Просто установите достаточно заполнения для ячеек ( td и th ) и поместите 2-пиксельную границу под заголовком.

Поскольку горизонтальные таблицы должны сканироваться по горизонтали , очистка границ таблицы повышает ее эффективность. Однако отсутствие границ затрудняет чтение этой таблицы, если в ней слишком много строк. Чтобы противостоять этому, мы просто добавляем границу в 1 пиксель под всеми тд Элементы:

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

• Важно! Тщательно настройте типографику и отступы между ячейками
• Профи Очень простой стиль, подходит для простых таблиц
• Минусы tr:hover правила не работают в IE 6, таблица может сбивать с толку, если в ней слишком много столбцов
• Поэкспериментируйте с Цветовая схема, типографика, tr:hover эффекты

2. Вертикальный минималистский

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

Добавьте большие границы слева и границы справа того же цвета, что и фон. Вы можете использовать прозрачные рамки, если хотите, но IE 6 все портит. Так как эту таблицу предполагается читать сверху вниз (по вертикали), добавление tr:hover не помогает, а вместо этого затрудняет чтение данных. Возможно, существует решение на основе Javascript, которое позволяет выделить весь столбец, когда 9Происходит событие 0193 mouseover , но это выходит за рамки данной статьи.

• Важно! Тщательно настройте типографику и отступы между ячейками, не добавляйте tr:hover эффект
• Плюсы Легко оформляется, подходит для простых столов
• Минусы Нельзя использовать, если фон не является сплошным блоком цвета, подходит только для некоторых столов
• Играть с Цветовая схема и типографика

3. Коробка

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

Комедия	Приключения	Дети
ВАЛЛ-И 0236 Плохие парни	Мадагаскар
Спартанец	ВК	Крепкий орешек	Нахождение NEMO
Dr. Dolittle	The Mummy	300	Жизнь Bug’s

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

• Важно! Выберите цветовую схему, соответствующую вашему сайту
• Pros Простота оформления, гибкость для больших и маленьких столов
• Минусы Выбрать идеальную цветовую схему может быть сложно
• Поиграйте с Цвета и границы, используйте пунктир или пунктир для создания симпатичных эффектов, типографики, значков

4. Горизонтальная зебра

Таблицы-зебра довольно привлекательны и удобны в использовании. Чередующийся цвет фона может служить визуальной подсказкой для людей при сканировании таблицы. Чтобы оформить стол как зебру, просто поставьте class="odd" для каждого нечетного упорядоченного тега tr и определите для него стиль (например, используя if ($count % 2), затем четный класс else нечетный класс в PHP).

 ...
  
           <тд>...
           ...
        
        
           <тд>...
           ...
        
    ... 

• Важно! Не делайте цвета зебры слишком контрастными, вы можете ослепить своих пользователей
• Профи Шаблон зебры может помочь людям сканировать стол
• Минусы Добавление class="odd" вручную может быть очень утомительным для больших таблиц, многие системы управления контентом не предоставляют функции четных/нечетных в цикле таблицы, поэтому выбор цветовой схемы может быть сложным
• Играть с Контрастный цвет, границы, типографика, значки

5.

Вертикальную зебру легче стилизовать, чем горизонтальную, так как мы можем использовать colgroup и col элементы для распределения классов столбцов. Однако разметка становится немного тяжелее:

 <столбец>
          <столбец>
          <столбец>
          <столбец>
       
             ...
          
       ...
 Элемент  colgroup  фактически применяет стиль или класс к таблице по столбцам. Вместо того, чтобы утомительно применять класс   для первого элемента  td  или  th , мы можем использовать более удобный тег  colgroup . Для получения дополнительной информации о  colgroup  посетите эту страницу.

        
       
          
        
       

          

             
Сотрудник
       
 
 Комедия
 Приключения
 Боевик
 Дети
 Очень страшное кино
 Индиана Джонс
 Каратель
 ВАЛЛ-И
 Эпическое кино
 Звездные войны
 Плохие парни 9023 7
 Мадагаскар
 Спартанец
 ВК
 Крепкий орешек
 В поисках Немо
 Доктор Дулиттл
 Мумия
 300
 Жизнь жуков
 стиль бюстгальтера также можно использовать для любого другого вида столов.
  Важно!  Не добавляйте слишком много контраста цветам зебры, вы можете ослепить своего зрителя
  Профи  Подходит для всех типов столов
  Минусы  Выбор цветовой схемы может быть сложным, нужно добавить  colgroup  элементов
  Play With  Контрастный цвет, границы,  colgroup  и  colgroup , значки и типографика
 6. Выделение одного столбца 
 В некоторых таблицах какой-то конкретный столбец может иметь больший вес, чем другие столбцы. Если это так, вы можете использовать  colgroup  и  col , чтобы выделить этот конкретный столбец. В приведенном ниже примере первая колонка служит отправной точкой для чтения, поэтому она выделена так же, как мы выделяем первую букву абзаца в качестве буквиц:
 9023 6 22,3
 Компания
 Q1
 Q2
 3 кв.
 4 кв.
 Google
 50,2
 40,63
 45,23
 39,3
 Apple
 25 .4
 30,2
 33,3
 36,7
 IBM
 20,4
 15,6
 29,3
 Вы также можете использовать технику выделения одного столбца, чтобы выделить что-то важное, скажем, столбец, содержащий итоги бухгалтерской таблицы, или в таблице сравнения — например, для компьютерной спецификации, выигрышную сущность (столбец).
  Важно!  Будьте осторожны, не переусердствуйте с выделением, иначе столбец  выскочит из  , отвлекая усилия на чтение остальных столбцов.
  Плюсы  Очень эффективен при использовании в столах определенного типа
  Минусы  Необходимый  tr:hover  эффект не работает в IE, подходит только для определенных типов столов
  Играть с  Цветовая схема, типографика, иконки и  tr:hover  эффекты
 7.
 Газета
 Чтобы добиться так называемого  эффекта газеты  , примените  границу  к  элементу таблицы  и поиграйте с ячейками внутри. Быстрый, минималистичный стиль газеты может выглядеть так:
 9023 4
 Компания
 Q1
 Q2
 Q3
 Q4
 Microsoft
 20,3
 30,5
 23,5
 40,3
 Google
 50,2
 40,63
 45,23
 39,3
 Apple
 25,4 902 37
 30,2
 33,3
 36,7
 IBM
 20,4
 15,6
 22,3
 29,3
 Просто поиграйте с цветовой схемой, границами, отступами, фоном и  tr:hover  эффектами ячеек (  td  и  th  ). Другие альтернативы представлены ниже:
 9023 6 45,23
 Компания
 1 квартал
 2 квартал
 3 квартал
 4 квартал
  Приведенные выше данные были вымышленными и выдуманными, пожалуйста, не предъявляйте мне иск 
 Microsoft
 20,3
 30,5
 23,5
 40,3
 Google
 50,2
 40,63
 39,3
 Яблоко
 25,4
 30,2
 33,3
 36,7
 IBM
 20,4
 15,6
 22.3
 29.3
 9 0233 902 36 Я легенда
 Любимый
 Отличный
 Хороший
 Плохой
 Страсти Христовы
 Ультиматум Борна
 Пристрели их
 Али
 Большая рыба
 Мумия
 Апокалипсис
 Монстр
 Побег из Шоушенка
 Холодная гора
 Индиана Джонс
 Живой или мертвый
 Величайшая история, когда-либо рассказанная
 Звездные войны
 Пила 3 ​​
  Важно !  Будьте осторожны с  border-collapse  , не потеряйте рамку подписи вокруг стола!
  Плюсы  Придает королевскую, авторитетную ауру столу
  Минусы  Не подходит для больших столов (на больших столах теряет свою привлекательность)
  Играйте с  Типографика, цветовая схема, фон, граница, отступы и  tr:hover  эффекты
 8.
 Закругленные углы
 Закругленные углы гладкие и современные, и их легко применить к столу, хотя вам нужно зажечь Фотошоп для этого. Создайте изображения для всех четырех углов вашего стола. Теоретически мы можем использовать вложение  тр  и  тд  -элементы для размещения левого и правого углов стола без добавления дополнительной разметки. К сожалению, IE 6 сходит с ума, и таблица выглядит уродливо, поэтому наиболее стабильный способ сделать это — поместить  ID  или  class  во все четыре угловые ячейки таблицы. Пожалуйста, рассмотрите пример ниже:
 9022 3
 Компания
 Q1
 Q2
 Q3
 Q4
  Приведенные выше данные были вымышленными и выдуманными, пожалуйста, не судитесь со мной 
  
 Microsoft
 20,3
 30,5
 23,5
 40 Apple
 25,4
 30,2
 33,3
 36,7
 IBM
 20,4
 15,6
 22,3
 29,3
  Профи  Отлично, если вы хотите нетрадиционную таблицу, вероятно, единственный жизнеспособный вариант, который у вас есть, если на вашем веб-сайте широко используются закругленные углы
  Минусы  Укладка занимает больше времени, требуются изображения
  Играйте с  Цветовая схема, варианты углов, типографика,  tr:hover  эффекты, значки
 9.
 Фон стола
 Если вы ищете быстрый и уникальный способ оформить свой стол, просто выберите привлекательное изображение или фотографию, связанные с предмет вашей таблицы и установите его как  background-image  таблицы   . Вы можете добавить 50% серого png-изображения в качестве  background-image  ячеек для улучшения читаемости, а это значит, что вам нужен CSS-хак, чтобы он работал в IE 6:
 * html table tbody td
{
          /* Взлом IE CSS Filter здесь*/
} 
 Таблица будет выглядеть так:
 Сотрудник
 Подразделение
 Предложения
 IE 6 пользователей не увидит прозрачный фон, если хак не применен
 Стивен К. Кокс
 Маркетинг
 Предложения скидок
 Джозефин Тан
 Реклама
 Подарить бонус es
 Джойс Минг
 Маркетинг
 Новый дизайн
 Джеймс А. Pentel
 Маркетинг
 Лучшая упаковка
  Важно!  Убедитесь, что изображение соответствует содержимому таблицы
  Профи  Очень легко стилизуется, придает уникальный вид, при правильном использовании изображение может служить символом, который производит неизгладимое впечатление на зрителя
  Минусы  Требуется хак для фоновой работы в IE 6, нужны изображения
  Play With  Фоновые изображения, прозрачные PNG, типографика, цвета, значки
 10. Фон ячейки 
 Вы можете применить  background-image  к ячейкам и добиться единообразного вида. Скажем, у вас есть по крайней мере полчаса свободного времени, и вы хотите что-то не слишком пресное. Запустите Photoshop и сделайте градиенты шириной 1 пиксель и установите их на 9.0193 background-image  всех ячеек. Вы получите таблицу градиентного стиля:
 Сотрудник
 Подразделение
 Предложения
 Рейтинг
 Give цвет фона в ячейках таблицы для достижения плавного перехода
 Стивен C. Cox
 Маркетинг
 Предложение скидок
 3/10
 Джозефин Тан
 Реклама
 Бонусы
 5/10
 Джойс Минг
 Маркетинг
 Новый дизайн
 8/10
 Джеймс А. Пентел
 Маркетинг
 Лучшая упаковка
 8/10
 Аналогичным образом выберите шаблон и установите его как  background-image , и вы получите таблицу в стиле шаблона:
 Сотрудник
 Зарплата
 Бонус
 Супервайзер
 Стивен К. Кокс
 300 долларов
 50 долларов
 Боб
 Джозефин Тан 9 0237
 150 долларов
 —
 Энни
 Джойс Минг
 200 долларов
 35 долларов
 Энди
 Джеймс А. Пентел
 175 долларов
 25 долларов
 Энни
 902 24 Страна
 Столица
 Язык
 Уникальный
 Япония
 Токио
 Японский
 Каратэ
 Южная Корея
 Сеул
 Корейский
 Женьшень
 Китай
 Пекин
 Мандарин
 Кунг-фу
 Индонезия
 Джакарта
 Индонезийский
 Батик
  Важно!  Убедитесь, что текст выделяется на фоне
  Профи  Легко укладывать, не слишком безвкусно
  Минусы  Использование изображений, узоров и градиентов может отвлекать чтение
  Играйте с  Цветовая схема, узоры, типографика, границы, фоны, градиенты, значки
 Final Words 
 Я знаю, что едва коснулся поверхности этой статьи, поэтому не стесняйтесь просматривать исходный код страницы и копировать