Файл: Уроки HTML.docx

Если вы будете часто применять таблицы, то непременно столкнетесь с ситуацией, когда какая-либо ячейка должна занимать несколько строк таблицы. Здесь вам пригодится ключевое слово ROWSPAN, которое добавляется в тег <td> заданной ячейки. Чтобы ячейка занимала две строки вместо одной, замените ваш код, например <td>текст вашей простой ячейки</td> на <td rowspan=2>Вас расширеный текст</td>. Теперь при отображении таблицы ячейка с ключевым словом ROWSPAN займет две строки. Так можно изменить бейсбольную таблицу:

<th>Команда</th>

<th>Победы/поражения</th>

<td>Пит Шурек</td>

<td rowspan=2>Цинциннати</td>

В итоге мы получим это:

Имя	Команда	Победы/поражения	Очки	Ауты
Пит Шурек	Цинциннати	16-2	2,73	194
Хосе Рио	Цинциннати	28-2	1,92	199

Мы видим что 2 ячейки с параметром "Команда" объеденились в одну.

Объединение нескольких столбцов в одну ячейку

Подобно тому, как ROWSPAN распространяет ячейку на несколько строк, COLSPAN "раздвигает" ее на несколько столбцов. С помощью ключевого слова COLSPAN вы можете распространить ячейку на любое количество столбцов. Обратите внимание на следующий код:

<table align="center" border="1"> <tr>

<th colspan=2>Личная информация</th>

<th colspan=3>Статистика</th> </tr> <tr>

<th>Команда</th>

<th>Победы/поражения</th>

<td>Пит Шурек</td>

<td>Цинциннати</td>

<td>Гидео Немо</td>

<td>Лос-Анджелес</td>

<td>Грег Энгриус</td>

<td>Атланта</td>

В итоге мы получим это:

Личная информация		Статистика
Имя	Команда	Победы/поражения	Очки	Ауты
Пит Шурек	Цинциннати	16-2	2,73	194
Гидео Немо	Лос-Анджелес	19-8	2,94	399
Грег Энгриус	Атланта	24-6	2,21	275

Я думаю здесь тоже без проблем...

Включение списка в таблицу

Таблицы можно комбинировать с другими элементами HTML. Так, они могут содержать списки любого из описанных на прошлом занятии типов. Строго следите за тем, чтобы всегда использовались закрывающие теги, иначе коды списков трудно отслеживать. Давайте попробуем включить маркированный список в нашу таблицу:

<th>Команда</th>

<th>Победы/поражения</th>

<td>Пит Шурек</td>

<td>Цинциннати</td>

<td>

<li>команда "All-Star Team"

<li>Награда MVP

<li>Серебряная летучая мышь

</td> </tr> <tr>

<td>Гидео Немо</td>

<td>Лос-Анджелес</td>

<td>Грег Энгриус</td>

<td>Атланта</td>

В итоге мы получим это:

Имя	Команда	Победы/поражения	Очки	Ауты
Пит Шурек	Цинциннати	16-2	2,73	194	 команда "All-Star Team"  Награда MVP  Серебряная летучая мышь
Гидео Немо	Лос-Анджелес	19-8	2,94	399
Грег Энгриус	Атланта	24-6	2,21	275

Итак, сегодня мы начали знакомиться с таблицами. Мы изучили элементарные функции построения таблицы, изучили возможности объединения нескольких строк в одну ячейку и нескольких столбцов в одну ячейку. На тему таблиц материала осталось примерно еще на один урок. Если у вас есть вопросы по пройденному материалу, присылайте их сюда.

Уроки html'а. Урок # 8.

Выравнивание текста в таблице

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

Каждое из ключевых слов align и valign имеет четыре возможных значения. Они используются так же, как и описанные выше ключевые слова объединения в теге <td>,. Сейчас я приведу вам таблицу, в которой даны эти значения:

Значение ключевого слова	Описание
ALIGN=LEFT	Выравнивает текст в ячейке (таблице, строке) по левому краю (идет по умолчанию)
ALIGN=CENTER	Выравнивает текст в ячейке (таблице, строке) по центру
ALIGN=RIGHT	Выравнивает текст в ячейке (таблице, строке) по правому краю
ALIGN=JUSTIFY	Растягивает текст в ячейке (таблице, строке) на всю строку (проверено на MSIE 4.0+)
VALIGN=TOP	Растягивает текст в от самого верха ячейки (полезно, когда информация в строке состоит из нескольких строк)
VALIGN=MIDDLE	Выравнивает текст в ячейке в ячейке вертикально по центру (идет по умолчанию)
VALIGN=BOTTOM	Выравнивает текст в ячейке по нижнему краю

Продолжая работать с бейсбольной таблицей (та, в которой есть список), введем ключевое слово VALIGN=TOP для всей строки, стодержащей список, чтобы текст не "плава" в центре ячейки. Изменим тег этой строки таким образом:

<th>Команда</th>

<th>Победы/поражения</th>

<th>Ауты</th> </tr> <tr valign=top>

<td>Пит Шурек</td>

<td>Цинциннати</td>

<td>

<li>команда "All-Star Team"

<li>Награда MVP

<li>Серебряная летучая мышь

</td> </tr> <tr>

<td>Гидео Немо</td>

<td>Лос-Анджелес</td>