Таблицы.

Тема урока: Таблицы.

Цели урока:

Ø Показать возможности создания таблиц;

Ø Научить создавать таблицы, повторить создание списков.

Тип урока: изучение нового материала.

Вид урока: повторение, лекция, практикум.

Форма организации учебно-познавательной деятельности учащихся: фронтальная, индивидуальная.

Методы обучения:

Ø словесные: рассказ, объяснение;

Ø наглядные: методы иллюстрации;

Конспект урока.

Теоретическая часть.

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

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

При создании таблиц используется принцип вложения: внутри основного элемента таблицы <table> создается ряд элементов, определяющих строки <tr>, а внутри этих элементов размешаются элементы для описания каждой ячейки <td> в строке. Схематически структура вложенных друг в друга контейнеров показанная ниже:

<TABLE>	начало контейнера таблицы
<TR>	начало контейнера первой строки таблицы
<Тd>	начало контейнера первой ячейки первой строки
.. .	содержимое этой ячейки
</Тd>	конец контейнера первой ячейки первой строки
<Тd>	начало контейнера второй ячейки первой строки
.. .	содержимое этой ячейки
</Тd>	конец контейнера второй ячейки первой строки
<Тd>	начало контейнера третьей ячейки первой строки
.. .	содержимое этой ячейки
</Тd>	конец контейнера третьей ячейки первой строки
.. .	контейнеры других ячеек строки
</TR>	конец контейнера первой строки таблицы
<TR>	начало контейнера второй строки таблицы
.. .	далее аналогично
</TR>	конец контейнера последней строки таблицы
</TABLE>	конец контейнера таблицы

Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов. На рис. схематично представим расположение элементов, описывающих таблицу.

<Table>

<TR>

</tr>

<TD> Здесь может быть текст или картинка2< /td>

<TR>

</tr>

</table>

А вот как будет выглядеть описание этой таблицы на языке HTML:

<HTML>

<HEAD>

<TITLE> Пример создания таблицы </title>

</head>

<BODY>

<TABLE>

<TR>

<TD> Здесь может быть текст или картинка1 </td>

<TD> Здесь может быть текст или картинка2 </td>

</tr>

<TR>

<TD> Здесь может быть текст или картинкаЗ </td>

<TD> Здесь может быть текст или картинка4 </td>

</tr>

</table>

</body>

</html>

Атрибуты

Открывающие тэги контейнеров <TABLE>, <TR> И <Тd> могут быть снабжены атрибутами, часть из которых являются общими для них (применимыми в любом из названных тэгов).

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

· Width — ширина;

· Height — высота.

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

<TABLE width="500">

<TR>

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

</tr>

</table>

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

<TR>

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

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

</tr>

</table>

Если нам нужно задать столбцы определенного размера, (в пикселях или в процентах относительно ширины всей таблицы, в последнем случае после числового значения записывается знак «%»); важным является указание ширины ячеек только в первой строке таблицы, ширина всех последующих ячеек автоматически устанавливается по расположенным в первой строке, даже если для них установлены иные значения параметра. Например, первый столбец шириной в 30 пикселов, второй 50% от ширины всей таблицы, то мы укажем:

<TR>

<TD width=30 > Ширина этого столбца 30 пикселей </td>

<TD width="50%"> Ширина этого столбца 50% от всей таблицы </td>

<TD > Ширина этого столбца оставшаяся часть </td>

</tr>

</table>

Для всей таблицы может быть задан цвет фона:

bgcolor ="Цвет"

или

bgcolor="#RRGGBB".

В этом случае атрибут bgcolor помещается внутри элемента <table>, например:

<TABLE width="50%" bgcolor =”#00CC99”

<TR>

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

</tr>

<TR>

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

</tr>

</table>

Можно задавать отдельно цвет ячеек таблицы. В этом случае атрибут bgcolor помещается внутри элемента <td>, например:

<TABLE width="600" border="1" align="center">

<TR>

</tr>

<TR>

</tr>

<TR>

</tr>

</table>

С ПОМОЩЬЮ атрибута border можно задавать ширину рамки таблицы в пикселах. Например:

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

<TR>

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

</tr>

<TR>

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

</tr>

</table>

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

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

<TR>

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

</tr>

<TR>

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

</tr>

</table>

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

· Left — выравнивание влево;

· Right — выравнивание вправо;

· Сenter — центрирование.

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

· Tор — выравнивание по верхнему краю ячейки;

· Center — выравнивание по центру;

· Baseline — выравнивание по первой строке.

Например:

<TR>

<ТD><B>Выравнивание по горизонтали</b></td>

<TD align="center"> По центру </td>

<TD align="left"> По левому краю </td>

<TD align="right"> По правому краю </td>

</tr>

<TR>

<TD> <В>Выравнивание по вертикали </b></td>

<TD valign="top"> По верхнему краю </td>

<TD valign="middle"> По центру </td>

<TD valign="baseline"> По нижнему краю </td>

</tr>

</table>

В результате вы получите таблицу, изображенную на рис.

Выравнивание

по горизонтали

По центру

По левому краю

По правому краю

Выравнивание

по

вертикали

По верхнему краю

По центру

По нижнему краю

Заметим, что одинаковые параметры, записанные в составе тэгов <TABLE>, <TR> И <Тd>, подчиняются следующему правилу: приоритет параметра, распространяющегося на меньшую область, всегда выше.

Домашнее задание: конспект.

Практическая работа

Создайте таблицу расписания уроков на интернет-странице, уроки оформите в виде нумерованного списка, сохраните в личной папке под именем table.html.
Задайте цвет бордюра, ячеек, шрифта по своему желанию.

Тема урока: Таблицы. Цели урока: Ø

Table> <TR> <

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

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

Выравнивание по горизонтали

Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

11.05.2020