Как сделать таблицу css

CSS Таблицы

Внешний вид HTML таблицы можно значительно улучшить с помощью CSS:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Попробуйте сами »

Границы таблицы

Чтобы указать границы таблицы в CSS, используйте свойство border .

В приведенном ниже примере указана чёрная граница для элементов <table> , <th> и <td> :

Пример

Таблица на всю ширину

В некоторых случаях приведенная выше таблица может показаться маленькой. Если вам нужна таблица, которая должна занимать весь экран (во всю ширину), добавьте width: 100% к элементу <table> :

Пример

Двойные границы

Обратите внимание, что таблица в приведенных выше примерах имеет двойные границы. Это связано с тем, что и таблица, и элементы <th> и <td> имеют отдельные границы.

Чтобы удалить двойные границы, посмотрите на пример ниже.

Свернуть границы таблицы

Свойство border-collapse устанавливает, должны ли границы таблицы сворачиваться в единую границу:

Пример

Если вам нужна лишь граница вокруг таблицы, укажите только свойство border для <table> :

Классы Bootstrap для стилизации таблиц

Александр Мальцев

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

Создание таблицы осуществляется посредством тегов языка HTML. После создания таблицы веб-разработчик переходит к её оформлению с помощью написания правил CSS. Данный процесс можно значительно упростить, используя большое количество готовых CSS классов платформы Twitter Bootstrap 3. Процесс оформления таблицы с помощью Twitter Bootstrap осуществляется путём добавления к таблице или к её различным частям (строке, ячейке) соответствующих классов. Задавая те или иные классы, Вы тем самым задаёте то или иное оформление таблицы.

Основы создания таблиц в HTML

Создание таблицы в HTML начинается с элемента table ( <table> . </table> ), внутри которого помещают шапку ( <thead> . </thead> ) и основное содержимое ( <tbody> . </tbody> ). Далее в элемент thead и tbody помещают строки ( <tr> . </tr> ). После этого в элементе tr ( <tr> . </tr> ) создают ячейки с помощью элементов td ( <td> . </td> ) и th ( <th> . </th> ), внутрь которых помещают содержимое, которое должно выводиться в этой ячейке. Элемент th ( <th> . </th> ) обычно используют в шапке, т.к. он придаёт жирное начертание тексту и выравнивает его по центру.

HTML - основы создания таблиц

Для объединения ячеек по вертикали и горизонтали предназначены следующие атрибуты:

  • rowspan="N" — объединяет N ячеек по вертикали;
  • colspan="N" — объединяет N ячеек по горизонтали.

Применять данные атрибуты можно для элементов td и th .

HTML - объединение ячеек таблиц

Для указанания названия таблицы используется элемент caption ( <caption> . </caption> ), который размещается внутри элемента table сразу же после его открывающего тега.

Оформление таблиц с помощью CSS классов Bootstrap

Базовое оформление таблиц

Для придания таблицы базового оформления необходимо добавить класс .table к элементу table :

Bootstrap 3 - оформление таблицы с помощью класса table

Оформление таблиц по типу полос "зебры"

Для выделения нечётных строк основной части таблицы ( <tbody> . </tbody> ) с помощью тёмного фона добавьте дополнительно класс .table-striped к классу .table .

Bootstrap 3 - оформление таблицы с помощью класса table-striped

Создание таблицы с границами

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

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Создание таблицы с интересным режимом (подсвечивание строк при наведении на них курсора)

Что бы включить подсвечивание строк таблицы, Вам необходимо добавить класс .table-hover к базовому классу .table элемента <table>.

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Создание сжатой или компактной таблицы

Вы можете также сделать свои таблицы более компактными посредством добавления дополнительного класса .table-condensed к базовому классу .table. Класс .table-condensed делает таблицу компактной за счет уменьшения отступов в ячейках наполовину.

Выше приведенный пример будет выглядеть примерно так:

Bootstrap 3 - Создание сжатой или компактной таблицы

Дополнительные акцентные классы для строк таблицы

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

Вышеприведенный пример будет выглядеть примерно так:

Bootstrap 3 - Дополнительные акцентные классы для строк таблицы

