Само определение ТАБЛИЦА у нас в сознании ассоциируется как некий набор данных, как правило, математических, распределенных по строкам и столбцам. В HTML же таблицы разбивают часть HTML документа на составляющие для удобства размещения информации на странице. Представь всю html-страницу в виде таблицы, где, скажем, вверху логотип, меню слева, основная информация в среднем столбце, дополнительные ссылки справа, а внизу статистика. ЛОГОТИП |
| Меню | Основная информация Основная информация
Основная информация Основная информация
Основная информация Основная информация | Ссылки |
Статистика |
Количество столбцов и строк выбирается по необходимости. Вложения в ячейки таблицы могут быть любыми: текст, изображения, другие таблицы, фреймы и т.п. Таблица в HTML создается тегами <TABLE></TABLE>, строки таблицы тегами <TR></TR>,а столбцы таблицы тегами <TD></TD>, которые вложены в теги <TR>.
К примеру, таблица из одной строки и двух столбцов в HTML будет выглядеть так:<table>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table> | На экране монитора
| Первая ячейка | Вторая ячейка |
|
По умолчанию таблица без рамок. Используя атрибут border выведем рамки, тогда таблица будет выглядеть так:<table border="1">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table> | На экране монитора
| Первая ячейка | Вторая ячейка |
|
Для определения расстояния между ячейками используется атрибут cellspacing, таблица будет выглядеть так:<table border="1" cellspacing="10">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table> | На экране монитора
| Первая ячейка | Вторая ячейка |
|
Чтобы задать отступы внутри ячеек применяется атрибут cellpadding, таблица будет выглядеть так:<table border="1" cellspacing="10" cellpadding="10">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table> | На экране монитора
| Первая ячейка | Вторая ячейка |
|
Для обьединения ячеек в HTML таблицах применяются атрибуты colspan (обьединение по горизонтали) и rowspan (обьединение по вертикали). Чтобы было наглядно, создадим таблицы с указанными атрибутами:
<table>
<tr>
<td colspan="2">colspan</td>
</tr><tr>
<td>colspan</td>
<td>colspan></td>
</tr></table>
| | простая | таблица |
| простая | таблица |
<table ><tr>
<td>простая</td>
<td>таблица</td>
</tr><tr>
<td>простая</td>
<td>таблица</td>
</tr></table>
| <table>
<tr>
<td rowspan="2">rowspan</td>
<td>rowspan</td>
</tr><tr>
<td>rowspan</td>
</tr>
</table> |
Размеры таблицы и ячеек устанавливаются атрибутами width (ширина) и height (высота). Их значения задаются в процентах или пиксеях.<table width="75%" height="25%"> <table width="600" height="200">
<td width="35%" height="5%"> <td width="160" height="20">
Горизонтальное выравнивание таблицы и содержимого ячеек производится с помощью атрибута align. Его значения: center (по центру), left (по левому краю) и right (по правому краю).<table align="left"> <table align="center"> <table align="right">
Для вертикального выравнивания содержимого ячеек предназначен атрибут valign, у которого есть следующие значения:
baseline — по базовой линии;
bottom — по нижнему краю;
middle — по середине (значение по умолчанию);
top — по верхнему краю.| <td valign="top"></td> | top |
| top |
| | <td valign="middle"></td> | middle |
| middle |
| | <td valign="bottom"></td> | bottom |
| bottom |
|
Цвет фона всей таблицы или отдельных ячеек устанавливается атрибутом bgcolor.<table bgcolor="#E0E0E0"> <td bgcolor="#00FFFF">содержимое ячейки< /td>
ЛОГОТИП |
| Меню | Основная информация Основная информация
Основная информация Основная информация
Основная информация Основная информация | Ссылки |
Статистика |
Чтобы создать фон всей таблицы или отдельных ячеек графическим изображением, используется атрибут background<table background="путь до картинки"> <td background="путь до картинки">
Л о г о т и п |
| Меню | Основная информация Основная информация | Ссылки |
Статистика |
Создать таблицу и представить ее в декоративном обрамлении можно посредством тегов CSS, к примеру:
<table border="1" cellpadding="5" cellspacing="5" width="100%" style="background-color:#00FFFF;border:5px dashed #000;">
<tr>
<th style="text-align:center">Заголовок 1</th>
<th style="text-align:center">Заголовок 2</th>
<th style="text-align:center">Заголовок 3</th>
</tr>
<tr>
<td width="15%"> Выш текст 1</td>
<td>Текст ваш 2 Текст ваш 2 </td>
<td width="15%"> Выш текст 3 </td>
</tr>
</table>| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|
| Выш текст 1 Выш текст 1 | Текст ваш 2 Текст ваш 2 Текст ваш 2 Текст ваш 2 Текст ваш 2 | Выш текст 3 Выш текст 3 |
Как я уже отмечал выше, в ячейку можно вставить любые другие данные: текст, картинки или другую таблицу. Именно поэтому таблицы так удобны для разметки WEB страниц на отдельные блоки.КОД ЛЮБОГО ЦВЕТА ВЫ МОЖЕТЕ ВЫБРАТЬ ЗДЕСЬ
...Дерзайте...
