Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Работа и отдых в Интернете" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Журнал Начинающего Программиста
ОСНОВЫ РАБОТЫ С HTML Лекция 4. Таблицы
В этом уроке
рассказывается о способах представления текстовой информации в
табличном виде,
и о применении таблиц в web-дизайне. В web-дизайне таблицы являются одним из основных методов структурирования информации. Они представляют данные в виде удобных для восприятия колонок и строк, что значительно упрощает анализ информации. С их помощью можно легко отделить одну часть страницы от другой. Таблицы в настоящий момент являются пожалуй основным элементом дизайна Web-страниц. Основным тегом для обозначения таблицы является <table>. Элемент TABLE представляет собой тег-контейнер, в котором размещается содержимое таблицы. Построение таблицы осуществляется по строкам, для обозначения которых применяется контейнер TR. Внутри контейнера строк помещаются контейнеры для обозначения ячеек. Стандарт HTML определяет два типа контейнеров для обозначения ячеек <th> и <td>. Первый предназначен для обозначения заголовков, а второй для данных в ячейках. Отличие этих двух элементов заключается лишь в том как их содержимое отображается браузером, заголовки большинство браузеров выделяют полужирным шрифтом и центрируют в своих ячейках. Ячейка данных может содержать текст, изображения, списки, параграфы, формы, горизонтальные линейки, таблицы и т. д. Примеры Рассмотрим вышеизложенное на примерах различного вида таблиц. (копировать всё внутри красных линий) **************************************************************************** <html> <body> <p> Каждая таблица начинается с тега table. Каждая строка таблицы начинается с тега tr. Каждый элемент данных таблицы начинается с тега td. </p> **************************************************************************** <h1>Это пример простейшей таблицы, содержащей одну строку и одну ячейку.</h1> <table border="1"> <tr> <td>Одна строка и одна ячейка</td> </tr> </table> **************************************************************************** <h1>Одна строка и три столбца:</h1> <table border="1"> <tr> <td> столбец 1</td> <td> столбец 2</td> <td> столбец 3</td> </tr> </table> **************************************************************************** <h1>Две строки и три столбца:</h1> <table border="1"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> </table> **************************************************************************** <h1>Рамка таблицы</h1> <html> <body> <h1>Обычная рамка:</h1> <table border="1"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table> **************************************************************************** <h1>Толстая рамка:</h1> <table border="10"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table> **************************************************************************** <table border="1"> <tr> <td>строка 1, ячейка 1</td> <td>строка 1, ячейка 2</td> </tr> <tr> <td>строка 2, ячейка 1</td> <td>строка 2, ячейка 2</td> </tr> </table> **************************************************************************** Для тега table определены следующие аттрибуты. ∙ align - определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left. ∙ valign - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle. ∙ border - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет. ∙ cellpadding - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом. ∙ cellspacing - определяет расстояние (в пикселах) между границами соседних ячеек. ∙ width - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. ∙ height - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. ∙ bgcolor - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. ∙ background - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо. Если необходимо сделать ячейку таблицы пустой, то разместите в ней неразрывный пробел Такие элементы как <thead>,<tbody> и <tfoot> используются редко в связи с тем, что не все браузеры их поддерживают. Для тегов <td> и <th> очень полезными являются атрибуты colspan и rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным. Продемонстрируем на примере. <html> <body> **************************************************************************** <h4>Правильное применение colspan:</h4> <table border="1"> <tr> <td colspan="2">100</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>Неправильное применение colspan:</h4> <table border="1"> <tr> <td colspan="2">100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>Правильное применение rowspan:</h4> <table border="1"> <tr> <td rowspan="2">100</td> <td>200</td> <td>300</td> </tr> <tr> <td>500</td> <td>600</td> </tr> </table> <h4>Неправильное применение rowspan:</h4> <table border="1"> <tr> <td rowspan="2">100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> Дополнительные
примеры
Таблица без рамки <html> <body> <h4>Эта таблица не имеет рамки:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> **************************************************************************** <h4>И эта таблица не имеет рамки:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> Заголовки в таблице <html> <body> <h4>Заголовки таблицы:</h4> <table border="1"> <tr> <th>Имя </th> <th>Телефон </th> <th>Телефон </th> </tr> <tr> <td>Иван Петрович Иванов</td> <td>8 946 202 55 55 </td> <td>463 72 85 </td> </tr> </table> **************************************************************************** <h4>Вертикальные заголовки:</h4> <table border="1"> <tr> <th>Фамилия:</th> <td>Иван Петрович Иванов</td> </tr> <tr> <th>Телефон :</th> <td>463 72 85</td> </tr> <tr> <th>Телефон:</th> <td>463 72 85</td> </tr> </table> </body> </html> Пустые ячейки <html> <body> <table border="1"> <tr> <td>Некоторый текст </td> <td>Некоторый текст </td> </tr> <tr> <td></td> <td>Некоторый текст </td> </tr> </table> <p> Как можно видеть, одна из ячеек не имеет рамки. Это потому, что она пустая. Попробуйте вставить в ячейку пробел. Она по-прежнему не будет иметь рамки. </p> <p> Хитрость состоит в том, чтобы вставить в ячейку неразрывный пробел. </p> <p>Неразрывный пробел является символьным объектом. </p> <p>Объект неразрывного пробела начинается с амперсанда ("&"), затем следуют буквы "nbsp", и в конце стоит точка с запятой (";") </p> <p> </p> </body> </html> Заглавие таблицы <html> <body> <h4> Эта таблица имеет заглавие и толстую рамку: </h4> <table border="6"> <caption>Заглавие</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> Ячейки таблицы, которые охватывают более одной строки/столбца <html> <body> <h4>Ячейка, которая охватывает два столбца:</h4> <table border="1"> <tr> <th>Организация</th> <th colspan="2">Телефон</th> </tr> <tr> <td>LORD EXPERT</td> <td>570-815-147</td> <td>570-815-147</td> </tr> </table> **************************************************************************** <h4>Ячейка, которая охватывает две строки:</h4> <table border="1"> <tr> <th>Организация:</th> <td> LORD EXPERT</td> </tr> <tr> <th rowspan="2">Телефон:</th> <td>570-815-147</td> </tr> <tr> <td>570-815-147</td> </tr> </table> </body> </html> Теги внутри таблицы <html> <body> <table border="1"> <tr> <td> <p>Это параграф </p> <p>Это другой параграф </p> </td> <td>Эта ячейка содержит таблицу: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>Эта ячейка содержит список <ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ul> </td> <td>КОНЕЦ</td> </tr> </table> </body> </html> Отступ от рамки до содержимого ячейки <html> <body> <h4>Без отступа:</h4> <table border="1"> <tr> <td>Первая </td> <td>Строка</td> </tr> <tr> <td>Вторая </td> <td>Строка</td> </tr> </table> **************************************************************************** <h4>С отступом (cellpadding) :</h4> <table border="1" cellpadding="10"> <tr> <td>Первая</td> <td>Строка</td> </tr> <tr> <td>Вторая</td> <td>Строка</td> </tr> </table> </body> </html> Расстояние между ячейками <html> <body> <h4>Расстояние между ячейками не задано:</h4> <table border="1"> <tr> <td>Первая </td> <td>Строка </td> </tr> <tr> <td>Вторая </td> <td>Строка </td> </tr> </table> **************************************************************************** <h4>Расстояние между ячейками (cellspacing) задано:</h4> <table border="1" cellspacing="10"> <tr> <td>Первая </td> <td>Строка</td> </tr> <tr> <td>Вторая </td> <td>Строка </td> </tr> </table> </body> </html> Использование в таблице фонового цвета или фонового изображения <html> <body> <h4>Фоновый цвет (bgcolor):</h4> <table border="1" bgcolor="red"> <tr> <td>Первая </td> <td>Строка </td> </tr> <tr> <td>Вторая </td> <td>Строка </td> </tr> </table> **************************************************************************** <h4>Фоновое изображение (background):</h4> <table border="1" background="bg.jpg"> <tr> <td>Первая</td> <td>Строка</td> </tr> <tr> <td>Вторая </td> <td>Строка </td> </tr> </table> </body> </html> Фоновый цвет или фоновое изображение в ячейке таблицы <html> <body> <h4>Ячейки с фоном:</h4> <table border="1"> <tr> <td bgcolor="red">Первая</td> <td>Строка</td> </tr> <tr> <td background="bg.jpg"> Вторая</td> <td>Строка</td> </tr> </table> </body> </html> Выравнивание содержимого в ячейках таблицы <html> <body> <table width="360" border="1"> <tr> <th align="left">Опубликовано статей</th> <th align="center">2009</th> <th align="center">2010</th> </tr> <tr> <td align="left">Базы данных</td> <td align="center">25</td> <td align="center">37</td> </tr> <tr> <td align="left">Программирование</td> <td align="center">42</td> <td align="center">54</td> </tr> <tr> <td align="left">Интернет-технологии</td> <td align="right">22</td> <td align="right">34</td> </tr> <tr> <th align="left">всего</th> <th align="right">89</th> <th align="right">110</th> </tr> </table> </body> </html> Атрибут frame <html> <body> <p> Если никакие границы кадра таблицы в этих примерах не видны, то используемый браузер слишком старый, или не поддерживает их. </p> <h4> frame="border":</h4> <table frame="border"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table> **************************************************************************** <h4> frame="box":</h4> <table frame="box"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table> **************************************************************************** <h4>frame="void":</h4> <table frame="void"> <tr> <td>Первая </td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table> **************************************************************************** <h4>frame="above":</h4> <table frame="above"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table> **************************************************************************** <h4>frame="below":</h4> <table frame="below"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table> **************************************************************************** <h4>frame="hsides":</h4> <table frame="hsides"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table> **************************************************************************** <h4>frame="vsides":</h4> <table frame="vsides"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table> **************************************************************************** <h4>frame="lhs":</h4> <table frame="lhs"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table> **************************************************************************** <h4>frame="rhs":</h4> <table frame="rhs"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table> </body> </html> Теги таблиц
Архив рассылки
|
| В избранное | ||
