Глава 4
Таблицы
Помимо прочих объектов в свой сайт Вы можете
вставить таблицы.. и сразу забегая вперёд скажу о том что они имеют не малую
значимость при создании сайта. С помощью таблицы можно не только выложить ту
или иную информацию, тарифную сетку или график дежурств к примеру, но и взяв ёе
за основу полностью построить на ней свой сайт, таблицы порой незаменимы при
верстке страницы, но об этом позже. А сейчас давайте научимся её рисовать..
Рисуем таблицу
Тег <table>
задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и
столбцов, для этого есть ещё два тега:
<tr>
- строка таблицы
<td> - столбец
таблицы
Вместе эти теги пишутся так:
<table>
<tr>
<td>ячейка</td>
</tr>
</table>
Такая запись это самая маленькая таблица, в ней
всего одна строка, содержащая один столбец - ячейку
Поставим перед собой задачу нарисовать таблицу из
трёх строк и трёх столбцов, а заодно вспомним атрибут border "рамка", который
добавит нам наглядности.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>
Разобрались? Если да, идем дальше..
Объединение
ячеек.
Часто при работе с таблицами возникает
необходимость объединить те или иные ячейки в одну.
На самом деле слово "объединить" здесь
неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей
голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и
нажимаете кнопку "объединить".. здесь всё происходит не совсем так, и
правильнее было бы говорить не "объединить" а "растянуть".
Эту задачу решают атрибуты colspan и rowspan
·
colspan
- определяет какое количество столбцов будет занимать данная ячейка
·
rowspan
- количество рядов занимаемое ячейкой
Предположим что в нашем примере нам необходимо
"объединить" в третьей строке вторую и третью ячейку, для этого
атрибуту colspan
присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное
место.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td colspan="2">строка3
ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>
Как видите ячейка растянулась на два столбца, но
при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по
сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы
Вы поняли принцип данного действия.
Исправленный пример:
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td colspan="2">строка3
ячейка2</td>
</tr>
</table>
</body>
</html>
Теперь попробуем объединить весь первый столбец в
одну ячейку, используя атрибут rowspan,
ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей
раз сразу уберём лишнее.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">строка1
ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2">строка3
ячейка2</td>
</tr>
</table>
</body>
</html>
Всё просто.. главное быть внимательным!
Размеры таблицы.
Если Вы самостоятельно тренировались с рисованием
таблицы то наверняка обратили внимание на то, что размеры таблицы и ячеек по
умолчанию ограничены вставленным в неё текстом.. и "ползают" себе как
хотят. Вспомните про атрибуты width
- ширина и height -
высота, которые мы использовали для растягивания рисунков, они так же применимы
к тегам <table>, <tr> и
<td>. С этими
атрибутами Вы знакомы, так что рассусоливать не буду.. просто приведу пример. В
нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена
по центру знакомым тегом <center>
Пример:
<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border="1" width="640"
height="480">
<tr>
<td rowspan="3" width="150">строка1
ячейка1</td>
<td height="30">строка1
ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td height="30">строка2
ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2" >строка3
ячейка2</td>
</tr>
</table>
</center>
</body>
</html>
Обратите внимание на то, что длина и ширина
заданы не для всех ячеек. А зачем? Если и так таблица будет выровнена по самым
широким и длинным ячейкам.. на то она и таблица..
Еще не всё рассказал..
Значения атрибутов width и height в таблице могут указываться
не только в пикселях, но и в процентах
Вот пример:
<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border="1" width="640"
height="480">
<tr height="25%">
<td width="15%"> строка1
ячейка1</td>
<td width="25%">строка1
ячейка2</td>
<td width="60%">строка1
ячейка3</td>
</tr>
<tr height="50%">
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr height="25%">
<td>строка3 ячейка1</td>
<td>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</center>
</body>
</html>
В этом примере от общей ширины таблицы в 640
пикселей мы отдали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из
480 пикселей по 25% первой и третьей строчке, а добрую половину места второй..
Короче справедливости в мире нет.. Ну до это Вам решать, сколько кому места
отчуждать, главное, чтобы в сумме было 100%, иначе неразбериха будет.. смутное
время.. революция..
Читайте так же: Глава 12 "И снова таблицы.."
Перейти на главу 5.