Шаг девятый
Таблицы html.
Html таблицы - Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на дивах (с помощью <div> и CSS ).
<table></table> - Элемент для создания таблицы. По умолчанию не имеет толщины линий. Выставляем значение border="1", это означает, что толщина линий будет 1 пиксель. Границы таблиц определяются по содержимому.
<tr></tr> - Создает новый ряд таблицы.
<td></td> - Начинает и заканчивает каждую ячейку ряда.
Например:
<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 ячейка
Также можно объединить ячейки.
colspan - объединит 2 ячейка в ряду.
rowspan - объединит 2 ряда.
Пример 1:
<table border="1">
<tr>
<td colspan="2">1 ряд ячейка + ячейка.</td>
</tr>
<tr>
<td>2 ряд, 1 ячейка</td><td>2 ряд, 2 ячейка</td>
</tr>
</table>
1 ряд ячейка + ячейка. 2 ряд, 1 ячейка 2 ряд, 2 ячейка
Пример 2:
<table border="1">
<tr>
<td rowspan="2">1 ячейка, ряд + ряд.</td>
<td>2 ряд, 1 ячейка</td>
</tr>
<tr>
<td>2 ряд, 2 ячейка</td>
</tr>
</table>
1 ячейка, ряд + ряд. 2 ряд, 1 ячейка 2 ряд, 2 ячейка
cellpadding - определяет расстояние в пикселях между рамкой и содержимым в ней.
cellspacing - определяет расстояние в пикселях между границей соседних ячеек.
width - определяет ширину таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
height - определяет высоту таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
Пример 1:
<table border="1" cellpadding="20" cellspacing="10">
<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 ячейка
Пример 2:
<table border="1" cellpadding="20" width="500" height="400">
<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 ячейка
Еще у таблицы присутствуют четыре важных атрибута.
align - определяет горизонтально положение таблицы или содержимое ячеек таблицы.
valign - определяет вертикальное положение таблицы или содержимое ячеек таблицы.
bgcolor - цвет фона ячеек таблицы и ячеек.
background - фоновое изображение ячеек и таблицы.
Основываясь на эти атрибуты можно создать достойный каркас страницы.
<table width="600" height="900" border="1">
<tr>
<td colspan="2" height="250">Шапочка сайта</td>
</tr>
<tr>
<td width="600">Страница</td><td>Навигация<br> или реклама</td>
</tr>
</table>
<table></table> - Элемент для создания таблицы. По умолчанию не имеет толщины линий. Выставляем значение border="1", это означает, что толщина линий будет 1 пиксель. Границы таблиц определяются по содержимому.
<tr></tr> - Создает новый ряд таблицы.
<td></td> - Начинает и заканчивает каждую ячейку ряда.
Например:
<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 ячейка
Также можно объединить ячейки.
colspan - объединит 2 ячейка в ряду.
rowspan - объединит 2 ряда.
Пример 1:
<table border="1">
<tr>
<td colspan="2">1 ряд ячейка + ячейка.</td>
</tr>
<tr>
<td>2 ряд, 1 ячейка</td><td>2 ряд, 2 ячейка</td>
</tr>
</table>
1 ряд ячейка + ячейка. 2 ряд, 1 ячейка 2 ряд, 2 ячейка
Пример 2:
<table border="1">
<tr>
<td rowspan="2">1 ячейка, ряд + ряд.</td>
<td>2 ряд, 1 ячейка</td>
</tr>
<tr>
<td>2 ряд, 2 ячейка</td>
</tr>
</table>
1 ячейка, ряд + ряд. 2 ряд, 1 ячейка 2 ряд, 2 ячейка
cellpadding - определяет расстояние в пикселях между рамкой и содержимым в ней.
cellspacing - определяет расстояние в пикселях между границей соседних ячеек.
width - определяет ширину таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
height - определяет высоту таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
Пример 1:
<table border="1" cellpadding="20" cellspacing="10">
<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 ячейка
Пример 2:
<table border="1" cellpadding="20" width="500" height="400">
<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 ячейка
Еще у таблицы присутствуют четыре важных атрибута.
align - определяет горизонтально положение таблицы или содержимое ячеек таблицы.
valign - определяет вертикальное положение таблицы или содержимое ячеек таблицы.
bgcolor - цвет фона ячеек таблицы и ячеек.
background - фоновое изображение ячеек и таблицы.
Основываясь на эти атрибуты можно создать достойный каркас страницы.
<table width="600" height="900" border="1">
<tr>
<td colspan="2" height="250">Шапочка сайта</td>
</tr>
<tr>
<td width="600">Страница</td><td>Навигация<br> или реклама</td>
</tr>
</table>
<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 ячейка
Также можно объединить ячейки.
colspan - объединит 2 ячейка в ряду.
rowspan - объединит 2 ряда.
Пример 1:
<table border="1">
<tr>
<td colspan="2">1 ряд ячейка + ячейка.</td>
</tr>
<tr>
<td>2 ряд, 1 ячейка</td><td>2 ряд, 2 ячейка</td>
</tr>
</table>
1 ряд ячейка + ячейка. 2 ряд, 1 ячейка 2 ряд, 2 ячейка
Пример 2:
<table border="1">
<tr>
<td rowspan="2">1 ячейка, ряд + ряд.</td>
<td>2 ряд, 1 ячейка</td>
</tr>
<tr>
<td>2 ряд, 2 ячейка</td>
</tr>
</table>
1 ячейка, ряд + ряд. 2 ряд, 1 ячейка 2 ряд, 2 ячейка
cellpadding - определяет расстояние в пикселях между рамкой и содержимым в ней.
cellspacing - определяет расстояние в пикселях между границей соседних ячеек.
width - определяет ширину таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
height - определяет высоту таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
Пример 1:
<table border="1" cellpadding="20" cellspacing="10">
<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 ячейка
Пример 2:
<table border="1" cellpadding="20" width="500" height="400">
<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 ячейка
Еще у таблицы присутствуют четыре важных атрибута.
align - определяет горизонтально положение таблицы или содержимое ячеек таблицы.
valign - определяет вертикальное положение таблицы или содержимое ячеек таблицы.
bgcolor - цвет фона ячеек таблицы и ячеек.
background - фоновое изображение ячеек и таблицы.
Основываясь на эти атрибуты можно создать достойный каркас страницы.
<table width="600" height="900" border="1">
<tr>
<td colspan="2" height="250">Шапочка сайта</td>
</tr>
<tr>
<td width="600">Страница</td><td>Навигация<br> или реклама</td>
</tr>
</table>
Мы увидим:
| 1 ряд, 1 ячейка | 1 ряд, 2 ячейка |
| 2 ряд, 1 ячейка | 2 ряд, 2 ячейка |
colspan - объединит 2 ячейка в ряду.
rowspan - объединит 2 ряда.
Пример 1:
<table border="1">
<tr>
<td colspan="2">1 ряд ячейка + ячейка.</td>
</tr>
<tr>
<td>2 ряд, 1 ячейка</td><td>2 ряд, 2 ячейка</td>
</tr>
</table>
<td colspan="2">1 ряд ячейка + ячейка.</td>
</tr>
<tr>
<td>2 ряд, 1 ячейка</td><td>2 ряд, 2 ячейка</td>
</tr>
</table>
| 1 ряд ячейка + ячейка. | |
| 2 ряд, 1 ячейка | 2 ряд, 2 ячейка |
Пример 2:
<table border="1">
<tr>
<td rowspan="2">1 ячейка, ряд + ряд.</td>
<td>2 ряд, 1 ячейка</td>
</tr>
<tr>
<td>2 ряд, 2 ячейка</td>
</tr>
</table>
1 ячейка, ряд + ряд. 2 ряд, 1 ячейка 2 ряд, 2 ячейка
cellpadding - определяет расстояние в пикселях между рамкой и содержимым в ней.
cellspacing - определяет расстояние в пикселях между границей соседних ячеек.
width - определяет ширину таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
height - определяет высоту таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
Пример 1:
<table border="1" cellpadding="20" cellspacing="10">
<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 ячейка
Пример 2:
<table border="1" cellpadding="20" width="500" height="400">
<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 ячейка
Еще у таблицы присутствуют четыре важных атрибута.
align - определяет горизонтально положение таблицы или содержимое ячеек таблицы.
valign - определяет вертикальное положение таблицы или содержимое ячеек таблицы.
bgcolor - цвет фона ячеек таблицы и ячеек.
background - фоновое изображение ячеек и таблицы.
Основываясь на эти атрибуты можно создать достойный каркас страницы.
<table width="600" height="900" border="1">
<tr>
<td colspan="2" height="250">Шапочка сайта</td>
</tr>
<tr>
<td width="600">Страница</td><td>Навигация<br> или реклама</td>
</tr>
</table>
Пример 2:
<table border="1">
<tr>
<td rowspan="2">1 ячейка, ряд + ряд.</td>
<td>2 ряд, 1 ячейка</td>
</tr>
<tr>
<td>2 ряд, 2 ячейка</td>
</tr>
</table>
<td rowspan="2">1 ячейка, ряд + ряд.</td>
<td>2 ряд, 1 ячейка</td>
</tr>
<tr>
<td>2 ряд, 2 ячейка</td>
</tr>
</table>
| 1 ячейка, ряд + ряд. | 2 ряд, 1 ячейка |
| 2 ряд, 2 ячейка |
cellpadding - определяет расстояние в пикселях между рамкой и содержимым в ней.
cellspacing - определяет расстояние в пикселях между границей соседних ячеек.
width - определяет ширину таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
height - определяет высоту таблицы, значение либо в пикселях, либо в процентах от размера окна браузера.
Пример 1:
<table border="1" cellpadding="20" cellspacing="10">
<tr>
<td>1 ряд, 1 ячейка</td><td>1 ряд, 2 ячейка</td>
</tr>
<tr>
<td>2 ряд, 1 ячейка</td><td>2 ряд, 2 ячейка</td>
</tr>
</table>
<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 ячейка |
Пример 2:
<table border="1" cellpadding="20" width="500" height="400">
<tr>
<td>1 ряд, 1 ячейка</td><td>1 ряд, 2 ячейка</td>
</tr>
<tr>
<td>2 ряд, 1 ячейка</td><td>2 ряд, 2 ячейка</td>
</tr>
</table>
<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 ячейка |
Еще у таблицы присутствуют четыре важных атрибута.
align - определяет горизонтально положение таблицы или содержимое ячеек таблицы.
valign - определяет вертикальное положение таблицы или содержимое ячеек таблицы.
bgcolor - цвет фона ячеек таблицы и ячеек.
background - фоновое изображение ячеек и таблицы.
Основываясь на эти атрибуты можно создать достойный каркас страницы.
<tr>
<td colspan="2" height="250">Шапочка сайта</td>
</tr>
<tr>
<td width="600">Страница</td><td>Навигация<br> или реклама</td>
</tr>
</table>
| Шапочка сайта | |
| Страница | Навигация или реклама |
Можно менять изображения, или цвет каждой ячейки, ряда или все таблицы сразу.
<table width="600" height="900" border="1">
<tr>
<td colspan="2" height="250" background="joomla.jpg">Шапочка сайта</td>
</tr>
<tr>
<td width="600" bgcolor="yellow">Страница</td><td>Навигация<br> или реклама</td>
</tr>
</table>
Можно менять изображения, или цвет каждой ячейки, ряда или все таблицы сразу.
<table width="600" height="900" border="1">
<tr>
<td colspan="2" height="250" background="joomla.jpg">Шапочка сайта</td>
</tr>
<tr>
<td width="600" bgcolor="yellow">Страница</td><td>Навигация<br> или реклама</td>
</tr>
</table>
Шапочка сайта | |
| Страница | Навигация или реклама |
Комментариев нет:
Отправить комментарий