Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника

HTML тэги tr и td Урок № 12. HTML таблицы     Цель темы: за два урока научится строить таблицы в виде структуры сайта.     Урок 1. Рассмотрим нашу таблицу с точки зрения HTML: сама таблица задается с помощью тегов < table> < /table>, у таблицы есть название - теги < caption> < /caption>, таблица состоит из строк - теги < tr> < /tr>, каждая строка состоит из столбцов - теги < td> < /td>, столбцы имеют названия, расположенные в первой строке - теги < th> < /th>. Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:   < html>   < head> < title> html table< /title> < /head>   < body>   < table> < 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>   < /body>   < /html>   Результат: Название таблицы 1 2 3 11 12 13 21 22 23 31 32 33 Как видите, получилось не очень красиво, будем украшать. Параметры html таблиц: отступ, ширина, цвет фона, рамка Для этого у тега < table> существует ряд параметров: width - задает ширину таблицы (в пикселах или % от ширины экрана), bgcolor - задает цвет фона ячеек таблицы, background - заливает фон таблицы рисунком, border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы, cellpadding - задает отступ в пикселях между границей клетки и ее содержимым. Применим эти параметры: < html> < head> < title> html table< /title> < /head> < body> < table width=" 300" bgcolor=" plum" border=" 1" > < 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> < /body> < /html> Результат: Название таблицы       11 12 13 21 22 23 31 32 33 Уже лучше, но наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив еще три параметра: align - задает выравнивание таблицы: слева (right), справа (left), по центру (center), cellspacing - задает расстояние между ячейками таблицы (в пикселах), cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах). Применим эти параметры: < html> < head> < title> html table< /title> < /head> < body> < table width=" 300" bgcolor=" plum" border=" 1" align=" center" cellspacing=" 5" cellpadding=" 10" > < 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> < /body> < /html> Результат: Обратите внимание, границы у таблицы двойные. Если указать cellspacing=" 0", то границы примут привычный вид: < table width=" 300" bgcolor=" plum" border=" 1" align=" center" cellspacing=" 0" cellpadding=" 10" > Результат: Вообще, за границы отвечают два параметра: frame - задает вид рамки вокруг таблицы и может принимать следующие значения: void - рамки нет, above - только верхняя рамка, below - только нижняя рамка, hsides - только верхняя и нижняя рамки, vsides - только левая и правая рамки, lhs - только левая рамка, rhs - только правая рамка, box - все четыре части рамки. rules - задает вид внутренних границ таблицы и может принимать следующие значения: none - между ячейками нет границ, groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже), rows - границы только между строками, cols - границы только между стобцами, all - отображать все границы. С помощью этих параметров можно задавать границы так, как вам хочется. Здесь приведем только один пример, сами же поэкспериментируйте со всеми. < html> < head> < title> html table< /title> < /head> < body> < table width=" 300" bgcolor=" plum" border=" 1" align=" center" cellspacing=" 5" cellpadding=" 10" rules=" rows" frame=" void" > < 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> < /body> < /html> Результат: Следует заметить, что границы в разных браузерах отображаются немного по-разному. HTML тэги tr и td Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать три параметра: align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center), valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle), bgcolor - задает цвет строки. Посмотрим на примере: < html> < head> < title> html tr< /title> < /head> < body> < table width=" 300" bgcolor=" plum" border=" 1" align=" center" cellspacing=" 0" cellpadding=" 10" > < caption> Название таблицы< /caption> < tr> < th> 1< /th> < th> 2< /th> < th> 3< /th> < /tr> < tr align=" center" valign=" middle" bgcolor=" yellow" > < td> 11 Текст во всех ячейках этой строки центрирован по центру как по вертикали, так и по горизонтали < /td> < td> 12< /td> < td> 13< /td> < /tr> < tr align=" left" valign=" bottom" > < td> 21 Здесь текст прижат к левому краю по горизонтали и книзу - по вертикали < /td> < td> 22< /td> < td> 23< /td> < /tr> < tr align=" right" valign=" top" bgcolor=" yellow" > < td> 31 Текст во всех ячейках этой строки прижат по горизонтали к правому краю, по вертикали - кверху < /td> < td> 32 < /td> < td> 33< /td> < /tr> < /table> < /body> < /html> Результат: Эти же параметры можно применять и к отдельным ячейкам, т.е. к любому тегу < td>, действие будет распространяться только на саму ячейку. Например, в предыдущем коде добавьте в любой тег < td> параметр bgcolor=" red". < td bgcolor=" red" > 21 Здесь текст прижат к левому краю по горизонтали и книзу - по вертикали< /td> Результат: Но к ячейкам можно применять еще два параметра: width - задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина таблицы), height - задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты. Например, добавим в наш код, в теги < th> эти параметры < tr> < th width=" 50%" height=" 50" > 1< /th> < th width=" 30%" > 2< /th> < th width=" 20%" > 3< /th> < /tr> Результат: Следует отметить, если не задавать ширину и высоту, то таблица будет формироваться по содержимому (так было в предыдущих примерах). На этом урок закончен, потренируйтесь создавать и оформлять таблицы, эти умения понадобятся вам на следующем уроке, где мы будем создавать таблицы сложных структур.

Урок 2.

(повторение)

С помощью таблиц можно задать структуру сайта.

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

