ЛЕКЦИЯ 1

ЛЕКЦИЯ

Тема: «Создание таблиц в HTML»

План лекции

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

2. Атрибуты тега <table>

3. Атрибуты тега <tr>

4. Атрибуты тега <td>

5. Теги thead, tbody и tfoot. Разделение таблицы

6. Табличная верстка html-страниц

7. Вложенные таблицы

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

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

Принцип создания таблиц в html таков: создаётся таблица, потом создаётся строка, потом все столбцы данной строки, потом очередная строка, снова все очередные столбцы данной строки и так далее.

Таблица создаётся с помощью тега <table>, а заканчивается тегом </table>. У таблицы есть строки и столбцы, поэтому их необходимо создать. Теперь согласно принципу создания таблиц, необходимо создать строку. Строка создаётся с помощью тега <tr> … </tr>. Внутри тега <tr> необходимо создавать столбцы, которые создаются с помощью тега <td> … </td>. И уже внутри этого тега находятся тот текст, который должен быть расположен внутри данной ячейки. Дальше открывается новый тег <td>. В него снова помещается текст, после этого закрывается </td>. Это сигнал к концу второго столбца. И так далее, столько столбцов, сколько Вам нужно. В конце закрывается строка тегом </tr>. Затем следующая строка и так далее. А заканчивается всё закрывающим тегом </table>.

Пример:

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

Для построения таблиц, кроме тегов <table>…</table>, <tr> … </tr>, <td> … </td> используются такие теги:

<Caption> … </Caption> - заголовок таблицы. Поддерживает атрибут ALIGN.

<tH> … </tH> - отображение заголовка строки или столбца более жирным шрифтом. Данный элемент поддеpживает атpибуты: ALIGN, COLSPAN, HEIGHT, VALIGN, WIDTH.

Пример:

<caption>Название таблицы</caption>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

2. Атрибуты тега <table>

1) Атрибут "border", значение которого задаёт толщину рамки таблицы в пикселях. По умолчанию, рамки нет.

2) Атрибут "width" задает ширину таблицы. Размер может быть указан, как в абсолютных единицах (пиксели, px), так и в относительных (проценты, %). Относительный размер хорош тем, что всегда подстроится под любое разрешение монитора пользователя и любой браузер. А абсолютный - тем хорош, что при любых браузерах и любых разрешениях монитора не будет сюрпризов с дизайном, связанных, например, с растягиванием элементов (если монитор широкоэкранный).

Пример:

3) align - Задает выравнивание таблицы по краю окна браузера. Может принимать значения left, center, right

Пример:

<table align="left | center | right">...</table>

4) background - Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Пример:

<table background="путь к картинке">...</table>

5) bgcolor – цвет фона таблицы

Пример:

<table bgcolor="цвет">...</table>

Пример:

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

   <table border="1" align="center" width="40%" bgcolor="plum">

   <caption>Название таблицы</caption>

               <tr>

                           <th>1</th>

                           <th>2</th>

                           <th>3</th>

               </tr>

               <tr>

                           <td>11</td>

                           <td>12</td>

                           <td>13</td>

               </tr>

               <tr>

                           <td>21</td>

                           <td>22</td>

                           <td>23</td>

               </tr>

               <tr>

                           <td>31</td>

                           <td>32</td>

                           <td>33</td>

               </tr>

   </table>

В браузере:

6) Атрибут cols - задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.

Пример:

<table cols="число">...</table>

7) CELLPADDING – расстояние между текстом ячейки и внутренней границей ячейки таблицы в пикселях.

Пример:

Для предыдущей таблицы указано значение:

<table border=1 cellpadding=15>

8) CELLSPACING – расстояние между ячейками таблицы в пикселях.

Пример:

В примере указано значение:

<table border=1 cellspacing=10>

Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0", то границы примут привычный вид:

9) FRAME - задает вид рамки вокруг таблицы и может принимать следующие значения:

 void - рамки нет,

 above - только верхняя рамка,

 below - только нижняя рамка,

 hsides - только верхняя и нижняя рамки,

 vsides - только левая и правая рамки,

 lhs - только левая рамка,

 rhs - только правая рамка,

 box - все четыре части рамки.

10) RULES - задает вид внутренних границ таблицы и может принимать следующие значения:

 none - между ячейками нет границ,

 rows - границы только между строками,

 cols - границы только между столбцами,

 all - отображать все границы.

11) BORDERCOLOR - задает цвет рамки вокруг таблицы

Пример:

<table border="1" bordercolor="red">

3. Атрибуты тега <tr> (строка)

Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать такие параметры:

1) Атрибут height – высота строки.

У тега <tr> нет атрибута "width". А за ширину отвечают столбцы.

2) align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center).

3) valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle).

4) bgcolor - задает цвет строки.

Пример:

Изменим предыдущую таблицу:

Зададим красный цвет границы таблицы и толщину в 3 пикселя: <table border="3" bordercolor="red">

Сделаем заливку строки заголовка столбцов таблицы красным цветом.

Установим высоту каждой строки 40 пикселей: <tr height="40">

Для каждой строки установим различное выравнивание по горизонтали и вертикали.

Получим в браузере:

4. Атрибуты тега <td> (ячейка)

Все параметры, доступные для строк, можно применять и к отдельным ячейкам, т.е. к любому тегу <td>, действие будет распространяться только на саму ячейку.

1) Атрибут "width" – ширина ячейки.