Создание адаптивной таблицы с помощью Bootstrap

С помощью Twitter Bootstrap 3 Вы можете также создавать адаптивные таблицы, которые можно просматривать на маленьких устройствах (ширина экрана, у которых меньше 768px) с помощью полосы прокрутки. При просмотре адаптивных таблиц на других устройствах, имеющих экран шириной, больше чем 768px полоса прокрутки будет отсутствовать.

Табличные теги, поддерживаемые Twitter Bootstrap 3

В следующей таблице перечислены поддерживаемые табличные элементы HTML и их назначение.

Создание и позиционирование таблиц. HTML &#038; CSS

Создание и позиционирование таблиц. HTML & CSS

В этой статье вы узнаете о том, как правильно создавать таблицы &#8212; внешние и внутренние теги, а также HTML атрибуты, научитесь задавать правильное позиционирование элементам таблиц с помощью CSS.

Таблицы &#8212; важная часть любого сайта. В основном используются для:

  • Компановки и размещения какой-либо статистической информации,
  • Систематизации данных о характеристиках товаров или услуг,
  • Более удобного указания цен.

Таблицы могут использоваться для сравнения нескольких услуг или товаров.

Каркас таблицы. HTML

Таблицы, как и любая другая часть сайта, размещается с помощью языка разметки HTML. Как правило, стилизация используется редко, так как таблицы &#8212; исключительный случай для HTML. Язык позволяет создать хорошую таблицу, которая будет хорошо сочетаться с простым дизайном сайта.

Но без CSS тоже не обойтись. Он обычно используется для стилизации всей таблицы, либо же для её отдельных элементов.

Для размещения таблицы на странице используется парный тег <table>. Он является контейнером и содержит в себе все её внутренние элементы.

Тег имеет целый ряд атрибутов:

  1. < align > &#8212; задает выравнивание страницы по горизонтали. Допускаются значения <center>, <left> или <right>.
  2. < background > и < bgcolor > &#8212; используются для создания фона страницы. Первый содержит в себе ссылку, по типу src=&#187;img.jpg&#187;. Второй создает фон, применяя обычные цвета. Работает система HEX.
  3. < border > и < bordercolor > &#8212; 2 атрибута, отвечающие за создание рамки. Первый задает ширину линии, а второй её цвет.
  4. < Cellpadding > и < cellspacing > &#8212; задает внутренние отступы. Первый указывает внутреннее расстояние от всего содержимого. Cellspacing делает отступы между каждой отдельной ячейкой.
  5. < Cols > &#8212; задает количество колонок на веб-странице.
  6. < Width > и < height > &#8212; ширина и высота таблицы.
  7. < Summary > &#8212; содержит описание таблицы.

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

Создание ячеек

Для заполнения страницы используются теги <tr>, <tr> или <th>.

<tr> &#8212; контейнер, который размещает одну строку в таблице и содержит её внутренние ячейки. Атрибуты этого тега обычно не используются.

Для создания и размещения ячеек используются теги <tr> и <th>. Они практически идентичны, но с небольшими визуальными отличиями. Контент расположенный в теге th имеет жирный шрифт и располагается по центру ячейки.

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

Самые используемые &#8212; атрибуты <rowspan> и <colspan>. Они позволяют объединить несколько ячеек в одну. Rowspan &#8212; объединяет ячейки по вертикали, позволяя сделать большой столбец. Colspan &#8212; объединяет ячейки по горизонтали.

Пример создания HTML таблицы:

Создание и позиционирование таблиц в HTML и CSS

Этот же код в браузере выглядит примерно как:

Создание таблиц в HTML

Позиционирование и стилизация. CSS

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

Менять её расположение можно используя свойство < margin > и < padding >. Первый применяется ко всей странице, для создания отступов от внешнего блока. Свойство padding можно применять для самого блока, в котором расположена страница.

Ещё один способ использовать CSS-свойство " position: absolute ". В этом случае, таблица будет находиться не относительно внешнего блока, а относительно всей страницы. Для смены местоположения используется система координат. Чтобы задавать расположение используются свойства <top>, <right>, <bottom>, <left>.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *