Как оформить таблицу на сайте

Таблицы в HTML

В HTML таблицы применяются не только привычным нам образом (как набор данных, распределенных по ячейкам, строкам и столбцам), но и для удобства размещения информации на странице. Проще говоря, можно представить всю html-страницу в виде таблицы и, например, поместить меню в её левый столбец, основную информацию в средний столбец, а дополнительные ссылки в правый столбец. Количество столбцов, строк и, соответственно, ячеек выбирается только тобой и может быть любым.

С траница, которую ты сейчас читаешь, изначально была построена по этому принципу: она разбита на несколько строк, а каждая строка на столбцы (причём, в разных строках разное количество столбцов). В некоторые из получившихся ячеек, в свою очередь, помещены ещё таблицы (таблицы вставлены в таблицы). Ты можешь это увидеть даже чисто визуально.

В общем, использование таблиц в HTML значительно упрощает создание сайта. Впрочем, ты сам всё увидишь! Поэтому давай перейдем непосредственно к практике.

Содержание урока:

§ 1. Создание таблицы

С ама таблица в HTML создаётся тегами и , строки таблицы (помещаются между тегами и ) тегами и , а столбцы таблицы (помещаются между тегами и ) тегами и .

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

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

§ 2. Рамка таблицы (границы)

П о-умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы была видна, используется уже знакомый тебе по предыдущим разделам атрибут «border»:

И тогда браузер покажет:

З начение атрибута «border» влияет только на внешнюю рамку, границы между ячейками изменять нельзя. Их можно либо показывать, либо нет. Например, если изменить значение атрибута «border» с «1» на «5»:

М ожно поменять цвет рамки таблицы с помощью атрибута «bordercolor». Например:

Т огда в браузере мы увидим:

§ 3. Отступы в таблице

Ч тобы изменить отступы между соседними ячейками таблицы, в HTML используется атрибут «cellspacing». Давай для наглядности усложним таблицу: сделаем две строки по три столбца и применим атрибут «cellspacing»:

www.seoded.ru