2) Атрибут "colspan". Значение этого атрибута означает количество столбцов, которое занимает данная ячейка.

3) Атрибут "rowspan". Значение этого атрибута означает количество строк, которое занимает данная ячейка.

Пример:

<tr>

<td colspan=2 align=center>Две ячейки объединены по горизонтали</td>

</tr>

<tr>

<td rowspan=2>Две ячейки объединены по вертикали</td>

<td align=left>выравнивание по левому краю</td>

</tr>

<tr>

<td align=right>выравнивание по правому краю</td>

</tr>

</table>

5. Теги thead, tbody и tfoot. Разделение таблицы

Теги thead, tbody и tfoot предназначены для разделения таблицы на части. То есть с их помощью мы сможем определить верхнюю часть таблицы, основную часть и нижнюю часть таблицы.

HTML-тег <thead> предназначен для определения верхней (заголовочной) части таблицы.

Данный тег необходимо прописывать сразу после открывающего тега <table>, если нет заголовка указанного с помощью тега <caption>. Если же заголовок присутствует, то тег необходимо добавлять после него. Кроме того, при использовании данного элемента в коде обязательно должен присутствовать HTML-тег <tbody>.

HTML-тег <tbody>. Если решили использовать в таблице тег <thead>, значит, обязательно должны использовать и тег <tbody>, который предназначен для выделения основной части таблицы. Можно его даже назвать аналогом тега <body> для HTML-документа в целом. Только тег <tbody> относится только к таблице, а не к целому документу.

HTML-тег <tfoot>. У этого HTML-тега есть одна особенность. Если смотреть на его предназначение и предназначение других тегов, которые делят таблицу на части, то можно сделать вывод, что раз он отвечает за нижнюю часть, то и прописать его мы должны после тега <tbody>. Однако это не так. На самом деле HTML-тег <tfoot> должен быть указан до <tbody>. Но информацию внутри этого тега необходимо указать ту, которая будет снизу, так как веб-браузер выведет ее под основной информацией.

Пример.

Отображается в браузере:

Вывод:

THEAD - заголовок таблицы

TFOOT - нижняя часть таблицы

TBODY - тело таблицы

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

6. Табличная верстка html-страниц

Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:

Если наложить на этот рисунок таблицу, то увидим, что она состоит из трех строк и двух столбцов фиксированной ширины.

Получается, что нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра colspan тега <td>. Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее, сколько столбцов будет объединено.

Пример,

Этот столбец включает в себя два столбца.

Для нашего примера:

<td colspan="2">шапка сайта</td>

</tr>

<td>контент</td>

</tr>

<td colspan="2">низ сайта</td>

</tr>

</table>

Обратите внимание, что первая и третья строки теперь содержат по одному столбцу.

Рассмотрим другой пример разметки web-страницы:

Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок. Получится три строки и шесть столбцов.

Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это:

<td colspan="6">шапка сайта</td>

</tr>

Вторая строка состоит из шести столбцов:

</tr>

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

<td colspan="2" bgcolor="darkred">новости</td>

<td colspan="4" bgcolor="#FFFFFF">контент</td>

</tr>

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

Рассмотрим еще пример разметки web-страницы:

Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:

<td width="70%">шапка</td>

</tr>

Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):

<td>контент</td>

</tr>

Наконец, третья строка - это один столбец, включающий в себя три столбца:

<td colspan="2">низ сайта</td>

</tr>

7. Вложенные таблицы

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

Итак, у нас есть вот такой код:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

<td bgcolor="darkred">шапка</td>

</tr>

<td width="70%">контент</td>

</tr>

<td colspan="2" bgcolor="darkred">низ сайта</td>

</tr>

</table>

</body>

</html>

Внутрь нашего контента поместим вот такую таблицу:

Код этой таблицы простой - три строки и два столбца:

<table width="470" border="1"

align="center" cellspacing="0" cellpadding="10">

<tr>

<td>Здесь текст о ромашках</td>

</tr>

<tr>

<td>Здесь текст о тюльпанах</td>

</tr>

<tr>

<td>Здесь текст о герберах</td>

</tr>

</table>

Теперь возьмем код этой таблицы и поместим его вместо слова "контент" в код нашей разметки:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

<td bgcolor="darkred">шапка</td>

</tr>

<tr>

<td>Здесь текст о ромашках</td>

</tr>

<tr>

<td>Здесь текст о тюльпанах</td>

</tr>

<tr>

<td>Здесь текст о герберах</td>

</tr>

</table>

</td>

</tr>

<td colspan="2" bgcolor="darkred">низ сайта</td>

</tr>

</table>

</body>

</html>

Результат:

Теперь уберем все границы у вложенной таблицы. Для этого в теге <table> этой таблицы зададим параметр <border="0">

Результат:

КОНТРОЛЬНЫЕ ВОПРОСЫ

1. С помощью какого тега создаются таблицы в html-документе?

2. Какие теги отвечают за создание строк и столбцов в таблице?

3. Как установить заголовок для таблицы?

4. Как установить заголовок строки или столбца?

5. Что означают атрибуты тега <TABLE>: border, cellpadding, cellspacing и какие значения могут принимать?

6. Как установить выравнивание таблицы?

7. Какие атрибуты тега <TABLE> отвечают за задание цвета фона и применение фоновой картинки для таблицы?

8. Что означает запись <td rowspan=2>…</td>?

9. Что означает запись <td colspan=2>…</td>?

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