Без заголовка |
Таблицы являются очень удобным средством форматирования данных на 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] [Новые] |