НОУ ИНТУИТ | Основы работы с HTML. Лекция 4: Таблицы

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 149 студентам

| Поделиться |

Поддержать программу

Аннотация: В этом уроке рассказывается о способах представления текстовой информации в табличном виде, и о применении таблиц в web-дизайне.

Ключевые слова: анализ, тег, контейнер, HTML, заголовки, ячейка

В 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>

<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>
</body>
</html>

Пример выполнения данного HTML-кода

Для тега 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-кода

Дальше >>

Web-дизайн

Основы работы с HTML

Таблицы

Примеры

Вопросы и ответы

Авторизоваться

Web-дизайн

Основы работы с HTML

Таблицы

Примеры

Вопросы и ответы