Таблицы html-страницы
Чаще всего в полиграфии таблицы используются для того, чтобы разместить как можно больше информации на ограниченной площади печатного издания.
В HTML таблицы играют куда более важную роль. Таблицы в HTML выполняют функцию не столько структурирования данных, сколько функцию дизайна html-страницы. При помощи таблиц можно создать практически сколько угодно сложный дизайн html-страницы.
HTML-таблицы создаются в 4 этапа:
- TABLE - формирует собственно таблицу (парный тег);
- TR - формирует строку таблицы (парный тег), тег TR должен быть обязательно вложен в TABLE;
- TH, TD - формирует заголовок таблицы (необязательный тег) и ячейки таблицы (парные теги), теги TH, TD должны быть обязательно вложены в тег TR;
- Заголовок и ячейки таблицы заполняются информацией (текстом, картинками...).
ПРИМЕР 1:
<table> <tr> <th>Параметр</th> <th>Значение</th> </tr> <tr> <td>Длина (метр)</td> <td>10</td> </tr> <tr> <td>Ширина (метр)</td> <td>5</td> </tr> </table> |
Важно понимать, что в ячейки таблицы можно помещать любую информацию в любых объемах - текст, графику, другие таблицы, звуковые файлы, файлы видеоизображений.
Правила, которые выполняет браузер при выводе таблицы на экран монитора:
- Размеры таблицы и ее ячеек автоматически изменяются так, чтобы полностью вместить их содержимое;
- Между границами ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ;
- Заголовок таблицы отображается полужирным шрифтом и выравнивается по центру;
- По умолчанию рамки вокруг таблицы и между ячейками не рисуются.
| ВАЖНО!
Обязательные правила, которые нельзя нарушать:
|
Заголовок и секции таблицы
Такие дополнительные возможности HTML, как создание заголовка и секций таблицы, применяются на практике не часто, но о них надо знать.
Заголовок таблицы создается при помощи тега CAPTION. Текст, помещенный в тег CAPTION, всегда выводится сверху таблицы, и выравнивается по центру. Обычно тег CAPTION идет сразу же за открывающим тегом TABLE, но может стоять в любом месте тела HTML-страницы.
Логически таблицу можно разбить при помощи трех тегов:
- THEAD - секция заголовка таблицы, содержит строку с ячейками заголовка таблицы;
- TBODY - секция тела таблицы, содержит строки с ячейками, в которых находится основная информация;
- TFOOT - секция завершения (подвала) таблицы, содержит строку с ячейками итоговых данных.
Браузер никак не отображает теги 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:
- rowspan - объединяет соседние ячейки по вертикали (в столбцах таблицы);
- colspan - объединяет соседние ячейки по горизонтали (в строках таблицы).
Стандартная таблица размером 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-редакторы позволяют создавать таблицы с объединением ячеек в интерактивном режииме, значительно упрощая работу. Для создания таблицы с объединением ячеек в "ручном режиме", надо выучить следующие правила:
- объединение ячеек таблицы по горизонтали:
- найти в html-коде страницы тег TD, который соответствует первой из объединяемых ячеек, если считать слева направо;
- вписать в найденный тег TD атрибут COLSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них;
- удалить теги TD, которые создают остальные обединяемые ячейки в данной строке.
- объединение ячеек таблицы по вертикали:
- найти в html-коде страницы тег TR, строку таблицы в которой находится первая из из объединяемых ячеек, если считать сверху вниз;
- найти в коде этой строки тег TD, который соответствует первой из объединяемых ячеек;
- вписать в найденный тег TD атрибут ROWSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них;
- удалить теги TD в последующих строках, которые создают остальные обединяемые ячейки в данном столбце.
Атрибуты тегов 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> |
