vvedenie html 3
TRANSCRIPT
Таблицы Переходим к изучению таблиц. По моему мнению, таблицы играют огромную роль в создании Вэб-страниц сайта. С их помощью можно придать странице сколь угодно сложную компоновку. Поэтому советую досконально изучить этот мощный инструмент создания сайта. Создание таблицы TABLE Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION. TD и TH Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, улучшается работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы. Параметры: ALIGN - определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование. VALIGN - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе TR. NOWRAP - блокирует автоматический перенос слов в пределах текущей ячейки. TR Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH Параметры: ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right. VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle. BGCOLOR - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>. Содержание ячеек заголовков отображается полужирным шрифтом и выравнивается по центру.
В чем же "прелесть" таблиц и почему они нашли такое широкое применение в сайтостроении? Дело в том, что, используя таблицы, можно сделать аккуратную компоновку информации в пределах Вэб-страницы, добиться точного расположения того или иного фрагмента страницы, будь то текст, графика или гиперссылка. Например, используя таблицу, можно легко добиться отображения текста в нескольких колонках, подобно газетной публикации. Пример 1: <html> <head> <title>HTML</title> </head> <body> <table border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> </body> </html> Результат:
Задание: Добавить в таблицу ещё одну строку.
Обрамление таблицы BORDER - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет. CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек. Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>. Определяя рамку таблицы, надо указать толщину ее внешних линий в пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING. По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR. Пример 2: <html> <head> <title>HTML</title> </head> <body> <table border="2" cellspacing="5" bordercolor="#0ff00f"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> </body> </html>
Результат:
Задание: Добавить ещё один столбец и изменить цвет таблицы. Заголовок таблицы CAPTION Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо. Параметры: ALIGN - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения: top - помещает заголовок над таблицей (значение по умолчанию); bottom - помещает заголовок под таблицей. Для создания заголовка таблицы служит тэг <CAPTION>. По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей. Следует сказать, что стандарт HTML не позволяет ставить одной таблице несколько заголовков. Пример 3: <html> <head> <title>HTML</title> </head> <body> <table border="1"> <caption> Заголовок таблицы </caption> <tr> <td>1</td> <td>2</td>
</tr> </table> </body> </html> Результат:
Задание: Выровнять тест в таблице по центру и изменить границы таблицы. Группирование столбцов <COLGROUP> Создает структурную группу столбцов таблицы <COL> Создает неструктурную группу столбцов таблицы Для группирования столбцов таблицы служат тэги <COLGROUP> и <COL>. Дескриптор <COLGROUP> создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Так одна структурная группа может охватывать ячейки заголовков столбцов, а другая - ячейки, содержащие данные. Дескриптор <COL> предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа. Пример 4: <html> <head> <title>HTML</title> </head> <body> <table border="1"> <colgroup span="1" style="color:red"></colgroup>
<colgroup span="2"> <tr> <th>Товар</th> <th>Цена</th> <th>Кол-во</th> </tr> <tr> <th>Гайка</th> <td>20р</td> <td>50</td> </tr> <tr> <th>Болт</th> <td>30р</td> <td>80</td> </tr> </table> <br> <table border="1"> <col span="1" style="color:green"> <col span="2" style="color:red"> <tr> <th>Товар</th> <th>Цена</th> <th>Кол-во</th> </tr> <tr> <th>Гайка</th> <td>20р</td> <td>50</td> </tr> <tr> <th>Болт</th> <td>30р</td> <td>80</td> </tr> </table> </body>
</html> Результат:
Задание: Добавить в первую таблицу ещё одну строку, изменить цвет первого столбца. Изменить во второй таблице цвет так, чтобы все три столбца имели разные цвета. Группирование строк <THEAD> - нужен для создания группы заголовков для столбцов таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз. <TBODY> - применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные. <TFOOT> - позволяет создать группу строк для представления информации о суммах или итогах, располагаемую в нижней части таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов. Для группирования строк таблицы служат тэги <THEAD>, <TBODY>, <TFOOT>. Пример 5: <html> <head> <title>HTML</title> </head> <body> <table border="1"> <thead style="color:green"> <tr> <th>Товар</th> <th>Цена</th> <th>Кол-во</th>
</tr> </thead> <tr> <th>Гайка</th> <td>20р</td> <td>50</td> </tr> <tr> <th>Болт</th> <td>30р</td> <td>80</td> </tr> <tfoot> <tr> <td colspan="3" align="center">Итоговая строка</td> </tr> </tfoot> </table> </body> </html> Результат:
Задание цвета элементов таблицы BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком. Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #. Пример 6: <html>
<head> <title>HTML</title> </head> <body> <table border="1"> <tr bgcolor="#ff00ff"> <td>1</td> <td>2</td> </tr> <tr bgcolor="#5555ff"> <td>3</td> <td>4</td> </tr> </table> </body> </html> Результат:
Задание: Добавить в существующую таблицу столбец и строку, изменить фон. Графический фон таблицы BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. При помощи атрибута BACKGROUND можно задать графический фон ячейки или таблицы целиком. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта. Пример 7:
<html> <head> <title>HTML</title> </head> <body> <table background="img/sea.jpg"> <tr> <td>11111</td> <td>22222</td> </tr> <tr> <td>33333</td> <td>44444</td> </tr> </table> </body> </html> Результат:
Задание: Внесите изменения так, чтобы в таблице отображались её границы. Выравнивание данных в таблице ALIGN - определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию - left. VALIGN - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle. CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом. Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN. Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.
Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине. Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы. Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки. Пример 8: <html> <head> <title>HTML</title> </head> <body> <table border="1" cellpadding="5"> <tr> <td align="right">1111<br>2222</td> <td valign="top" align="center">22222</td> </tr> <tr> <td>Нижняя ячейка</td> <td>Нижняя ячейка</td> </tr> </table> </body> </html> Результат:
Изменение размеров таблицы WIDTH - определяет ширину таблицы. Ширина задается либо в пикселах, либо в
процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора. То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT. При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные. Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки. Пример 9: <html> <head> <title>HTML</title> </head> <body> <table border="1" width="200"> <tr> <td><p>Ширина 200 пикселей</p></td> </tr> </table> <br> <table border="1" width="60%"> <tr> <td><p>Ширина 60%</p></td> </tr> </table> </body>
</html> Результат:
Задание: Постройте такую таблицу, которая бы заполняла всё пространство в браузере. Слияние ячеек таблицы COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1. При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку. Атрибут COLSPAN тэгов <TH>, <TD> позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки. Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца. Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию. Т.к. при выполнении операций слияния очень легко запутаться, то настоятельно рекомендую сделать предварительный эскиз таблицы на бумаге. Пример 10: <html> <head> <title>HTML</title> </head> <body> <table border="1"> <tr> <td rowspan="3">1111</td> <td colspan="2">22222</td> <td colspan="2">33333</td> </tr>
<tr> <td>44444</td> <td colspan="2" rowspan="2">55555</td> <td>66666</td> </tr> <tr> <td>77777</td> <td>88888</td> </tr> <tr> <td colspan="5">99999</td> </tr> </table> </body> </html> Результат:
Задание: Построить таблицу по образцу:
1 3 4 5 6 8 9 10 7 12
Отображение границ таблицы BORDER Задает толщину линии рамки FRAME Определяет набор линий рамки таблицы, которые будут показаны Значение Результат void Все линии отсутствуют above Линия над таблицей below Линия под таблицей rhs Линия справа от таблицы lhs Линия слева от таблицы
hsides Линии над и под таблицей vsides Линии слева и справа от таблицы border Все линии присутствуют (по умолчанию) RULES Определяет набор внутренних линий таблицы, которые будут показаны none Все линии отсутствуют cols Линии между столбцами rows Линии между строками groups Линии между группами столбцов и строк all Все линии присутствуют (по умолчанию) Если значение атрибута BORDER тэга <TABLE> отлично от нуля, то браузер заключает таблицу в рамку и разграничивает соседние строки и столбцы таблицы. При помощи атрибутов FRAME, RULES можно указать какие именно части обрамлений таблицы следует показывать. Пример 11: <html> <head> <title>HTML</title> </head> <body> <table border="1" rules="rows"> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> </table> </body> </html> Результат:
Вложенные таблицы Вложение таблиц одну в другую - очень распространенный прием оформления внешнего вида Вэб-страницы. Прежде всего надо построить главную таблицу, а затем в ее ячейках разместить дочерние таблицы. Определяя таблицы, надо не забывать включать в их описание все закрывающие тэги, содержащие символ косой черты, т.к. пропуск всего одного такого дескриптора исказит таблицу кардинальным образом. Не следует, также, злоупотреблять вложением, т.к. в этом случае существенно замедляется загрузка страницы браузером. Форматирование вложенных таблиц осуществляется по общим правилам, что, собственно и делает страницу привлекательной. Пример 12: <html> <head> <title>HTML</title> </head> <body> <table border="1"> <tr> <td>111</td> <td>111</td> <td> <table border="1" bgcolor="#00ff00"> <tr> <td>01</td> <td>01</td> </tr> <tr> <td>01</td>
<td>01</td> </tr> </table> </td> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> </tr> </table> </body> </html> Результат:
Обтекание таблицы текстом Атрибут ALIGN, используемый для задания признака обтекания таблиц текстом, может принимать два значения - left, right. Первое - заставляет браузер поместить таблицу слева от текста, второе - справа. Если необходимо, чтобы форматированию подвергся определенный фрагмент текста, надо применить тэг <BR> с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой обтекание отменяется. Значения left, right, all атрибута CLEAR позволяет определить, с какой стороны текст далее будет свободен от таблицы. Пример 13: <html> <head> <title>HTML</title> </head> <body>
<table border="1" align="left"> <tr> <td>11</td> <td>11</td> </tr> <tr> <td>11</td> <td>11</td> </tr> </table> <p>Текст обтекает таблицу</p> <br clear="left"> <p>Текст не обтекает таблицу</p> </body> </html> Результат:
Пример 14: <html> <head> <title>HTML</title> </head> <body> <table border="1" cellpadding="5" cellspacing="0"> <tr> <td colspan="2" rowspan="2"> </td> <td colspan="2">Характеристики</td> </tr> <tr> <td>Средний рост, см</td> <td>Средний вес, кг</td>
</tr> <tr align="center"> <td rowspan="2">Пол</td> <td>Мужской</td> <td>177</td> <td>73</td> </tr> <tr align="center"> <td>Женский</td> <td>166</td> <td>65</td> </tr> </table> </body> </html> Результат:
Пример 15: <html> <head> <title>HTML</title> </head> <body> <table width="90%" align="center" border="5" cellpadding="2" cellspacing="0"> <tr valign="center"> <td align="center" colspan="2"><big>Заголовок</big></td> </tr> <tr valign="top"> <td align="left">Данные, выровненные по<br>
левому краю ячейки</td> <td align="right">Данные, выровненные по<br> правому краю ячейки</td> </tr> <tr> <td width="25%">25% ширины таблицы</td> <td width="75%">75% ширины таблицы</td> </tr> </table> </body> </html> Результат:
В этом примере денежные единицы выровнены по десятичной точке. Мы явно установили выравнивание по символу ".". Пример 16: <html> <head> <title>HTML</title> </head> <body> <TABLE border="1"> <COLGROUP> <COL><COL align="char" char="."> <THEAD> <TR><TH>Овощи <TH>Цена за кг <TBODY> <TR><TD>Lettuce <TD>$1 <TR><TD>Silver carrots <TD>$10.50 <TR><TD>Golden turnips <TD>$100.30 </TABLE> </body>
</html> Результат:
Пример 17: <html> <head> <title>HTML</title> </head> <body> <TABLE border="1" summary="В этой таблице приводятся сведения о командировочных расходах в августе в Сан-Хосе и Сиэтле"> <CAPTION> Отчет о командировочных расходах </CAPTION> <TR> <TH></TH> <TH id="a2" axis="расходы">Еда</TH> <TH id="a3" axis="расходы">Гостиницы</TH> <TH id="a4" axis="расходы">Транспорт</TH> <TD>итого</TD> </TR> <TR> <TH id="a6" axis="пункт">Сан-Хосе</TH> <TH></TH> <TH></TH> <TH></TH> <TD></TD> </TR>
<TR> <TD id="a7" axis="дата">25-авг-97</TD> <TD headers="a6 a7 a2">37.74</TD> <TD headers="a6 a7 a3">112.00</TD> <TD headers="a6 a7 a4">45.00</TD> <TD></TD> </TR> <TR> <TD id="a8" axis="дата">26-авг-97</TD> <TD headers="a6 a8 a2">27.28</TD> <TD headers="a6 a8 a3">112.00</TD> <TD headers="a6 a8 a4">45.00</TD> <TD></TD> </TR> <TR> <TD>итого</TD> <TD>65.02</TD> <TD>224.00</TD> <TD>90.00</TD> <TD>379.02</TD> </TR> <TR> <TH id="a10" axis="пункт">Сиэтл</TH> <TH></TH> <TH></TH> <TH></TH> <TD></TD> </TR> <TR> <TD id="a11" axis="дата">27-авг-97</TD> <TD headers="a10 a11 a2">96.25</TD> <TD headers="a10 a11 a3">109.00</TD> <TD headers="a10 a11 a4">36.00</TD> <TD></TD> </TR> <TR> <TD id="a12" axis="дата">28-авг-97</TD> <TD headers="a10 a12 a2">35.00</TD>
<TD headers="a10 a12 a3">109.00</TD> <TD headers="a10 a12 a4">36.00</TD> <TD></TD> </TR> <TR> <TD>итого</TD> <TD>131.25</TD> <TD>218.00</TD> <TD>72.00</TD> <TD>421.25</TD> </TR> <TR> <TH>Всего</TH> <TD>196.27</TD> <TD>442.00</TD> <TD>162.00</TD> <TD>800.27</TD> </TR> </TABLE> </body> </html> Результат: