Изменение размеров таблицы

Лабораторная работа №6 по HTML

Тема: Создание таблиц.

ü Выполнение каждого задания демонстрировать преподавателю.

Построение простых таблиц и колонок

<table></table> - теги начала и конца таблицы
<tr></tr> - строка(и) таблицы

<th></th> - заголовки столбцов таблицы (обычная ячейка с центрованным полужирным шрифтом)

<td></td> - столбец (обычная ячейка) таблицы

Для создания таблицы необходимо выполнить следующие действия:
1.

<table>
<tr></tr>
<tr></tr>

………………
</table>

2.
<table>
<tr>

<td></td>
<td></td>
<td></td>

…………….
</tr>

 

<tr>
<td></td>
<td></td>
<td></td>

……………
</tr>
………………

</table>

3.
<table>

<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>

…………….
</tr>

………………………
</table>

 

Примечание:

1. Если в ячейке задается заголовок столбца или строки таблицы, то целесообразнее использовать вместо тега <td> тег <th>

2. Для создания колонок (с центровкой по умолчанию) необходимо создать таблицу в одну строку.

Задание 1:

Постройте таблицу из примера 1:

Пример 1

1 столбец	2 столбец	3 столбец
1х1	1х2	1х3
2х1	2х2	2х3

Обрамление таблицы (рамка).

Атрибут border=?в теле тега <table>,где ? – это ширина рамки таблицы в пикселах.

 

Задание 2:

Установите рамку вокруг исходной таблицы шириной в 3 пиксела.

Определение заголовка таблицы.

Тег <CAPTION>

Например:

<TABLE BORDER=5>

<CAPTION>ДОМИНО</CAPTION>

 

Задание 3:

1. Добавьте заголовок «Мои первые шаги в построении таблиц» в примере 1

2. Задайте его курсивным, полужирным шрифтом.

Цвет рамки и цвет ячеек таблицы.

3.1. Атрибут bordercolor=? в теле тега<table>, где ? – это цвет рамки (название или код)

3.2. Атрибут bgcolor=?, где ? – задает цвет ячеек таблицы

Цвет можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда).

Например:

1. <table bgcolor=#FFCC33> - цвет ячеек всей таблицы

2. <tr bgcolor=#FFCC33> - цвет ячеек строки

3. <td bgcolor=#FFCC33> - цвет отдельной ячейки строки

Задание 4:

1. Задайте зеленый цвет рамки таблицы примера 1.

2. Допишите код примера 1, задав цвет ячеек 2 и 3 строки таблицы в шахматном порядке.

Графический фон таблицы.

Атрибут background=”?” задает фоновую картинку для таблицы (ряда, ячейки), где ? – это название файла фона и путь к нему.

Например:

1. <table border=10 background=”Мечта.jpg”> - цвет фона таблицы

2. <th background="white.gif">&nbsp;</th> - цвет фона отдельной ячейки

Задание 5:

Подберите для ячеек первой строки таблицы из примера 1 фоновую картинку.

Изменение размеров таблицы.

Атрибуты width=?и height=? -задают ширину и высоту ячеек таблицы (могут использоваться в любых тегах таблицы) ,вместо знака вопрос проставляется значение размера ячейки в пикселах или процентах(от общей ширины таблицы).

 

Атрибуты можно использовать для задания размеров всей таблицы, для одного ряда, для ячейки (столбца) в отдельности.

Например:

<table width=60> - задается ширина ячеек всей таблицы

<td height=35 width=50 bgcolor=#FFCC33>1x1</td> - размер отдельной ячейки
<tr width=30%> - размер ячеек всей строки

Задание 6:

1. Увеличьте в примере 1 размеры (ширину и высоту) ячеек всей таблицы.

2. Измените размеры среднего столбца. Проанализируйте результат в браузере.

3. Измените длину всех ячеек 1 ряда таблицы. Что произошло с остальными рядами?