Тегом таблицы является тег < table> < /table>,
строкой таблицы является тег < tr> < /tr>, и столбцом таблицы – тег < td> < /td>.

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

Рассмотрим пример.

Создадим таблицу:

Сделаем это следующим образом:

Ставим тег < table> и начинаем формировать первую строку, пишем:

1.< tr>

2.< td> Ячейка 1 строка 1< /td>

3.< td> Ячейка 2 строка 1< /td>

4.< td> Ячейка 3 строка 1< /td>

5.< /tr>

У нас получилась первая строка таблицы с тремя столбцами. Аналогично формируем вторую строку:

1.< tr>

2.< td> Ячейка 1 строка 2< /td>

3.< td> Ячейка 2 строка 2< /td>

4.< td> Ячейка 3 строка 2< /td>

5.< /tr>

И третью:

1.< tr>

2.< td> Ячейка 1 строка 3< /td>

3.< td> Ячейка 2 строка 3< /td>

4.< td> Ячейка 3 строка 3< /td>

5.< /tr>

Наши три строки сформированы, осталось закрыть тег < /table>.

Наша таблица готова.

Если таблице нужно дать заголовок, то за это отвечает тег < caption> Заголовок таблицы < /caption>.

По умолчанию он располагается по центру, над таблицей. Тег заголовка таблицы необходимо размещать между тегом < table> и первым тегом < tr>.

В принципе заголовок можно сделать, поставив тег < h3> Заголовок таблицы < /h3> перед тегом < table>.

Если столбцу нужно дать заголовок, то для этого предусмотрен тег < th> Заголовок столбца < /th>.

Тег < th> – то же что и тэг < td>, но его содержимое отображается полужирным шрифтом с выравниванием по центру, а содержимое < td>, как вы уже увидели, с выравниванием по левому краю, со шрифтом по умолчанию.

С тегами, касающихся таблиц, пожалуй, все.

Теперь рассмотрим параметры этих тегов.

Тег < table> имеет следующие параметры:

width=число – ширина таблицы в пикселях или в % относительно ширины окна браузера.

height=число - высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).

align = left – выравнивание таблицы по левому краю.

right – выравнивание таблицы по правому краю.

center – выравнивание таблицы по центру.

border= число – толщина рамки таблицы в пикселях.

cellspacing=число - расстояние между смежными ячейками в пикселях (по умолчанию = 2).

cellpadding=число – расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).

bgcolor= цвет – фоновый цвет таблицы.

background=url - фоновое изображение для таблицы.

bordercolor=цвет - цвет всех линий рамки таблицы.

Рассмотрим параметры тегов < tr>, < td>, < th>:

width=число – ширина ячейки в пикселях или в % относительно ширины окна браузера (для < tr> не применяется).

height=число - высота ячейки в пикселях или в % относительно ширины окна браузера (для < tr> не применяется).

(высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).

align = left – выравнивание в ячейке по левому краю.

right – выравнивание в ячейке по правому краю.

center – выравнивание в ячейке по центру.

valign - вертикальное выравнивание содержимого ячейки.

top - выравнивание по верхнему краю ячейки.

bottom – выравнивание по нижнему краю ячейки.

middle – выравнивание по середине ячейки.

bgcolor= цве – фоновый цвет ячейки.

background=url – фоновое изображение для ячейки.

bordercolor=цвет – цвет всех линий рамки ячейки.

colspan=число - количество объединяемых ячеек по столбцам (для < tr> не применяется).

rowspan=число - количество объединяемых ячеек по строкам (для < tr> не применяется).

Новый материал

Подробнее остановимся на параметрах colspan и rowspan.

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

Для этого нам понадобятся параметры тега < td> colspan и rowspan..

Итак:

1.< table width=" 100%" border=" 1" cellspacing=" 0" cellpadding=" 0" >

Формируем первую строку: так как в первой строке у нас одна ячейка, и она объединяет три ячейки второй строки, то для одной ячейки первой строки укажем параметр colstrong=3.

1.< tr>

2.< td colspan=" 3" align=" center" > 1< /td>

3.< /tr>

Вторая строка это просто три ячейки:

1.< tr>

2.< td align=" center" > 2< /td>

3.< td align=" center" > 3< /td>

4.< td align=" center" > 4< /td>

5.< /tr>

Третья строка: пятая ячейка третьей строки объединяет две ячейки второй строки (2 и 3) и две строки (третью и четвертую).

Поэтому для нее зададим colspan=2 и rowspan=2. Ячейка № 6 остается.

1.< tr>

2.< td colspan=" 2" rowspan=" 2" align=" center" > 5< /td>

3.< td align=" center" > 6< /td>

4.< /tr>

Таким образом получается, что в четвертой строке должна быть одна ячейка ()

1.< tr>

2.< td align=" center" > 7< /td>

3.< /tr>

4.< /table>

таблица построена.

Роль таблиц в WEB очень велика, поэтому рекомендую разобраться с построением таблиц.

Поупражняться можно на примерах.

Упражнение:

Таблица 1.

Домашнее задание (на 28.11.12)

Для самостоятельной работы на 28.11.12

(материал подготовлен и адаптирован для 10-А и 11-А)

Если есть вопросы пишите на E-mail: kit-kh@rambler.ru

По материалам рассылки Андрея Бернацкого