| ... |
| ... |
...
2. Свойство background="URL"
- задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.
Пример
|
Пример таблицы
|
|
Столбец 1
|
Столбец 2
|
Преобразуется на странице в следующее:
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif
. Обратите внимание на то, что в теге мы добавили style="color:white;"
. Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.
3. Свойство bgcolor="цвет"
- задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border="число"
- задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1"
, что означает толщина рамки - 1 пиксель.
5. Свойство bordercolor="цвет"
- задает цвет рамки. Если border="0"
, то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding="число"
- отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing="число"
- расстояние между ячейками в пикселях.
8. Свойство cols="число"
- число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame="параметр"
- как отображать границы вокруг таблицы. Может принимать следующие значения:
- void
- не отрисовывать границы
- border
- граница вокруг таблицы
- above
- граница по верхнему краю таблицы
- below
- граница снизу таблицы
- hsides
- добавить только горизонтальные границы (сверху и снизу таблицы)
- vsides
- рисовать только вертикальные границы (слева и справа от таблицы)
- rhs
- граница только на правой стороне таблицы
- lhs
- граница только на левой стороне таблицы
10. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules="параметр"
- где отображать границы между ячейками. Может принимать следующие значения:
- all
- линия рисуется вокруг каждой ячейки таблицы
- groups
- линия отображается между группами, которые образуются тегами , , ,
или
- cols
- линия отображается между колонками
- none
- все границы скрываются
- rows
- граница рисуется между строками таблицы, созданными через тег
12. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство class="имя_класса"
- можно указать имя класса, которому принадлежит таблица.
14. Свойство style="стили"
- стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге
.
Атрибуты и свойства и |
1. Свойство align="параметр"
- задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:
- left
- выравнивание по левому краю
- center
- выравнивание по центру
- right
- выравнивание по правому краю
2. Свойство background="URL"
- задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.
3. Свойство bgcolor="цвет"
- задает цвет фона ячейки.
4. Свойство bordercolor="цвет"
- задает цвет рамки ячейки.
5. Свойство char="буква"
- задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.
6. Свойство colspan="число"
- задает число объединяемых горизонтальных ячеек.
7. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах %.
8. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах %.
9. Свойство rowspan="число"
- задает число объединяемых вертикальных ячеек.
10. Свойство valign="параметр"
- выравнивание содержимого ячейки по вертикали.
- top
- выравнивание содержимого ячейки по верхнему краю строки
- middle
- выравнивание по середине
- bottom
- выравнивание по нижнему краю
- baseline
- выравнивание по базовой линии
Примечание 1
Для тега | доступны такие же параметры, что и для | . Параметры для одного тега | будут иерархично применены ко всем внутри него
Как сделать, чтобы границы ячеек в таблице не склеивались
В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse
:
...
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
1. Что такое HTML таблицы и зачем они нужны?
html таблицы
- это один из самых основных составляющих каждой html странички и соответственно каждого сайта. Например, сайт сайт весь состоит из таблиц: картинки, тексты, ссылки, формы регистрации – все размещено относительно друг друга при помощи таблиц html (собственно, весь сайт также расположен в одной большой таблице).
2. Какие теги у html таблиц?
Теги
, задающие таблицу html пишутся так:
Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них:
|
- строчка html таблицы
| - столбец (ячейка) html таблицы.
А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов:
Делается такая html таблица очень легко. Для начала поставим теги самой таблицы, внутрь которых помещаем необходимое количество строк (в нашем примере 2 строки):
Затем каждую строку разбиваем на ячейки с помощью тегов столбцов:
|
- ячейка 1.1
|
- ячейка 1.2
|
- ячейка 1.3
|
- ячейка 2.1
|
- ячейка 2.2
|
- ячейка 2.3
На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).
3. Как задать фоновый цвет html таблиц?
А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно.
Итак, для задания фона используется атрибут bgcolor="цвет_фона"
.
Например, если нам необходимо задать один цвет для всей таблички, то делается это так:
bgcolor="цвет_фона"
>
|
- ячейка 1.1
|
- ячейка 1.2
|
- ячейка 1.3
|
- ячейка 2.1
|
- ячейка 2.2
|
- ячейка 2.3
Например, если необходимо сделать табличку желтого цвета, то мы пишем:
Если нужно задать фоновый цвет ряду
html таблицы, то тогда атрибут bgcolor="цвет_фона"
применяем к тегу :bgcolor="#FFFF00"
>
bgcolor="#0000FF"
>
1.1 |
1.2 |
1.3 |
2.1 |
2.2 |
2.3 |
|
В этом случае, атрибут номер ячейки
задает белый цвет тексту, расположенному внутри тега.
Точно так же задается и цвет каждой ячейки отдельно
. Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега атрибут bgcolor="цвет_фона"
:
4. Как установить размер ширины и высоты ячеек html таблицы?
Итак, для того, что бы вручную установить ширину и высоту ячеек, используют атрибуты height и width. Их можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
height
- атрибут, устанавливающий высоту ячейки
width
- атрибут, задающий ширину ячейки
А теперь на примере:
Теперь объясню, почему мы задали высоту ячеек только один раз в каждой строке.
Если в ряду Вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. А ширину каждого ряда лучше всего задавать отдельно!
Вы можете задать высоту и ширину для всей таблицы. В этом случае все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им данные параметры персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Так же, очень часто приходится задавать высоту height и ширину width в процентах
:
| содержимое ячейки |
Если мы задаем для ячейки ширину в 40 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 60 процентов, т.е. сумма их ширин не должна превышать 60 процентов. Все очень просто: в сумме мы имеем всего 100%. Считаем: 100 – 40 = 60.
5. Как выровнять текст внутри html таблицы?
А теперь давайте разберемся, как выровнять текст в нашей html таблице по левому краю, по правому краю и по центру.
Делается это с помощью атрибута:
align=”left”
- выравнивает текст внутри html таблицы по левому краю
align=”center”
- выравнивает текст html таблицы по центру
align=”right”
- выравнивает текст внутри html таблицы по правому краю
Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом атрибут align принимать не может.
Например, код html таблицы, текст которой выровнен по центру, выглядит так:
align="center"
>
align="left"
> 1x1 |
align="center"
>1.2 |
align="right"
> 1x3 |
align="left"
>2.1 |
align="center"
> 2x2 |
align="right"
>2.3 |
|
Прописав атрибут align="center"
в открытии , мы выровняли html таблицу по центру странички браузера.
Вот такой результат Вы получите в браузере:
А теперь рассмотрим на примере, как выровнять текст внутри html таблицы по верхнему или по нижнему краю, то есть, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу.
Вертикальное выравнивание задается атрибутом:
valign="top"
- содержание будет располагаться вверху ячейки
valign="middle"
- содержание будет располагаться по центру ячейки
valign="bottom"
- содержание будет располагаться внизу ячейки
Давайте рассмотрим данные атрибуты на нашем примере:
valign="top"
> 1x1 |
1.2 |
valign="top"
> 1x3 |
valign="bottom"
>2.1 |
2x2 |
valign="bottom"
>2.3 |
|
Вот что мы получим, если посмотрим в браузере результат работы атрибутов align
и valign
:
6. Как объединить ячейки и столбцы html таблицы?
В этой части нашей статьи мы поговорим об атрибутах colspan
и rowspan
.
colspan
- определяет количество столбцов, на которые распространяется данная ячейка
rowspan
- определяет количество рядов на которые распространяется данная ячейка
Значения colspan
и rowspan
могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).
Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть так:
Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.
С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».
А теперь, когда мы разобрались с параметром colspan
, давайте разберемся с параметром rowspan. Принцип действия тут тот же:
colspan="2"
> 1.1 |
1.2 |
2.1 |
2.2 |
|
Таким образом, мы научились объединять ячейки в строках и столбцах html таблиц.
7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?
Итак, ранее мы создали html таблицу, между ячейками которой четко видны отступы. Чтобы их стало видно еще лучше, давайте добавим рамку для нашей таблицы. Делается это с помощью атрибутов:
border="ширина рамки в пикселях"
- устанавливает ширину рамки
bordercolor="цвет рамки"
- устанавливает цвет рамки
Давайте, например, сделаем нашей html таблице рамку черного цвета шириной 1 пиксель.
Для этого тегу добавляем атрибуты:
Теперь мы четко видим отступы между ячейками html таблицы и отступы от внутренних краев ячеек до текста. Следовательно, без проблем можем управлять этими отступами. Для этого предназначены атрибуты:
cellspacing="ширина отступа в пикселях"
- отступ между ячейками
cellpadding="ширина отступа в пикселях"
- отступ внутри ячейки (от края ячейки до текста, изображения, ссылки...)
Например, давайте сделаем отступ между ячейками 10 пикселей, а отступ от края ячейки до текста увеличим до 20 пикселей. Делается это так:
cellpadding="20"
cellspacing="10"
>
1.1 |
1.2 |
2.1 |
2.2 |
|
Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing
) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.
Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0"
и cellspacing="0"
.
8. Как одну html таблицу вставить внутрь другой?
Мы подходим к завершающему этапу по изучению html таблиц. Сейчас мы научимся вставлять одну таблицу внутрь другой.
На примере, внутрь ячейки 1.2 мы вставим новую таблицу, состоящую из одного ряда и двух столбцов. Внутренней html таблице мы установим красную рамку шириной 2 пикселя и расстояние между ячейками 0 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.
Делается это очень просто:
Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):
На этом этапе данную статью мы закончим. Думаю она получилась удачной и не сложной для понимания, и надеюсь, больше с таблицами у Вас проблем не будет.
Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
- контейнер, внутри которого располагается таблица (такой же, как для маркированных или
для нумерованных списков).
- border
- атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
-
задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега
, вне ячеек и строк.
- парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
|
- тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри |
обозреватель выделяет жирным и размещает по центру.
- контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег
, столько ячеек в ней и будет: один тег - одна ячейка.
-
позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега
, если его нет, то после
.
-
используется для той же цели, что и
.
может содержать
, но не наоборот.
- span
- атрибут, задающий число столбцов, к которым применяются свойства контейнера
.
-
,
и
- контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров
,
и в HTML-документе.
- colspan
нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
- rowspan
объединяет ячейки по столбцам.
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
Пример таблицы
Инструменты создания сайтов
| Назначение | Инструмент |
| Разметка | HTML | XHTML |
| Оформление | CSS |
| Разработка | PHP | Python |
В браузере документ будет выглядеть так: Разберём, какие строчки кода за что отвечают.
- открыли таблицу, задав ей толщину рамок.
-
Инструменты создания сайтов
- озаглавили её.
- открыли строку.
|
Назначение |
- создали ячейку с оформлением заголовка.|
Инструмент |
- создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
- закрыли строку. Аналогично создали остальные строки. |
Разметка |
HTML |
XHTML |
- добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
- закрыли таблицу.
В этой статье мы поговорим о создании таблиц в HTML. Создать таблицу в HTML можно абсолютно любую по размерам и формы: какое кочешь столбцов и строк, а также различное оформление. Они очень полезны при создании страниц сайта, когда он имеет табличную структуру.
Например твой сайт состоит из трех столбцов и двух строк. Первую строку из 3 столбцов мы можем объеденить в одну общую, где разместим название нашего сайта и логотип, во второй строке в первом столбце мы можем разместить левое меню, во втором столбце текст сайта или же текст определенной страницы, ну а в последнем столбце правое меню. Не запутался? :) Да вот простой пример: эта страница, которую ты сейчас читаешь. Она тоже сделана именно по такому принципу. Думаю, лучше перейти к практике, и на примерах наглядно увидеть, как это все реализовать.
Чтобы создать таблицу, нам сперва потребуюся теги , для создания строк нужны теги и , которые пишутся между тегами TABLE, ну а столбы создаются тегами и | , и как вы уже поняли - помещаются между тегами TR.
Давайте создадим простую таблицу, которая состоит из 3 столбцов. HTML-код таблицы:
| Столбец 1 |
Столбец 2 |
Столбец 3 |
На странице в браузере таблица будет выглядеть вот так:
По умолчанию браузер выводит таблицу с рамкой. Чтобы скрыть рамку таблицы, вам понядобится атрибут тега TABLE border. Пример таблицы без рамки:
| Столбец 1 |
Столбец 2 |
Столбец 3 |
На странице мы увидем нашу таблицу без рамки:
Атрибут border изменяет вечиличину лишь внешней рамки нашей таблицы. Значение 0 как вы поняли делает её невидимой, а значение от 1 до 10 задает её толщину. Примедем пример таблицы с рамкой 6:
| Столбец 1 |
Столбец 2 |
Столбец 3 |
На выходе страницы получим такую таблицу:
При помощи атрибута bordercolor можно задать цвет нашей рамки в таблице. На HTML примере покажу таблицу с зеленой рамкой и толщиной 4:
| Столбец 1 |
Столбец 2 |
Столбец 3 |
Получим вот что:
Как видите, между ячейками существует небольшое расстояние. Чтобы от него избавится, или наоборот, увеличить расстояние нам поможет атрибут таблицы cellspacing. HTML пример увеличения расстройния между ячейками в таблице:
| Столбец 1 |
Столбец 2 |
Столбец 3 |
Наш браузер выведет такую таблицу:
Для изменения отсутпов между текстом и границей ячейки, используйте атрибут таблицы cellpadding. HTML-код атрибута cellpadding на примере:
Полученная таблица в браузере:
Для объединения ячеек в таблицы, применяются атрибуты тега TD:
- colspan — объединение ячеек по горизонтали;
- rowspan — объединение ячеек по вертикали.
Довольно сложно представить, поэтому приведу простой пример HTML-код:
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
В браузере получим такую таблицу:
C ячейками попробуй сам по такому же принципу. Выравнивать ттаблицу а также текст в ячейчах можно при помощи атрибута align. Значения могут быть знакомые нам: center (по центру), left (по левому краю) и right (по правому краю). Давай выравним таблицу по правому краю:
| Столбец 1 |
Столбец 2 |
Столбец 3 |
В бразуере:
| Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
Чтобы выранивать содержимое ячеек по вертикали, нам понадобится атрибут для ячейки valign. Приведу его значения:
- baseline — по базовой линии;
- bottom — по нижнему краю;
- middle — по середине (значение по умолчанию);
- top — по верхнему краю.
Попробуйте сделать пример HTML-кода сами, мне кажется на данном этапе урока данное задание полезно:)
Далее, рассказывая про атрибуты таблицы, можно вспомнить атрибут bgcolor. Он задает цвет фона таблицы или ячейки. Если вы хотите вставить рисунок на фон таблицы или ячейки, используйте атрибут background, в значение которого пишите путь до картинки
Кстате, в таблицу можно вставить не только текст или картинку, но и другую таблицу, что делает использование таблиц очень полезным оружием для решения самых сложных задач. НКак я уже говорил, данная таблица сделана именно табличным методом.
Думаю, данная статья вам поможет чтобы создать свою первую таблицу или даже первую страницу сайта, и на этом статья о создании таблиц в HTML закончена. далее мы поговорим о META тегах, что не менее важно, чем таблицы.
Дата публикации: 15 мая, 2012
Популярное в рубрике:
Как объединить слои в фотошопе в один или соединить их в группу...
читать
Перенос контактов на новый телефон android
читать
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...
читать
Основные возможности Kaspersky Rescue Disk
читать
Top
| |
|
| |
|