CSS: Оформление таблиц

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

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

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

    Размер таблицы

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

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

    Выравнивание текста

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

    CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align :

    • top: текст выравнивается по верхней границе ячейки
    • middle: выравнивает текст по центру (значение по умолчанию)
    • bottom: текст выравнивается по нижней границе ячейки
    • Чередование фонового цвета строк таблицы

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

      Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

      Изменение фона строки при наведении курсора

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

      Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

      Выравнивание таблицы по центру

      Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

      Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

      puzzleweb.ru

      2.7. CSS-таблицы

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

    • Содержание:
    • 2. Как задать ширину и высоту таблицы
    • 3. Как задать фон таблицы
    • 4. Столбцы таблицы
    • 5. Как добавить таблице заголовок
    • 6. Как убрать промежуток между рамками ячеек
    • 7. Как увеличить промежуток между рамками ячеек
    • 8. Как скрыть пустые ячейки таблицы
    • 9. Компоновка макета таблицы с помощью свойства table-layout
    • 1. Границы таблицы border

      Границы ячеек заголовка каждого столбца задаются для элемента th :

      Границы ячеек тела таблицы задаются для элемента td :

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

      Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

      Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега

      с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);

      с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

      Подробнее про CSS-селекторы вы сможете прочитать здесь.

      5. Как добавить таблице заголовок

      8. Как скрыть пустые ячейки таблицы

      9. Компоновка макета таблицы с помощью свойства table-layout

      Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.

      1. Горизонтальный минимализм

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

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

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

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

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

      5. Газетный стиль

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

      Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

      Оформление таблиц

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

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

      По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

      Пример 1. Ширина таблицы в процентах

      В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу

      Выравнивание таблиц

      Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.

      Пример 2. Выравнивание таблицы с помощью margin

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

      Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3).

      Пример 3. Цвет фона

      Результат данного примера показан на рис. 1.

      Рис. 1. Изменение цвета фона

      Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов

      Пример 4. Создание зебры

      Результат данного примера показан на рис. 2.

      Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.

      Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .

      Поля внутри ячеек

      Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

      Расстояние между ячеек

      Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).

      Пример 5. Использование border-spacing

      Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

      Рис. 3. Вид таблицы с расстоянием между ячеек

      Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

      Границы и рамки

      Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border , которое применяется к элементам (

      Пример 6. Применение свойства border-collapse при создании рамок таблицы

      Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.

      а — свойство не установлено

      б — свойство установлено

      Рис. 4. Вид таблицы при использовании border-collapse

      На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

      Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom , border-left и другие подобные. Применять границы к элементам

      Пример 7. Линии между строк

      Результат данного примера показан на рис. 5.

      Рис. 5. Таблица с горизонтальными линиями

      Выравнивание текста в ячейках

      По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент

      Пример 8. Выравнивание содержимого ячеек по горизонтали

      В данном примере содержимое

      Рис. 6. Выравнивание текста в ячейках

      Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top , как показано в примере 9.

      Пример 9. Выравнивание содержимого ячеек по вертикали

      В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

      webref.ru

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

      Форматирование таблиц

      • 1. Границы таблицы border
      • 10. Лучшие макеты таблиц (Топ-10 таблиц)

      Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border :

      Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

      Границы можно задавать частично:

      Подробнее о свойстве border вы можете прочитать здесь.

      2. Как задать ширину и высоту таблицы

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

      Ширину таблицы и столбцов обычно задают в px или % , например:

      Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов

      3. Как задать фон таблицы

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

      4. Столбцы таблицы

      с помощью тега можно задать фон для любого количества столбцов;

      Подробнее про тег вы можете прочитать здесь.

      Добавить заголовок в таблицу можно с помощью тега , а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align . Наследуется.

      6. Как убрать промежуток между рамками ячеек

      Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.

      Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек

      7. Как увеличить промежуток между рамками ячеек

      С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.

      Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек

      Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table , то ячейка не будет скрыта. Наследуется.

      10. Лучшие макеты таблиц

      (По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine)

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

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

      3. «Коробочный» стиль

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

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

      6. Фон таблицы

      html5book.ru

      Смотрите так же:

      • Налог на автомобиль инн Заполнение квитанции формы № ПД (налог) Фор­ма «№ ПД (на­лог)» пред­на­зна­че­на для упла­ты на­ло­гов (сбо­ров), пе­ней и штра­фов на­ло­го­пла­тель­щи­ка­ми — физи­че­ски­ми ли­ца­ми в […]
      • На сколько будет повышена пенсия с 1 апреля 2018 Стоимость индивидуального пенсионного коэффициента Понятие индивидуального пенсионного коэффициента (ИПК) появилось в связи с проведением очередного этапа реформирования системы […]
      • Размер минимальная пенсия в омске в 2018 году ЧТО ВАЖНО ЗНАТЬ О НОВОМ ЗАКОНОПРОЕКТЕ О ПЕНСИЯХ Подписка на новости Письмо для подтверждения подписки отправлено на указанный вами e-mail. 18 декабря 2017 Новый календарный и финансовый […]
      • Образец иска на алименты на ребенка Раздел проданного супругом имущества Продажа одним из супругов общего имущества без согласия другого супруга не препятствует его разделу. При этом для фактического раздела проданных вещей, […]
      • Оплата госпошлины у нотариуса С 1 июля 2005 года налог на наследство был упразднен (ФЗ №78). Теперь отдавать государству часть «кровного» наследства — не нужно. Тем не менее, стоит приготовиться к определенным […]
      • Какие условия для получения субсидии молодой семье Сбербанк: ипотека «Молодая семья» В «Сбербанке России» действует специальное предложение (акция) для молодых семей, в которых хотя бы один из супругов (или единственный родитель в неполной […]