Федеральное государственное бюджетное учреждение высшего профессионального образования Иркутский государственный университет путей сообщения Кафедра: Информационные системы и защита информации Задание для лабораторной работы №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: имя атрибута возможные смысл значения примечания эквивалентно использованию непрерывных пробелов (&nbsp;) вместо обычных пробелов в пределах содержимого ячейки 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