Лабораторная работа №2. Таблицы

Федеральное государственное бюджетное учреждение высшего
профессионального образования
Иркутский государственный университет путей сообщения
Кафедра: Информационные системы и защита информации
Задание для лабораторной работы №2
Работа с таблицами
Иркутск 2014
1. Скачать и установить на ПК редактор HTML кода.
2. Составьте таблицу для расписаний ваших занятий с учетом
числителя/знаменателя. Ширина таблицы - 100%.
3. В первом столбце укажите время начала и конца ваших занятий.
Выравнивание данных в ячейках по левому краю.
4. В остальных столбцах предметы по дням недели.
5. Выравнивание дней недели - по центру ячейки и жирным шрифтом.
6. Выравнивание названий предметов - по левому краю.
7. У всех столбцов фон сделайте разным цветом.
8. Перед таблицей поместите заголовок "РАСПИСАНИЕ УРОКОВ",
выделив его тегами <H1> и </h1>. Цвет заголовка - красный.
9. Между заголовком и таблицей поместите рисунок.
10.Создайте вторую страницу с макетом персонального сайта.
Таблицы
Для создания таблиц используются следующие теги:

<TABLE> - Для обрамления самой таблицы;

<THEAD> - Определяет заголовки элементов таблицы;

<TBODY> - Определяет тело таблицы;

<TFOOT> - Определяет нижнюю, завершающую часть таблицы;

<CAPTION> - Для обрамления подписи; Атрибут ALIGN={TOP |
BOTTOM} - размещение заголовка относительно таблицы (вверху или
внизу таблицы)

<COLGROUP> - Задание свойств одного или более столбцов;

<COL> - Задание свойств одного или более столбцов;

<TR> - Для обрамления рядов таблицы;

