Лабораторная работа № 4 Тема: Создание таблиц
Цель работы: Изучить принципы построения таблиц. Научиться создавать простые и сложные таблицы.
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег-контейнер TABLE. Таблица должна содержать хотя бы одну строку и колонку.
Для добавления строк используются теги <tr> и </tr>. Чтобы разделить строки на колонки применяются теги <td> и </td>.
Параметры таблицы
Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE.
<table параметр1=... параметр2=...>
Таблица 5.1 - Описание параметров таблицы и их свойств
Свойство |
| Значение | Описание | Пример |
align= |
| Left Right Center |
Выравнивание таблицы |
align=center |
background= |
| URL | Фоновый рисунок | background=pic.gif |
bgcolor= |
| #rrggbb | Цвет фона таблицы | bgcolor=#FF9900 |
border= |
| n | Толщина рамки в пикселах | border=2 |
bordercolor= |
| #rrggbb | Цвет рамки | border- color=#333333 |
bordercol-ordark= |
| #rrggbb | Тень рамки | bordercol-ordark=#f0f0f0 |
cellpadding= |
| n | Расстояние между ячейкой и ее содержимым | cellpadding=7 |
cellspacing= |
| n | Дистанция между ячейками | cellspacing=3 |
nowrap |
|
| Запрещает переносы строк в тексте | <table nowrap> |
frame= |
| Void Above Below Lhs Rhs Hsides Vsides Box |
Задание типа рамки таблицы |
frame=hsides |
valign= | Top Bottom |
| Выравнивание по высоте | valign=top |
width= | n n% |
| Минимальная ширина таблицы, можно задавать в пикселах или процентах |
width=90% |
height | n n% |
| Минимальная высота таблицы, можно задавать в пикселах или процентах |
height=18 |
Примечание
Таблица, если не указано особо, всегда выравнивается по левому краю;
Параметр background, отвечающий за рисунок фона, своеобразно понимается в разных браузерах. IE вставляет картинку во всю таблицу, если таблица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали. Netscape добавляет фоновое изображение в каждую ячейку таблицы;
По умолчанию, таблица выводится без рамки. Однако Netscape добавляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте параметр border=0;
Если ширина таблицы не указана, она подгоняется под содержание ячеек.
Пример 1:Создание таблицы
<HTML>
<HEAD>
<TITLE>ТАБЛИЦА</ТIТLE>
</HEAD>
<BODY>
<TABLE border="2" align=center>
<TR>
<TD colspan=2 align=center>
<B>Заголовок Таблицы.</В>
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка первой строки
</TD>
<TD align="center">
Вторая ячейка первой строки
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка второй строки
</TD>
<TD align="center">
Вторая ячейка второй
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Тег <TABLE> задает таблицу
1. Атрибуты border="2" и align=center задают, соответственно, размер границ таблицы и выравнивание ее по центру страницы Тег <TR> задает строку таблицы Тег <TD> задает ячейку таблицы
2. Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам) В результате получится следующая таблица, состоящая из двух столбцов и двух строк:
Заголовок Таблицы. |
|
Первая ячейка первой строки | Вторая ячейка первой строки |
Первая ячейка второй строки | Вторая ячейка второй |
Пример 2. Сложная таблица
<HTML>
<HEAD>
<TITLE>СЛОЖНАЯ ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="75%" align=center>
<TR>
<TD width="66%" colspan="2">
<P align="center">
Две ячейки, объединенные по горизонтали
</TD >
</TR > <TR >
<TD width="33%" rowspan="2" valign="middle" >
Две ячейки, объединенные по вертикали
</TD >
<TD width="33%">
по левому краю
</TD>
</TR>
<TR>
<TD width="33%">
<P align="right" >
по правому краю
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам)
Атрибут rowspan=n объединяет n ячеек по вертикали (по строкам)
Атрибут valign="middle" выравнивает текст в ячейке по центру ячейки по вертикали
В результате получается следующая таблица:
Две ячейки, объединенные по горизонтали |
|
Две ячейки, объединенные по вертикали | по левому краю |
| по правому краю |
Пример 3: Более сложная таблица
<HTML>
<HEAD>
<TITLE>УЧЕБНАЯ ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">
<THEAD BGCOLOR="Aqua">
<TR>
<TH COLSPAN="3">УЧЕБНАЯ ТАБЛИЦА</TH></TR>
</THEAD>
<TBODY>
<TR>
<TD WIDTH="33%">Это первая ячейка</TD>
<TD WIDTH="33%">Это вторая ячейка</ TD>
<TD ROWSPAN="3">А это три ячейки третьего столбца объединились в одну большую</TD>
</TR>
<TR>
<TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</TD>
</TR>
<TR>
<TD> Это первая ячейка третьей строки</TD>
<TD WIDTH="33%">А это вторая ячейка третьей строки</TD >
</TR>
</TBODY>
<TFOOT BGCOLOR="Yellow">
<TR>
<TD COLSPAN="3" ALIGN="center">
<SMALL>конец</SMALL></TD></TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>
Атрибут CELLSPACING="6" задает свободное пространство между ячейками таблицы
Атрибут CELLPADDING="20" задает свободное пространство между данными в ячейке и ее границами
Атрибут BORDERCOLORLIGHT="Lime" задает цвет левого и верхнего углов таблицы
Атрибут BORDERCOLORDARK="Green" задает цвет правого и нижнего углов таблицы
Атрибут BGCOLOR="#DFFFDF" задает цвет фона таблицы
В результате получается следующая таблица:
Задание:
Создать турнирную таблицу, представленную ниже на рисунке.
Для задания кавычек используйте специальные символы « ("«") и » ("»"), для создания длинного тире используйте специальный символ — ("—").
Рисунок 5.1 -Пример таблицы
Контрольные вопросы:
Для чего необходима таблица в веб-документе?
Элементы таблицы?
Параметры таблицы?
Простые и сложные таблицы.
Параметры тега TABLE?
- Лабораторная работа №1 Тема: Текстовое оформление страниц
- Лабораторная работа №2 Тема: Создание гипертекстовых ссылок
- 5. Ссылка на новое окно
- Лабораторная работа №3 Тема: Создание списков. Нумерованные списки
- Лабораторная работа № 4 Тема: Создание таблиц
- Лабораторная работа №5 Тема: Создание фреймов
- Лабораторная работа № 6 Тема: Создание Web-сайтов средствами ms Office.
- Разработка Web-сайта средствами ms Word.
- Разработка Web-сайта средствами ms Excel
- Создание Web-страниц средствами PowerPoint
- Лабораторная работа № 7 Тема: Создание web-страницы
- Лабораторная работа №8 Тема: Использование Microsoft FrontPage для редактирования web-узла
- Лабораторная работа № 9 Тема: Регистрация web-сайта, его публикация в сети Интернет, регистрация в поисковых системах