Итак, мы изучили с вами наиболее простые действия, которые можно осуществлять с границами таблиц. И теперь таблица выглядит куда более эстетично. Однако, наполнение ячеек прямо таки упирается в границы. Это легко можно исправить, достаточно лишь сделать отступы в ячейках в таблице HTML. И тогда текст внутри рамки, в ячейке, будет более читабельным.
Для того, чтобы сделать отступы в ячейке следует использовать атрибут cellpadding
для тега
. Однако, есть и другой, более предпочтительный вариант: CSS
.
В таком случае отступы задаются с помощью свойства padding
. С его помощью не составит труда сделать отступ там, где надо, то есть – сверху, справа, снизу или слева, используя, соответственно, одно из данных свойств: padding-top
, padding-right
, padding-bottom
и padding-left
.
Можно задать, на сколько именно пикселей должен осуществляться отступ. Приведем пример, в котором нижний отступ будет составлять 20
пикселей, а все остальные будут по 10
. Такой CSS
-код будет выглядеть вот так:
Td {
padding: 10px;
padding-bottom: 20px;
}
А полный код стилей на данном этапе:
Table {
border: solid 1px blue;
border-collapse: collapse;
}
td {
border: solid 1px blue;
padding: 10px;
padding-bottom: 20px;
}
Результат в браузере:
Отступы между ячейками
Как правило, задачи, связанные с созданием таблиц, можно решить, используя для этого теги, атрибуты и свойства, которые позволяют создавать рамки, отступы в ячейках, а также задать цветовой фон самих ячеек.
Отступы в таблицах бывают не только внутри ячеек. Они могут также присутствовать и между самими ячейками.
Существует две возможности сделать отступы между ячейками:
- с использованием атрибута cellspacing
для тега
.
- с использованием CSS
-свойства border-spacing
.
Надо подчеркнуть, что border-spacing
прописывается для таблицы в целом, в то время как свойство padding
прописывается непосредственно для ячеек.
Давайте глянем на пример:
Table {
border: solid 1px blue;
border-collapse: separate;
border-spacing: 5px;
}
td {
border: solid 1px blue;
padding: 10px;
padding-bottom: 20px;
}
И на получившийся результат:
Сразу оговорим, что не надо пытаться сделать такие отступы с помощью border-collapse: collapse
. Ведь при использовании этой опции ячейки «липнут» друг к другу.
А чтобы они находились отдельно друг от друга, следует использовать border-collapse: separate
. Важно понимать, что данное значение является значением по умолчанию. И применяется оно только для того, чтобы наглядно показать, как решается эта задача. Если мы удалим эту строку, то результат в виде отдельно расположенных друг от друга ячеек будет сохранен.
Таблица - один из основных инструментов для создания web-страниц.
Без использования CSS, только с помощью таблиц
можно создавать страницы со сложным дизайном. Если вы прошли серию уроков Делаем сайт - первые шаги , то вы понимаете о чем речь.
Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:
Рассмотрим нашу таблицу с точки зрения HTML:
- сама таблица задается с помощью тегов
,
- у таблицы есть название - теги
,
- таблица состоит из строк - теги
|
, - каждая строка состоит из столбцов - теги
|
, - столбцы имеют названия, расположенные в первой строке - теги
|
.
Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:
Результат:
Как видите, получилось не очень красиво, будем украшать.
Параметры html таблиц: отступ, ширина, цвет фона, рамка
Для этого у тега
существует ряд параметров:- width
- задает ширину таблицы (в пикселах или % от ширины экрана),
- bgcolor
- задает цвет фона ячеек таблицы,
- background
- заливает фон таблицы рисунком,
- border
- задает рамку указанной ширины (в пикселах) вокруг всей таблицы,
- cellpadding
- задает отступ в пикселях между границей клетки и ее содержимым.
Применим эти параметры:
Результат:
Уже лучше, но наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив еще три параметра:
- align
- задает выравнивание таблицы: слева (right), справа (left), по центру (center),
- cellspacing
- задает расстояние между ячейками таблицы (в пикселах),
- cellpadding
- задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).
Применим эти параметры:
Результат:
Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0"
, то границы примут
привычный вид:
Результат:
Вообще, за границы отвечают два параметра:
- frame
- задает вид рамки вокруг таблицы и может принимать следующие значения:
- void
- рамки нет,
- above
- только верхняя рамка,
- below
- только нижняя рамка,
- hsides
- только верхняя и нижняя рамки,
- vsides
- только левая и правая рамки,
- lhs
- только левая рамка,
- rhs
- только правая рамка,
- box
- все четыре части рамки.
- rules
- задает вид внутренних границ таблицы и может принимать следующие значения:
- none
- между ячейками нет границ,
- groups
- границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
- rows
- границы только между строками,
- cols
- границы только между стобцами,
- all
- отображать все границы.
С помощью этих параметров можно задавать границы так, как вам хочется. Здесь приведем только один пример, сами же
поэкспериментируйте со всеми.Результат:
Следует заметить, что границы в разных браузерах отображаются немного по-разному.
HTML тэги tr и td
Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки.
У строк можно использовать три параметра:
- align
- выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
- valign
- выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top),
вниз (bottom), по центру (middle),
- bgcolor
- задает цвет строки.
Посмотрим на примере:- width
- задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина
таблицы),
- height
- задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.
Например, добавим в наш код, в теги
эти параметры | | 1
|
2
|
3
|
|---|
Результат:
Следует отметить, если не задавать ширину и высоту, то таблица будет формироваться по содержимому (так было в предыдущих
примерах).
На этом урок закончен, потренируйтесь создавать и оформлять таблицы, эти умения понадобятся вам на следующем уроке, где мы
будем создавать таблицы сложных структур.
CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек.
Так как у каждой ячейки свои границы, то между соседними ячейками граница получается
сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство
border-collapse
. Оно принимает значения:
border-collapse: separate
- у каждой ячейки своя граница (по умолчанию)
border-collapse: collapse
- общая граница
border-collapse: inherit
- значение принимается от родительского элемента
Для примера создадим таблицу и зададим рамку ячейкам всех таблиц, которые будут на странице.
Сначала не будем ничего менять, чтобы посмотреть, как таблица будет выглядеть:
Стиль:
1
2
3
4
5
6
|
Страница
Домашнее задание.
В этом уроке я тоже не буду все подробно описывать - только общие моменты. Для полноты картины посмотрите результат примера.
- Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
- В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй - левое и правое меню, а также основное содержимое (контент), в третьей - Footer или «подвал» страницы.
- Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
- Важно. Используйте тег
![]()
только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
- Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
- Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где - увеличить.
Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
Теги, используемые для построения таблицы в html
table
- обязательный тег, открывающий и закрывающий таблицу
caption
- необязательный тег, обозначающий заголовок таблицы
th
- необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr
- обязательный тег, с которого открывается и закрывается строка
td
- обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
Таблица html
Название таблицы
Стобец 1
|
Стобец 2
|
Текст в первой ячейке
|
Текст во второй ячейке
|
В браузере отобразится
Назначение таблиц в html
Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон
(или его цвет), отступ
, ширину
, границу
и другие параметры
, что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна
! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
У тега table
есть следующие атрибуты:width
- ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor
- цвет фона ячеек таблицы
background
- заливает фон таблицы рисунком
border
- рамка и границы в таблице. Толщина указывается в пикселях
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.
Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th
) и зададим параметр атрибуту border (граница)
, width (ширина таблицы, строки или ячейки)
и bgcolor (цвет ячейки)
Таблица html
Стобец 1
|
Стобец 2
|
|
|
В результате в браузере будет выведена таблица следующего вида
frame
- атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения: Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки. rules
- атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения: None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.
Рассмотрим пример кода
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
Результат 
Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице
. Для этого есть следующие уже знакомые параметры: align
- выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing
- расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
В браузере отобразится выравненная по центру таблица следующего вида 
Строки tr и ячейки td в таблицах HTML
Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек
(td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.
Стобец 1
|
Стобец 2
|
Для тегов tr и td есть следующие align
- выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign
- выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor
- задает цвет строки
width
- ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height
- высота ячейки (все ячейки в строке примут данный параметр)
Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
Результат
 С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!) Спасибо за внимание! Надеюсь материал был полезен!
|
