 |
Задание на лабораторную работу
|
|
|
|
Лабораторная работа №2
2.1 Цель работы: Исследовать создания и управления параметрами таблицами в HTML
Теоретические данные
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Таблицы используются для упорядочения и представления данных.
Для добавления таблицы на веб-страницу используется тег <table>. Таблица должна содержать хотя бы одну строку и колонку. Задать ширину таблицы можно в пикселах и процентах. Значение, заданное в пикселах, является фиксированным значением. В этом примере ширина всегда будет занимать 250 пикселов в окне браузера.
<table width="250"> </table>
Пример самой простой таблицы, имеющей всего одну строку и одну колонку:
| Привет:-) |
Эта табличка в виде кода выглядит так:
<table border=1 width="250">
<tr>
<td>
Привет:-)
</td>
</tr>
</table>
Для добавления строк используются теги <tr> и </tr>.
Чтобы разделить строки на колонки применяются теги <td> и </td>.
Таблица с двумя колонками (используем теги <td> и </td>):
| Привет:-) | Пока! |
Она имеет следующий код:
<table border=1>
<tr>
<td> Привет:-)</td>
<td> Пока! </td>
</tr>
</table>
Для добавления строк используем теги <tr> и </tr>
Данная таблица имеет две стоки и два столбца:
| Весна | Лето |
| Зима | Осень |
Код таблицы будет выглядеть следующим образом:
<table>
<tr>
<td>Весна</td>
<td>Лето</td>
</tr>
<tr>
<td>Зима</td>
<td>Осень</td>
</tr>
</table>
Параметры таблицы
Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге <table>
<table параметр1=... параметр2=...>
| Параметр | Значение | Описание | Пример | Реализация |
| align= | left right center | Выравнивание таблицы | align=center |
|
|
|
| width= | n n% | Минимальная ширина таблицы, можно задавать в пикселах или процентах | width=50% | |
| height= | n n% | Минимальная высота таблицы, можно задавать в пикселах или процентах | height=50% | |
| background= | URL | Фоновый рисунок | background=pic.gif | 
|
| bgcolor= | #rrggbb | Цвет фона таблицы | bgcolor=#FF9900 bgcolor=yellow | 
|
| border= | n | Толщина рамки в пикселах | border=8 | 
|
| bordercolor= | #rrggbb | Цвет рамки | bordercolor=#FE0202 | 
|
| cellpadding= | n | Расстояние между ячейкой и ее содержимым | cellpadding=7 | 
|
| cellspacing= | n | Дистанция между ячейками | cellspacing=15 | 
|
| frame= | void above below lhs rhs hsides vsides box | Задание типа рамки таблицы | frame=hsides | 
|
Параметры ячеек
С помощью параметров ячеек можно изменять вид и оформление таблиц. Параметры, которые могут быть добавлены к тегам <tr> и <td>.
| Параметр | Значение | Описание | Пример | Реализация |
| align= | left right center | Выравнивание содержимого ячейки | align=center | 
|
| background= | URL | Устанавливает фоновый рисунок в ячейке | background=pic.gif | 
|
| bgcolor= | #rrggbb | Цвет фона ячейки | bgcolor=#FF9900 | 
|
| valign= | top bottom | Выравнивание содержимого ячейки по высоте | valign=top | 
|
| width= | n n% | Минимальная ширина ячейки, можно задавать в пикселах или процентах | width=30% | 
|
| height= | n n% | Минимальная высота ячейки, можно задавать в пикселах или процентах | height=30% | 
|
Параметры, которые могут быть добавлены только к тегу <td>.
| Параметр | Значение | Описание | Пример | Реализация |
| colspan= | n | Устанавливает размер ячейки относительно ниже расположенных колонок; colspan=2 означает, что ширина ячейки будет соответствовать ширине двух колонок. | colspan=2 | 
|
| rowspan= | n | Размер ячеек по вертикали относительно строк. rowspan=2 устанавливает, что высота ячейки соответствует высоте двух строк | rowspan=2 | 
|
Пример таблицы.
| Времена года | Весна | Лето |
| Осень | Зима |
Рассмотрим ее код:
<table border=5 bordercolor=#FAD0D0 cellpadding=7 width=40%>
<tr>
<td rowspan=2 align=center><b>Времена года</b></td>
<td width=20%>Весна</td>
<td width=20%>Лето</td>
</tr>
<tr>
<td>Осень</td>
<td>Зима</td>
</tr>
</table>
|
|
|
В данном случае было задано для всей таблицы:
border=5 - толщина рамки таблицы в 5 пикселей;
bordercolor=#FAD0D0 - цвет рамки таблицы розовый;
cellpadding=7 - расстояние между ячейками и их содержимым;
width=40% - ширина таблицы в процентах от всего окна браузера;
Для ячеек
width=20% - ширина ячейки от всей ширины таблицы. Ширина ячейки "Весна" будет равна ширине ячейки "Осень".
align=center - размещение текста по центру. По умолчанию текст в ячейке будет расположен слева.
rowspan=2 - задание высоты ячейки "Времена года" в две строки.
Задание на лабораторную работу
Построить таблицу на языке HTML с отработкой всех параметров основных тегов форматирования таблицы и ее заполнения.
|
|
|
