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

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

Таблица в html — один из основных и первых методов вёрстки web-страниц. До того, как CSS стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

Таблица в html состоит из строк и ячеек в этих строках. Это не опечатка, не из строк и столбцов, а именно из строк и ячеек. Считывание информации по таблице в html идёт построчно.

Проще говоря смысл написанного кода такой:
Первая строка — 1-ая, 2-ая . ячейки, Вторая строка — 1-ая, 2-ая . ячейки, Третья строка. и так далее.

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

table — обязательный тег, открывающий и закрывающий таблицу
caption — необязательный тег, обозначающий заголовок таблицы
th — необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr — обязательный тег, с которого открывается и закрывается строка
td — обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы

В браузере отобразится

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

Назначение таблиц в html

Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ, ширину, границу и другие параметры, что придаст ей красивый внешний вид. Таблица — Ваш первый шаг к понимаю web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) — было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой.

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

У тега table есть следующие атрибуты:

width — ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor — цвет фона ячеек таблицы
background — заливает фон таблицы рисунком
border — рамка и границы в таблице. Толщина указывается в пикселях
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th) и зададим параметр атрибуту border (граница), width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

В результате в браузере будет выведена таблица следующего вида

frame — атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

void — рамки нет,
above — только верхняя рамка,
below — только нижняя рамка,
hsides — только верхняя и нижняя рамки,
vsides — только левая и правая рамки,
lhs — только левая рамка,
rhs — только правая рамка,
box — все четыре части рамки.

rules — атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

none — между ячейками нет границ,
groups — границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows — границы только между строками,
cols — границы только между стобцами,
all — отображать все границы.

Читайте также:  Какая камера заднего вида лучше для авто

Рассмотрим пример кода

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

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

align — выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing — расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример

В браузере отобразится выравненная по центру таблица следующего вида

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

Строки tr и ячейки td в таблицах HTML

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

Для тегов tr и td есть следующие

align — выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign — выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor — задает цвет строки
width — ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height — высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

Результат

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

Спасибо за внимание! Надеюсь материал был полезен!

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

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

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

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

1. Границы таблицы border

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

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

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

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

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

Читайте также:  Магнитола jvc kd r47

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

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

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

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

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

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

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

и

. Фиксировать высоту с помощью свойства height не рекомендуется.

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

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

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

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

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

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

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

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

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

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

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

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

caption-side
Значения:
top Заголовок таблицы располагается над таблицей. Значение по умолчанию.
bottom Располагает заголовок под таблицей.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Рис. 2. Пример отображения заголовка под таблицей

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

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

border-collapse
Значения:
separate Рамки ячеек располагаются раздельно.
collapse Рамки ячеек сливаются в одну, а промежутки между рамками убираются.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

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

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

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

border-spacing
Значения:
Добавляет промежутки между рамками как по вертикали, так и по горизонтали. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая — вертикальный.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

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

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

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

Читайте также:  Второй закон де моргана доказательство
empty-cells
Значения:
show Рамка и фон пустой ячейки будут отрисовываться так же, как для ячейки таблицы, имеющей содержимое.
hide Если все ячейки строки пусты, то вся строка отображается так, если бы было задано значение display: none .
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Рис. 5. Пример скрытия пустой ячейки таблицы

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

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

table-layout
Значения:
auto Значение по умолчанию. Ширина макета таблицы определяется шириной её содержимого с учетом значений свойств padding-left , padding-right , border-left width плюс одна ширина border-right последней ячейки в ряду, или заданной шириной ячеек и толщиной рамки. Если ширина ячеек не задана явно, они могут быть разной ширины.
fixed Свойство сработает только в том случае, если для таблицы задана ширина. Ширина ячеек будет одинаковой, а содержимое ячеек, которое не помещается в ячейку, будет наползать под содержимое соседней ячейки.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылка на основную публикацию
Adblock detector