Начало
Урок 9: Знакомимся с таблицами в html
Таблицы HTML - полезная вещь. Как правило их используют не только как именно таблицы, а чтобы создать невидимый каркас, где можно расположить текст как вам нужно. Раньше структура всех сайтов была табличная, но сегодня они приобретают структуру на дивах (при помощи <div> и css . Ниже приведен пример табличной структуры сайта:
Шапка сайта(логотип и другое) |
|||
|
Содержание сайта |
Реклама |
|
Подвал сайта |
|||
Чтобы построить простейшую таблицу в HTML , нам понадобятся минимум три элемента.
TABLE - Элемент применяется для создания html таблицы и должен иметь открывающий и закрывающий теги. Таблица html по умолчанию выводится без рамки и разметка происходит автоматически в зависимости от объема ее наполнения. Также здесь используется атрибут BORDER чтобы задать толщину рамки таблицы.
TR (Table Row) - Используется для создания нового ряда таблицы. Обязателен закрывающий тег.
TD (Table Data) - Создает новую ячейку ряда таблицы. Закрывающий тег обязателен.
Создаем таблицу из двух рядов и двух столбцов:
<table border="1">
<tr>
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
В браузере увидим:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
В общем думаю понятно, начало таблицы <table> делее <tr> обозначающий начало нового ряда. В первом ряду прописаны две ячейки: <td>ряд 1 ячейка1</td> и <td>ряд1 ячейка2</td> и ряд закрывается тегом </tr>, затеи сразу идет тег <tr> обозначающий новый ряд, и в нем также две ячейки. Вот так.
А для объединения ячеек существует еще два атрибута.
COLSPAN – задает количество столбцов для данной ячейки. Имеет по умолчанию значение 1.
ROWSPAN – задает количество рядов для данной ячейки. По умолчанию имеет значение 1.
Первый пример:
<table border="1">
<tr>
<td colspan="2">ряд 1 ячейка 1+2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
Результат в браузере:
| ряд 1 ячейка 1+2 | |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Второй пример:
<table border="1">
<tr>
<td rowspan="2">Ячейка 1, ряд 1+2</td>
<td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
В браузере видим:
| Ячейка 1, ряд 1+2 | ряд1 ячейка2 |
| ряд 2 ячейка 2 |
Как видите здесь нет ничего сложного, просто внимательно присмотритесь к примерам изложенным выше и бутет все понятно.
Еще четыре полезных атрибута:
CELLPADDING – задает расстояние (в пикселах) между рамкой всех ячеек таблицы и её содержимым. .
CELLSPACING – задает расстояние (также пикселах) между соединёнными ячейками html таблицы.
WIDTH – задает ширину html таблицы. Ширину можно задавать в пикселях или процентах ( по отношению к ширине окна браузура). По умолчанию WIDTH опредилится автоматически и будет зависить от объема материала в таблице.
HEIGHT – задает высоту html таблицы. Высоту также можно задавать в пикселях или в процентых. Также по умолчанию HEIGHT опредилится автоматически и будет зависить от объема материала в таблице..
Первый пример:
<table border="1" cellpadding="10">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
В браузере видим:
|
Второй пример::
<table border="1" cellspacing="10">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
В браузере видим:
|
Третий пример:
<table border="1" width="400" height="100">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
В браузере видим:
|
И последние атрибуты:
ALIGN – задает способ горизонтального выравнивания таблицы или материала ячеек. Значения бывают: left, center, right. По умолчанию определяет значение – left.
VALIGN – задает способ вертикального выравнивания таблицы или материала ячеек. Возможные значения: top,top, bottom, middle., middle (top - прижать к верху, bottom - к низу, а middle - установка посередине).
BGCOLOR – задает цвет фона ячеек html таблицы. Задаем RGB - значением в шестнадцатиричной системе или одним из базовых цветов (16 цветов).
BACKGROUND – с его помощью можно заполнить фон таблицы картинкой. Нужно просто указать в значение URL изображения.
Небольшой комментарий: Если вы задаете цвет фона (или рисунок фона) в элементе TABLE , то этот цвет(рисунок) будет распространятся на все ячейки таблицы. А если вы хотите задать цвет(рисунок) фона для отдельной ячейки, вам необходимо прописать для неё соответствующий атрибут.
Пример на эту тему:
<!-- задаем ширину , высоту, рамку, выравнивание по центру и
bgcolor="#FFF8D2">
<tr>
<!-- эту ячейку оставляем по умолчанию-->
<td>ряд 1 ячейка1</td>
<!-- содержимое горизонтально выравниваем по центру, вертикально
- прижимаем к верху-->
<td align="center" valign="top">ряд1 ячейка2</td>
</tr>
<tr>
<!-- содержимое горизонтально выравниваем по центру, вертикально
- прижимаем к низу-->
<td align="center" valign="bottom">ряд 2 ячейка 1</td>
<!-- содержимое горизонтально выравниваем по правому краю,
вертикально - посередине, и меняем фоновый цвет-->
<td align="right" valign="middle" bgcolor="#33FF99">ряд 2 ячейка
2</td>
</tr>
</table>
В браузере увидим:
|
И второй пример:
<!-- задаем ширину , высоту, рамку, фоновый цвет всей таблицы,
выравнивание оставляем по умолчанию(по левому краю)-->
<table width="400" height="100" border="1" bgcolor="#FFF8D2">
<tr>
<!-- горизонтальное-по центру, вертикально по умолчанию(по
центру)-->
<td align="center"> ряд 1 ячейка1 </td>
<!-- горизонтальное-по центру, вертикально по умолчанию(по
центру) и делаем фоновый рисунок-->
<td align="center" background="pchela.jpg"> ряд1 ячейка2 </td>
</tr>
<tr>
<!-- горизонтальное-по центру, вертикально по умолчанию(по
центру)-->
<td align="center"> ряд 2 ячейка 1 </td>
<!-- горизонтальное-по центру, вертикально по умолчанию(по
центру) и меняем фоновый цвет-->
<td align="center" bgcolor="#33FF99">ряд 2 ячейка 2</td>
</tr>
</table>
В браузере увидим:
|
Комментарий: Картинка будет дублироваться если она меньше ячейки . А если рисунок больше ячейки то отобразится только та часть которая в неё поместятся(это можно видеть в примере и дублируется и отобразилась не вся пчела) .
Вот, с таблицами в принципе всё. Теперь у вас должно всё получится.
↑ Вверх ↑
См. также
Следующий - Урок 10:Что же такое html формы и зачем нужны
Предыдущий - Урок 8: Цвет текста и фона
