Таблицы

Таблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т.д.

При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элеметы для описания каждой ячейки в с строке TD.

<TABLE> </table> - внешний элемент талицы.

<TR> </tr>- элемент, задающий строку таблицы. Конечный тег можно не использовать, т.к. строка заканчивается там, где начинается следующая строка.

<TD> </td> - элемент, задающий ячеку таблицы. Конечный тег также можно не использовать.

Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов:

<TABLE>	Начало таблицы	Посмотреть
<TR>	Начало первой строки
<TD> Первая ячейка первой строки</td>	Первая ячейка первой строки
<TD> Вторая ячейка первой строки</td>	Вторая ячейка первой строки
</tr>	Конец первой строки
<TR>	Начало второй строки
<TD>Первая ячейка второй строки</td>	Первая ячейка второй строки
<TD>Вторая ячейка второй строки</td>	Вторая ячейка второй строки
</tr>	Конец второй строки
</table>	Конец таблицы

Ширину таблицы можно задавать точно в пикселах или в процентном отношении к ширине страницы в окне броузера.

Например, если нам нужно здать таблицу определенного размера, то мы укажем:

<TABLE width="500">

<TR>

<TD> Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца.</td>

</tr>

</table>

Посмотреть

---

Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора (800х600, 1024 х 768, 1280 х 1024) у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы как 100%.

<TABLE width="100%">

<TR>

<TD> Ширина этой таблицы 100%.</td>

<TD> и она состоит из одной строки и двух столбцов </td>

</tr>

</table>

Посмотреть

---

Для всей таблицы может быть задан цвет фона: bgcolor="Цвет" или bgcolor="#RRGGBB", например:

 

<TABLE width="100%" bgcolor="#00CC99">

<TR>

<TD> Ширина этой таблицы 50%.</td>

</tr>

<TR>

<TD> и она состоит из двух строк и одного стобца </td>

</tr>

</table>

Посмотреть

---

Можно задавать отдельно цвет ячеек таблицы.

table width="600" border="1" cellspacing="0" cellpadding="5" align="center">
<tr>
<td bgcolor="#00FFFF"></td>
<td bgcolor="#CCFF00"></td>
<td bgcolor="#FF6633"></td>
</tr>
<tr>
<td bgcolor="#0000FF"></td>
<td bgcolor="#33FF66"></td>
<td bgcolor="#FF00FF"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"></td>
<td bgcolor="#9933FF"></td>
<td bgcolor="#FFFFCC"></td>
</tr>
</table>

Посмотреть

---

Шириной боковой грани управляет атрибут border. Можно задать ширину боковой грани таблицы в пикселах.

 

 

<TABLE width="100%" bgcolor="#00CC99" border="3" >

<TR>

<TD> </td>

<TD> Ширина этой таблицы 300 пикселов</td>

<TD> </td>

</tr>

<TR>

<TD> и она состоит из двух строк и трех столбцов</td>

<TD> </td>

<TD></td>

</tr>

</table>

Посмотреть

---

Можно сделать грани таблицы невидимыми, для этого ширину бордюра таблицы нужно задать равной 0:

 

<TABLE width="100%" bgcolor="#00CC99" border="0" >

<TR>

<TD> </td>

<TD> Ширина этой таблицы 300 пикселов</td>

<TD> </td>

</tr>

<TR>

<TD> и она состоит из двух строк и трех столбцов</td>

<TD> </td>

<TD></td>

</tr>

</table>

Посмотреть

---

Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:

left - выравнивание влево;

right - выравнивание вправо;

center - центрирование.

Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:

top - выравнивание по верхнему краю ячейки

center - выравнивание по центру

baseline - выравнивание по первой строке.

<table width="100%" border="1" cellspacing="0" cellpadding="5" align="center">
<tr> <td width="257">Выравнивание по горизонтали</td>
<td width="233" align="center">
По центру
</td>
<td width="217" align="left">
По левому краю
</td>
<td width="246" align="right">
По правому краю
</td>
</tr>
<tr>
<td width="257" height="112">Выравнивание по вертикали</td>
<td width="233" height="112" valign="top">По верхнему краю</td>
<td width="217" height="112" valign="middle">По центру</td>
<td width="246" height="112" valign="baseline">По нижнему краю</td>
</tr>
</table>

Посмотреть

---

Задание

1. Составьте таблицу для расписания ваших уроков. Пусть эта таблица состоит из восьми столбцов и девати строк. Ширина таблицы - 100%.

2. В первом столбце укажите время начала и конца ваших уроков. Выравнивание данных в ячейках по левому краю.

3. В остальных стобцах школьные предметы по дням недели.

4. Выравнивание дней недели - по центру ячейки и жирным шрифтом.

5. Выравнивание названий предметов - по левому краю.

6. У всех стоблцов фон сделайте разным цветом.

7. Перед таблицей поместите заголовок "РАСПИСАНИЕ УРОКОВ", выделив его тегами <H1> и </h1>. Цвет заголовка - красный.

8. Между заголовком и таблицей поместите рисунок.

Посмотреть