Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры


   

Таблицы html-страницы

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

В HTML таблицы играют куда более важную роль. Таблицы в HTML выполняют функцию не столько структурирования данных, сколько функцию дизайна html-страницы. При помощи таблиц можно создать практически сколько угодно сложный дизайн html-страницы.

HTML-таблицы создаются в 4 этапа:

  1. TABLE - формирует собственно таблицу (парный тег);
  2. TR - формирует строку таблицы (парный тег), тег TR должен быть обязательно вложен в TABLE;
  3. TH, TD - формирует заголовок таблицы (необязательный тег) и ячейки таблицы (парные теги), теги TH, TD должны быть обязательно вложены в тег TR;
  4. Заголовок и ячейки таблицы заполняются информацией (текстом, картинками...).
ПРИМЕР 1:

<table>
<tr>
	<th>Параметр</th>
	<th>Значение</th>
</tr>
<tr>
	<td>Длина (метр)</td>
	<td>10</td>
</tr>
<tr>
	<td>Ширина (метр)</td>
	<td>5</td>
</tr>
</table>

Смотреть пример в браузере..

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

Правила, которые выполняет браузер при выводе таблицы на экран монитора:

ВАЖНО!

Обязательные правила, которые нельзя нарушать:

  • Тег TR должен находиться только внутри тега TABLE;
  • Теги TD, TH должны находиться только внутри тега TR;
  • Содержимое таблицы должно находиться только внутри тегов TD, TH;
  • Ячейка таблицы не должна быть пустой, иначе она не будет отображаться, если необходимо, чтобы ячейка была пустой, в нее следует поместить символ пробела (&nbsp;).

Заголовок и секции таблицы

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

Заголовок таблицы создается при помощи тега CAPTION. Текст, помещенный в тег CAPTION, всегда выводится сверху таблицы, и выравнивается по центру. Обычно тег CAPTION идет сразу же за открывающим тегом TABLE, но может стоять в любом месте тела HTML-страницы.

Логически таблицу можно разбить при помощи трех тегов:

Браузер никак не отображает теги THEAD, TBODY, TFOOT. Они всего лишь делят таблицу на логические части.

ПРИМЕР 2:

<table>
 <caption>Динамика цен</caption>
 <THEAD>
  <tr>
	<th>Год</th>
	<th>Стоимость</th>
  </tr>
 </THEAD>
 <TBODY>
  <tr>
	<td>2010</td>
	<td>100</td>
  </tr>
  <tr>
	<td>2011</td>
	<td>120</td>
  </tr>
  <tr>
	<td>2012</td>
	<td>130</td>
  </tr>
  <tr>
	<td>2013</td>
	<td>110</td>
  </tr>
 </TBODY>
 <TFOOT>
  <tr>
	<td>Среднее</td>
	<td>115</td>
  </tr>
 </TFOOT>
</table>

Смотреть пример в браузере..

Объединение ячеек таблицы

Вид стандартной таблицы:

1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19 20

Вариант таблицы с объединением ячеек:

1+6 2+3+4+5
7 8 9 10
11 12+13 14 15+20
16 17 18 19


HTML-код таблицы с объединением ячеек:

<table border="1">
<tr>
	<td rowspan="2">1+6</td>
	<td colspan="4">2+3+4+5</td>
</tr>
<tr>
	<td>7</td>
	<td>8</td>
	<td>9</td>
	<td>10</td>
</tr>
<tr>
	<td>11</td>
	<td colspan="2">12+13</td>
	<td>14</td>
	<td rowspan="2">15+20</td>
</tr>
<tr>
	<td>16</td>
	<td>17</td>
	<td>18</td>
	<td>19</td>
</tr>
</table>

Ячейки в HTML объединяются при помощи двух атрибутов тега TD:

Стандартная таблица размером 2х2:

1 2
3 4


HTML-код таблицы 2х2:

<table border="1">
<tr>
	<td>1</td>
	<td>2</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
</tr>
</table>

Таблица с объединением ячеек в строке:

1+2
3 4


HTML-код таблицы:

<table border="1">
<tr>
	<td colspan="2">1+2</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
</tr>
</table>

Таблица с объединением ячеек в столбце:

1+3 2
4


HTML-код таблицы:

<table border="1">
<tr>
	<td rowspan="2">1+3</td>
	<td>2</td>
</tr>
<tr>
	<td>4</td>
</tr>
</table>

Многе HTML-редакторы позволяют создавать таблицы с объединением ячеек в интерактивном режииме, значительно упрощая работу. Для создания таблицы с объединением ячеек в "ручном режиме", надо выучить следующие правила:

Атрибуты тегов TABLE, TR, TD

align - выравнивание по горизонтали: по левому краю (значение по умолчанию); по центру; по правому краю.

<TABLE align = left|center|right>
<TR align = left|center|right>
<TD align = left|center|right>

width - ширина таблицы, строки или ячейки (значение можно задавать в пикселях или в процентах).

<TABLE width = 90%>
<TR width = 150>
<TD width = 50>

valign - выравнивание содержимого ячеек по вертикали: по середине (значение по умолчанию); по верху; по низу; по базовой линии.

<TR valign = center|top|bottom|baseline>
<TD valign = center|top|bottom|baseline>

height - высота строки таблицы (пиксели или проценты).

<TR height = 200>

cellpadding - расстояние между содержимым ячейки и ее границей (пиксели).

cellspacing - расстояние между ячейками таблицы.

<TABLE cellpadding=5; cellspacing=10>

bgcolor - цвет фона таблицы, строки или ячейки.

<TABLE bgcolor = red>
<TR bgcolor = blue>
<TD bgcolor = white>

background - файл фонового изображения для таблицы или отдельной ячейки.

<TABLE background = "image.ipg">
<TD background = "image.png">

border - толщина линий таблицы.

<TABLE border = 2>

bordercolor - цвет линий таблицы, строки или ячейки.

<TABLE bordercolor = red>
<TR bordercolor = blue>
<TD bordercolor = white>
ПРИМЕР 3:

<table border="2" bordercolor="#800000" width="250" bgcolor="#808000">
 <caption>Динамика цен</caption>
 <THEAD>
  <tr align="center">
	<th>Год</th>
	<th>Стоимость</th>
  </tr>
 </THEAD>
 <TBODY>
  <tr >
	<td>2010</td>
	<td>100</td>
  </tr>
  <tr>
	<td>2011</td>
	<td>120</td>
  </tr>
  <tr>
	<td>2012</td>
	<td>130</td>
  </tr>
  <tr>
	<td>2013</td>
	<td>110</td>
  </tr>
 </TBODY>
 <TFOOT>
  <tr>
	<td>Среднее</td>
	<td>115</td>
  </tr>
 </TFOOT>
</table>

Смотреть пример в браузере..


TOP ↑