Выравнивание содержимого ячеек таблиц.
Лабораторная работа №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"> </th> - цвет фона отдельной ячейки
Задание 5:
Подберите для ячеек первой строки таблицы из примера 1 фоновую картинку.
 |
Изменение размеров таблицы.
Атрибуты и height=? - задают ширину и высоту ячеек таблицы (могут использоваться в любых тегах таблицы) ,вместо знака вопрос проставляется значение размера ячейки в пикселах или процентах(от общей ширины таблицы).
|
|
|
Атрибуты можно использовать для задания размеров всей таблицы, для одного ряда, для ячейки (столбца) в отдельности.
Например:
<table width=60> - задается ширина ячеек всей таблицы
<td height=35 width=50 bgcolor=#FFCC33>1x1</td> - размер отдельной ячейки
<tr width=30%> - размер ячеек всей строки
Задание 6 :
1. Увеличьте в примере 1 размеры (ширину и высоту) ячеек всей таблицы.
2. Измените размеры среднего столбца. Проанализируйте результат в браузере.
3. Измените длину всех ячеек 1 ряда таблицы. Что произошло с остальными рядами?
Выравнивание содержимого ячеек таблиц.
Атрибут valign= middle (top, bottom) в теле тегов <tr> и <td> задает вертикальное выравнивание содержимого таблиц (посередине, сверху, снизу).
Атрибут align = center ( right , left ) выравниваетсодержимое ячейки по горизонтали.
Пример:
<td - выравнивание текста ячеек по центру
Задание 7 :
Разместите ячейки таблицы примера 1 в соответствии с рисунком:
 |
Объединение ячеек.
Атрибуты colspan=? – объединение ячеек нескольких столбцов в пределах одной строки
|
|
|
Атрибут rowspan =? – объединение ячеек нескольких строк в пределах одного столбца
Вместо знака вопроса проставляется количество объединяемых ячеек.
Например:
<TH COLSPAN=3> - означает, что ячейка простирается на три колонки.
<TH ROWSPAN=2> - означает, что ячейка занимает две строки
Атрибут NOWRAP означает, что содержимое ячейки должно быть показано в одну строку.
Например:
<TH NOWRAP>
Задание 8 :
1. Добавьте копию исходной таблицы документ, располагая ее ниже основной.
2. Измените таблицу №1 примера1 по рисунку, используя параметр colspan (вылезшие при этом ячейки просто удалите из документа):
 |
3. Внесите изменения в таблицу №2 по рисунку, задавая значение для параметра rowspan.
4. Перепишите код для 1 таблицы, по которому она примет вид:
Дата добавления: 2022-06-11; просмотров: 21; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!