<TD> - Для обрамления клеток
o
<TH> -- </TH> тех, что нужно показывать пожирнее, например
заголовков;
o
<TD> -- </TD> обычных.
Атрибуты TABLE:
имя атрибута
ALIGN
возможные
смысл
значения
LEFT,
RIGHT
Определяет
горизонтальное
положение таблицы.
Задание этого
атрибута
фактически
определяет
плавающую
таблицу, которую
может обтекать
текст. При
примечания
LEFT - Таблица
прижимается влево
(используется по
умолчанию).
RIGHT – Таблица
прижимается вправо.
Текст в клетках
прижимается к влево.
использовании этого
атрибута по
окончании таблицы
должна следовать
команда BR.
VALIGN
WIDTH
HEIGHT
TOP,
MIDDLE,
BOTTOM
Определяет
вертикальное
расположение
текста в таблице
целое
Определяет ширину
таблицы в пикселах
или в процентах от
ширины экрана. Для
задания n в
процентах
используется знак
(%) процента.
броузер использует это
значение, если оно не
конфликтует с
требованиями ширины
в соседних ячейках в
том же самом столбце
целое
Определяет высоту
таблицы в пикселах
или в процентах от
высоты экрана.
Позволяет при
необходимости
растягивать таблицу
на весь экран.
броузер использует это
значение, если оно не
конфликтует с
требованиями высоты
для других ячеек в той
же самой строке
BACKGROUND URL
Задает в качестве
фона графический
файл.
BGCOLOR
Задает цвет фона.
BORDER
целое
Ширина рамки в
пикселах
По умолчанию рамка
не рисуется
BORDER
COLOR
Задание цвета рамки
BORDER
COLORLIGHT
Задание цвета для
рамки с тенью
(псевдо трехмерная
графика)
BORDER
COLORDARK
Задание цвета для
рамки с тенью
(псевдо трехмерная
графика
CELLPADDING целое
Задает расстояние в
пикселах между
границей клетки и
ее содержимым.
CELLSPACING целое
Задает расстояние в
пикселах между
внешней рамкой
таблицы и ее
клетками внутри
таблицы.
COLS
целое
Число столбцов в
таблице. Данный
атрибут ускоряет
вывод таблицы, что
особенно заметно
для больших таблиц
FRAME
VOID,
ABOVE,
BELOW,
HSIDES,
LHS, RHS,
VSIDES,
BOX,
Определяет метод
отрисовки рамки
Используется вместе с
атрибутами
BORDERCOLORDARK
и BORDER
VOID - Убрать
наружную часть рамки.
ABOVE - Показывает
верхнюю границу
таблицы.
BORDER
BELOW - Показывает
нижнюю границу
таблицы.
HSIDES - Показывает
верхнюю и нижнюю
границу таблицы.
LHS - Показывает
левую границу
таблицы.
RHS - Показывает
правую границу
таблицы.
VSIDES - Показывает
левую и правую
границу таблицы.
BOX - Показывает
полную рамку таблицы.
BORDER - Показывает
полную рамку таблицы.
NONE - Устраняет все
границы внутри
таблицы.
RULES
Определяет как
NONE,
будут показаны
GROUPS,
разделительные
ROWS,
линии ( внутренние
COLS, ALL
границы ) таблицы
GROUPS - Показывает
горизонтальные
границы между всеми
группами таблицы.
GROUPS определены
элементами THEAD,
TBODY, TFOOT, и
COLGROUP
ROWS – Показывает
горизонтальные
границы между всеми
рядами таблицы.
COLS – Показывает
вертикальные границы
между всеми
колонками таблицы.
ALL - Показывает все
границы.
SUMMARY
текст
предоставляет
краткую
информацию о
содержимом
таблицы
Атрибуты TD, TH:
имя атрибута
возможные
смысл
значения
примечания
эквивалентно использованию
непрерывных пробелов
( ) вместо обычных
пробелов в пределах
содержимого ячейки
NOWRAP
подавляет
перенос слов
ROWSPAN
целое
число строк,
перекрываемых по умолчанию 1
ячейкой
целое
число
столбцов,
по умолчанию 1
перекрываемых
ячейкой
COLSPAN
COLSPEC
ширина
например COLSPEC="20%"
колонок в
символах или в
процентах
по умолчанию LEFT или
атрибут ALIGN во
включающем элементе TR,
ALIGN
LEFT,
CENTER,
RIGHT,
JUSTIFY,
CHAR
Если задано
горизонтальное ALIGN=”CHAR”, то задается
выравнивание свойство CHAR=”.”, с
данных в
указанием относительно
ячейке
какого символа выравнивать.
Свойство CHAROFF=Length
заставляет сдвигать ячейки,
не содержащие заданного
символа
VALIGN
WIDTH
HEIGHT
TOP,
MIDDLE,
BOTTOM,
BASELINE
вертикальное
выравнивание
данных в
ячейке
целое
броузер использует это
значение, если оно не
ширина ячейки
конфликтует с требованиями
в пикселях
ширины в соседних ячейках
в том же самом столбце
целое
броузер использует это
значение, если оно не
конфликтует с требованиями
высоты для других ячеек в
той же самой строке
высота ячейки
в пикселях
перекрывается атрибутом
VALIGN во включающем
элементе TR
BACKGROUND,
BGCOLOR,
BORDERCOLOR,
BORDERCOLORLIGHT,
BORDERCOLORDARK
Аналогично атрибутам TABLE
Атрибуты TR только ALIGN, VALIGN – аналогично для TD, TH
Примеры: атрибуты тега TABLE,
бордюры, размеры и другие.
summary
<table summary="Краткая
информация
о таблице.">
<tr>
<td> первый ряд, первая ячейка </td>
<td> первый ряд, вторая ячейка </td>
</tr>
</table>
border
<table border="5">
<tr>
<td> первый ряд, первая ячейка </td>
<td> первый ряд, вторая ячейка </td>
</tr>
</table>
первый ряд, первая
первый ряд, вторая
ячейка
ячейка
если значение этого атрибута больше ноля то можно(но не желательно)
вставить еще один атрибут bordercolor="#FFAA00" с цветом бордюра.
cellspacing - задает расстояние между ячейками в пикселях
<table border="5" cellspacing="10">
<tr>
<td> первый ряд, первая ячейка </td>
<td> первый ряд, вторая ячейка </td>
</tr>
</table>
первый ряд, первая
первый ряд, вторая
ячейка
ячейка
cellpadding задает расстояние между ячейкой и ее содержимым:
<table border="5" cellspacing="10"cellpadding="10">
<tr>
<td> первый ряд, первая ячейка </td>
<td> первый ряд, вторая ячейка </td>
</tr>
</table>
bgcolor как и в теге body задает цвет для таблицы.
background делает картинку фоном таблицы как и теге body.
Страница с таблицей:
<html>
<head>
<title>таблицы в хтмл</title>
</head>
<body>
<table border="1" width="800" height="500" bgcolor="#0000FF">
<tr>
<td> первый ряд, первая ячейка </td>
<td> первый ряд, вторая ячейка </td>
</tr>
<tr>
<td> второй ряд, первая ячейка </td>
<td> второй ряд, вторая ячейка </td>
</tr>
</table>
</body>
</html>
Если мы задаем размер таблице то ячейки делят этот размер поровну. А
так-же обратите внимание что текст у нас застрял по центру.
valign- этот атрибут служит для вертикального выравнивания
содержимого ячейки и может принимать следующие занчения:
valign="middle" текст расположен по центру, можно не задавать т.к. это
значение
по
умолчанию.
valign="top" текст
расположен
вверху
ячейки.
valign="bottom" текст расположен внизу ячейки.
Примеры: атрибуты тегов TR, TD, TH.
Вложенные таблицы.
Атрибуты тега TR(table rows)
valign- тоже значения(вертикальное выравнивание) что и в теге table,
честно сказать что этот атрибут игнорируется в теге table и лучше его
использовать в каждом теге TR. Чтобы дальше не останавливаться на этом
атрибуте, то его можно задавать и в тегах TD и TH, например если вам нужно
выровнять
какую
нибудь
одну
ячейку.
bgcolor и background так-же используются в теге TR, с теми же атрибутами
если нужно изменить фон в ряду.
Атрибуты тегов TD(table data) и TH(table header)
С этими тегами можно использовать при необходимости все атрибуты выше
перечисленные атрибуты.
width- как и в теге table в процентах относительно размера таблицы или
в пикселях. Из личного опыта я бы рекомендовал о процентах забыть даже
для тега table, хотя-бы потому что разрешение экрана у каждого разное и как
поведет себя содержимое таблицы остается только предполагать...
Так что выход только один, использовать пиксели!!! С пикселями тоже
нужно быть предельно осторожными, учитывать максимально все. Например
мы делаем таблицу шириной 800px(пикселей) и устанавливаем border="0",
далее делим ряд на две ячейки: 1) 150px для навигации по сайту; 2) 650px для
контента(текста и др. объектов) страницы, 150+650=800 здесь все правильно.
Но еслиborder="1" или более то нужно учитывать толщину бордюра и
отступы между ячейками!!! Если таблица 800, навигация 150 и у нас 2ячейки
с бордюром по 1 с каждой стороны + 1px расстояние между ячейками то для
ячейки
с
контентом
остается
645
пикселей!!!
height- высота ячейки как и теге table. Этот атрибут задается только при
необходимости.
Таблицы можно вкладывать одну в
другую:
<table border="1" >
<tr>
<td>
<table border="1" >
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
Но чтобы было более понятно можно создать полноценную страницу:
<html>
<head>
<title>таблицы в хтмл</title>
</head>
<body>
<table border="1" width="800" align="center">
<tr>
<td height="150">
<img src="images/logotip.png" alt="Супер сайт" width="100%"
height="150">
</td>
</tr>
<tr>
<td>
<table border="0" width="100%">
<tr valign="top">
<td width="150" background="images/bg2.gif"
height="400">навигация:<br>
<a href="">ссылка</a><br>
<a href="">ссылка</a><br>
<a href="">ссылка</a><br>
<a href="">ссылка</a><br>
<a href="">ссылка</a><br>
</td>
<td background="images/fone.png">
<h1 align="center">Содержание страницы</h1>
контент страницы
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Растягивание ячейки.
По умолчанию ячейка принимает тот-же размер что и рядом стоящая
и если в таблице несколько рядов, то ячеек должно быть тоже одинаково
в каждом ряду.
Этот код не правильный, по тому что в верхнем ряду ячеек меньше
чем в нижнем...
<table width="100%" height="250" border="1">
<tr>
<td> первый ряд, первая ячейка </td>
</tr>
<tr>
<td> второй ряд, первая ячейка </td>
<td> второй ряд, вторая ячейка </td>
</tr>
</table>
Атрибут colspan может заставить ячейку растянуться на несколько
ячеек по горизонтали:
<table width="100%" height="250" border="1">
<tr>
<td colspan="2"> первый ряд, первая ячейка </td>
</tr>
<tr>
<td width="150"> второй ряд, первая ячейка </td>
<td> второй ряд, вторая ячейка </td>
</tr>
</table>
Результат:
первый ряд, первая ячейка
второй ряд,
второй ряд, вторая ячейка
первая ячейка
Цифра в атрибуте colspan указывает на сколько ячеек растягиваем,
в нашем случае 2, но может быть и 3, 5... 10 или больше.
Так-же ячейку можно растянуть по вертикали , но уже атрибутом
rowspan:
<table width="100%" height="250" border="1">
<tr>
<td> первый ряд, первая ячейка </td>
<td width="250" rowspan="2"> первый ряд, первая ячейка </td>
</tr>
<tr>
<td> второй ряд, вторая ячейка </td>
</tr>
</table>
первый ряд, первая ячейка
второй ряд, вторая ячейка
первый ряд, первая
ячейка
Или:
<table width="100%" height="250" border="1">
<tr>
<td rowspan="2"> первый ряд, первая ячейка </td>
<td width="250" > первый ряд, первая ячейка </td>
</tr>
<tr>
<td> второй ряд, вторая ячейка </td>
</tr>
</table>
первый ряд, первая ячейка
первый ряд, первая
ячейка
второй ряд, вторая
ячейка
<table width="100%" height="250" border="1">
<tr>
<td colspan="2">текст 1 </td>
<td rowspan="2">текст 2 </td>
</tr>
<tr>
<td>текст 3 </td>
<td>текст 4 </td>
</tr>
</table>
текст 1
текст 3
текст 2
текст 4