В результате наши ячейки прижались друг к другу, а текст внутри ячеек получил отступ:
![](https://i1.wp.com/webmastermix.ru/images/creation-site/lessons-html/creating-tables-in-html/6.png)
hspace - задает промежуток от таблицы в лево и в право в пикселях, записывается так: hspace=20
nowrap – запрещает перенос слов в ячейке, записывается просто nowrap
Последние два атрибута применяются крайне редко, поэтому пример кода с ними я не показываю.
Теперь рассмотрим атрибуты тега
, некоторые из них такие же, как и атрибуты тега
width - ширина ячейки в пикселях или в процентах.
height – высота ячейки в пикселях или процентах.
Например, зададим ширину первой ячейки первой строки в 30% - width=30% , а высоту первой ячейки второй строки в 100px. Код будет таким:
1 - ячейка |
2 - ячейка |
3 - ячейка |
4 - ячейка |
![](https://i0.wp.com/webmastermix.ru/images/creation-site/lessons-html/creating-tables-in-html/7.png)
Заметьте, достаточно задать одной ячейке высоту или ширину и все ячейки этой строки или столбца примут такой же размер. Поэтому если необходимо задать, например определенную высоту ячеек то достаточно указать этот параметр для одной ячейки и все остальные ячейки строки станут такими же.
align – выравнивает содержимое ячеек, имеет следующие значения:
align="lef" – содержимое ячейки будет выровнено по левому краю;
align="right" – содержимое будет выровнено по правому краю;
align="center" – содержимое будет выровнено по центру ячейки.
Добавим эти атрибуты и значения в наш код и выровняем содержимое 1 - й ячейки по левому краю (по левому краю содержимое выравнивается по умолчанию, однако в некоторых случаях данный атрибут необходим), содержимое 2 – й ячейки выровняем по правому краю, а 4 -й по центру.
1 - ячейка |
2 - ячейка |
3 - ячейка |
4 - ячейка |
bgcolor – при помощи данного атрибута можно задать цвет ячейки.
background – устанавливает изображение в виде фона ячейки.
С данными атрибутами мы уже встречались, рассматривая атрибуты тега . Работают они одинаково, только в этом случае ими задается фон ячейки. Например, зададим цвет фона 2-й ячейки желтым, а в качестве фона 4-й ячейки установим следующее изображение ().
Для этого в наш код добавим необходимые атрибуты, для наших ячеек bgcolor="#FFFF00" для 2-й ячейки и background= "fon.jpg" для 4-й ячейки. В результате наша таблица станет выглядеть так:
![](https://i1.wp.com/webmastermix.ru/images/creation-site/lessons-html/creating-tables-in-html/8.png)
Как вы видите, несмотря на то что мы задавали фон самой таблицы, если задать фон ячеек таблицы, то отображаться будет именно тот фон который мы задали для ячеек.
bordercolor – задает цвет рамки ячейки.
C этим атрибутом мы так же встречались, рассматривая атрибуты тега . Напоминаю, что он работает не во всех браузерах. Обратите внимание на то, что у тега нет атрибута border обозначающего рамку ячейки. Зададим цвет рамки 2 – й ячейки красным для этого ко второй ячейке добавим атрибут bordercolor="#FF0000"
Существует еще один атрибут, предназначенный для выравнивания содержимого ячеек:
valign – он производит выравнивание содержимое ячеек по вертикали.
Имеет следующие значения:
valign="top" – выравнивание содержимого ячейки по верхнему краю;
valign="bottom" – выравнивание содержимого ячейки по нижнему краю;
valign="middle" – выравнивание посередине ячейки;
valign="baseline" – выравнивание содержимого ячейки по базовой линии.
Добавим эти атрибуты к каждой из наших 4-х ячеек.
1 - ячейка |
2 - ячейка |
3 - ячейка |
4 - ячейка |
Наша таблица примет следующий вид:
![](https://i1.wp.com/webmastermix.ru/images/creation-site/lessons-html/creating-tables-in-html/9.png)
Последнее что нам необходимо рассмотреть в этом уроке, это объединение ячеек таблицы. Для того чтобы объединить несколько ячеек в строке, существует атрибут colspan="" где в кавычках указывается количество ячеек которое необходимо объединить.
Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат. Теги, используемые для построения таблицы в html
table
- обязательный тег, открывающий и закрывающий таблицу caption
- необязательный тег, обозначающий заголовок таблицы th
- необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным tr
- обязательный тег, с которого открывается и закрывается строка td
- обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
Таблица html
Название таблицы
Стобец 1
|
Стобец 2
|
Текст в первой ячейке
|
Текст во второй ячейке
|
В браузере отобразится
![](https://i1.wp.com/tradebenefit.ru/artimg/20130522114720197.jpg)
Назначение таблиц в html
Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон
(или его цвет), отступ
, ширину
, границу
и другие параметры
, что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна
! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
У тега table
есть следующие атрибуты:width
- ширина таблицы. может быть в пикселях или % от ширины экрана. bgcolor
- цвет фона ячеек таблицы background
- заливает фон таблицы рисунком border
- рамка и границы в таблице. Толщина указывается в пикселях cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.
Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th
) и зададим параметр атрибуту border (граница)
, width (ширина таблицы, строки или ячейки)
и bgcolor (цвет ячейки)
Таблица html
Стобец 1
|
Стобец 2
|
|
|
В результате в браузере будет выведена таблица следующего вида
![](https://i1.wp.com/tradebenefit.ru/artimg/20130529115839713.jpg) frame
- атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения: Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки. rules
- атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения: None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.
Рассмотрим пример кода
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
Результат ![](https://i1.wp.com/tradebenefit.ru/artimg/20130529123646137.jpg)
Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице
. Для этого есть следующие уже знакомые параметры: align
- выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center) cellspacing
- расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей) cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
В браузере отобразится выравненная по центру таблица следующего вида ![](https://i2.wp.com/tradebenefit.ru/artimg/20130529122017146.jpg)
Строки 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
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
Результат
![](https://i1.wp.com/tradebenefit.ru/artimg/20130529131029599.jpg) С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!) Спасибо за внимание! Надеюсь материал был полезен!
информирует браузер о завершении таблицы.
Любая таблица состоит из столбцов и строк.
Тег
создает строку, а тег
ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.
Тег |
также создает ячейку. Его отличие от тега |
в том, что ячейка созданная тегом |
является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.
Содержимое ячейки, созданной тегом |
по умолчанию располагается в ее левой чаcти.
Тег
создает заголовок таблицы, он располагается внутри тега
- сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.
Заголовок таблицы
1-я ячейка 1-ой строки |
2-я ячейка 1-ой строки |
1-я ячейка 2-ой строки |
2-я ячейка 2-ой строки |
|
|
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
Выравнивание таблицы. Выравнивание содержимого ячеек
Для выравнивания таблицы используется атрибут align
тега
.
При помощи атрибут align
Вы можете разместить таблицу в левой или правой (align=
"left"
и align=
"right"
) части окна браузера (родительского элемента
) или по его центру (align=
"center"
).
Выравнивание содержимого строк (тег
) и ячеек (тег
) по горизонтали также осуществляется при помощи атрибута align
, а по вертикали при помощи атрибута valign
:
Атрибут align
принимает значения left
, right
, center
и justify
, которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;
Атрибут valign
, принимающий значения top
, bottom
и middle
, задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.
Атрибут align
служит также для выравнивания заголовка (тег
) по горизонтали и определения его расположения - над таблицей или под ней.
По умолчанию содержимое ячеек расположено по левому краю по горизонтали, и выравнено по середине в вертикальной плоскости.
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
Высота и ширина таблицы и ячеек
По умолчанию размеры (высота и ширина
) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.
Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно - при помощи атрибутов hieght
и width
соответственно.
Тег |
, создающий строку таблицы не имеет атрибутов hieght
и width
. Высота строки соответствует высоте ячеек, расположенных в ней. А ширина строки равна ширине таблицы.
Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:
Указывается целое положительное число. В этом случае размер будет задан в пикселях;
Указывается целое положительное число с символом %.
Если содержимое таблицы или ячейки превышает заданные размеры - они будут проигнорированы браузером, а новые размеры автоматически подобраны в соответствии с размерами содержимого.
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.
Границы таблицы и ячеек
Таблица и каждая ее ячейка имеют свои собственные границы, которые по умолчанию не видны.
Атрибут border
тега
позволяет сделать границы видимыми и задать их толщину. При этом будут отображены границы и вокруг таблицы и вокруг каждой ячейки.
Толщина границы (или рамки
) задается в пикселях. В качестве значения атрибута border
указывается целое положительное число. Если атрибут border
указан без значения, толщина рамки составит 1 пиксель.
Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует
).
По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.
Атрибут bordercolor
задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег
), строки (тег
) или ячейки (тег
).
Атрибут bordercolor
поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS
).
Атрибут border не указан. |
Поэтому границы отсутствуют. |
|
|
Толщина границы таблицы составляет 3 пикселя. |
Ячейки имеют границы толщиной 1 пиксель! |
|
|
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
Частичное отображение границ
Граница таблицы и рамка вокруг ячеек могут быть отображены частично.
Атрибут frame
тега
указывает, где рисовать границу таблицы. Атрибут rules
указывает, как отобразить границы ячеек.
"500px"
frame=
"hsides"
rules=
"cols"
>
Установлены |
горизонтальные |
границы таблицы |
И |
отображены границы |
между колонками |
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
Отступы внутри и снаружи ячеек
При форматировании таблиц в HTML, для наглядного представления некоторой информации и удобного ее восприятия, может оказаться полезным использование отступов внутри и снаружи ячеек.
Внутренние отступы - от границ ячеек до их содержимого, задаются атрибутом cellpadding
тега
.
Внешние отступы - расстояние между границами соседних ячеек и расстояние от границ ячеек до границы таблицы, задаются атрибутом cellspacing
тега
.
В качестве значений атрибутов указываются целые положительные числа, которые задают расстояние в пикселях.
Расстояние от содержимого ячеек |
до их границ составляет 10 пикселей |
Расстояние между ячейками и от ячеек |
до границы таблицы составляет 25 пикселей |
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
Объединение ячеек
При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan
и rowspan
тега
.
Атрибут colspan
указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan
устанавливает количество ячеек, объединяемых по вертикали.
Оба атрибута имеют смысл, если таблица состоит из нескольких строк.
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
Фон таблицы. Фон ячеек таблицы
В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.
Атрибут background
тега
задает изображение, которое будет фоновым рисунком таблицы. В качестве значения атрибута указывается адрес файла с изображением - абсолютный или относительный путь к файлу ().
Атрибут bgcolor
тега
задает цвет фона таблицы. Цвет можно задать двумя способами ()
При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег
).
|
Темно-розовый - цвет фона таблицы. |
Фоновый рисунок отдельной ячейки - небо! |
|
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
Напомним также о существовании атрибута cols
тега
, который указывает браузеру количество столбцов в таблице.
Использование атрибута cols
позволяет браузеру быстрее отобразить содержимое таблицы.
Редактирование таблицы
В этом разделе, рассмотрим теги, которые применяют при редактировании сразу нескольких элементов таблицы. Эти теги можно разделить на две группы.
К первой группе относятся теги
и
. Они практически идентичны и служат для задания некоторых свойств и изменения характеристик одной или нескольких колонок таблицы.
Один из этих тегов располагают сразу после тега
. Допустим это тег
.
При помощи атрибута span
тега
указывают количество колонок, к которым будут применены атрибуты align
, valign
или width
(выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок
).
Если атрибут span
в теге
отсутствует, то будут изменены характеристики одной - первой колонки таблицы. При втором использовании тега
задаются свойства для следующих (следующей - если атрибут span
отсутствует
) колонок таблицы и т.д.
"2"
width=
"70px"
>
1
|
2
|
3
|
4
|
5
|
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
Ко второй группе тегов относятся также практически идентичные между собой теги
,
и
.
Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали - при помощи атрибутов align
и valign
соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor
.
При использовании этих тегов следует знать несколько нюансов, которые как раз и определяют различия между ними.
Теги
и
должны быть расположены перед тегом
, сразу после открывающего таблицу тега
. Строки, помещенные в тег
представлены вверху таблицы, а строки заключенные в тег
будут расположены внизу таблицы. Оба тега могут быть применены только один раз в пределах одной таблицы.
Тег
допускается использовать несколько раз внутри тега
.
1
|
2
|
3
|
4
|
5
|
6
|
7
|
8
|
"right"
bgcolor=
"#00FF33"
>
9
|
10
|
![](https://i0.wp.com/webpupil.ru/img/java/java_result.jpg)
При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком.
Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.
Пример:
HTML-код:
Графический фон таблицы html страницы
При помощи атрибута BACKGROUND можно задать графический фон ячейки или таблицы целиком. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта.
Пример:
HTML-код:
11111 |
22222 |
33333 |
44444 |
Отображение в браузере:
|
Выравнивание данных в таблице html страницы
Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.
Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.
Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине.
Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы.
Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.
Пример:
HTML-код:
1111 2222 |
22222 |
Нижняя ячейка |
Нижняя ячейка |
Отображение в браузере:
1111 2222
|
22222
|
Нижняя ячейка
|
Нижняя ячейка
|
|
Изменение размеров таблицы html страницы
Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.
То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.
При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные.
Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.
Лучшие статьи по теме
|
|
|
| | | | | |