Таблицы

Таблицы являются очень удобным средством форматирования данных на 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. Между заголовком и таблицей поместите рисунок.

Поведение на занятиях

Поведение на занятиях 1.    Когда учитель входит в класс, учащиеся встают, приветствуют учителя. Подобным образ учащиеся приветствуют любого взрослого, вошедшего в класс во время занятий (кроме времени работы на компьютере). 2.    Каждый учитель определяет правила поведения учащихся на своих занятиях; эти нрави. не должны ущемлять достоинство ученика. 3.    ...

О фазах Луны и затмениях

Луна - ближайшее к Земле небесное тело, ее единственный естественный спутник. Находясь на расстоянии около 380 тыс. км от Земли, Луна обращается вокруг нее в том же направлении, в котором Земля вращается вокруг своей оси. За каждые сутки она перемещается относительно звезд примерно на 13°, совершая полный оборот за 27,3 суток. Этот промежуток времени - период обращения ...

Оптика

Таблица оптики, Энциклопедия, 1728 Оптика — раздел физики, которая описывает поведение, свойства, первопричинность и природу света и объясняет оптические феномены, происходящие в окружающем нас мире. Под светом понимают не только видимый свет, но и примыкающие к нему широкие области спектра. Электромагнитный спектр принято делить на радиоволны, инфракрасное, видимое, ультрафиолетовое ...

М.С. Ляпунов С.Н. Блажко

30 сентября 1820 г   Михаил Васильевич Ляпунов—известный русский астроном середины прошлого века. Он родился 185 лет назад, 30 сентября 1820 г. В 19-летнем возрасте окончил математический факультет Казанского университета, в котором слушал лекции ректора университета Н. И. Лобачевского (1792—1856) и профессора астрономии И. М. Симонова (1794-1855). Уже в сентябре 1840 г. М. В. Ляпунов ...