|
На сайт Информатика в школе • К оглавлению учебника ТаблицыТаблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т.д. При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элеметы для описания каждой ячейки в с строке TD. <TABLE> </table> - внешний элемент талицы. <TR> </tr>- элемент, задающий строку таблицы. Конечный тег можно не использовать, т.к. строка заканчивается там, где начинается следующая строка. <TD> </td> - элемент, задающий ячеку таблицы. Конечный тег также можно не использовать. Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов:
Ширину таблицы можно задавать точно в пикселах или в процентном отношении к ширине страницы в окне броузера. Например, если нам нужно здать таблицу определенного размера, то мы укажем: <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"> Шириной боковой грани управляет атрибут 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"> Задание1. Составьте таблицу для расписания ваших уроков. Пусть эта таблица состоит из восьми столбцов и девати строк. Ширина таблицы - 100%. 2. В первом столбце укажите время начала и конца ваших уроков. Выравнивание данных в ячейках по левому краю. 3. В остальных стобцах школьные предметы по дням недели. 4. Выравнивание дней недели - по центру ячейки и жирным шрифтом. 5. Выравнивание названий предметов - по левому краю. 6. У всех стоблцов фон сделайте разным цветом. 7. Перед таблицей поместите заголовок "РАСПИСАНИЕ УРОКОВ", выделив его тегами <H1> и </h1>. Цвет заголовка - красный. 8. Между заголовком и таблицей поместите рисунок.
|