Таблица (12)
.docЛабораторная работа №5
Таблицы
В этой лабораторной работе мы познакомимся с таблицами в HTML: виды таблиц, способы из создания.
Таблицы являются стандартом HTML. Чаше всего всю информацию на интернет-страничке размешают в таблице. Это считается правилом хорошего тона в дизайне. Также таблицы помогают обойти ограничения HTML. Например, в HTML нельзя точно разместить элементы по горизонтали, но, используя таблицы, можно добавлять столбцы для перемещения элементов.
Создание таблиц вручную — одна из наиболее сложных задач в HTML. Сначала Вы формируете таблицу, затем первую строку, затем каждую ячейку с ее содержимым. Каждый элемент требует открывающего и закрывающего флагов разметки документа. Если Вы забыли один - единственный текстовый маркер, то Вашу страницу никто не сможет прочитать.
Вставка таблицы.
Таблица вставляется в HTML-документ парными флагами <table> и </table>. Чаще всего забывают закрывающий флаг, и из-за этой ошибки программа просмотра отказывается выводить таблицу.
У флага <table> есть параметры:
border — ширина бордюра;
width —ширина таблицы;
bgcolor — цвет фона под таблицей.
Например, тэг <table border=1 width=100%>
У таблицы есть 3 основных элемента – это заголовок, строка и столбец. Рассмотрим каждый элемент подробно.
Между флагами <table> и </table> могут располагаться следующие элементы:
Заголовок таблицы (этот элемент может и отсутствовать):
<caption> Название таблицы </caption>
У флага caption есть всего один параметр, определяющий положение заголовка таблицы - align. Он может принимать два значения:
top - над таблицей;
bottom - под таблицей.
Стока таблицы (обязательный элемент)
<tr>Cтрока таблицы</tr>
У флага <tr> есть три параметра:
align - выравнивание внутри строки:
left,
right,
center;
valign - вертикальное выравнивание внутри строки таблицы:
top,
bottom,
middle.
bgcolor - цвет фона внутри строки,
Столбец таблицы (обязательный элемент)
<td>Столбец таблицы </td>
Флаг столбца <td> таблицы может иметь следующие параметры:
align - выравнивание:
left,
right,
center;
valign - вертикальное выравнивание:
top,
bottom,
middle.
bgcolor — цвет фона под столбцом,
colspan – растягивание ячейки на несколько столбцов
rowspan – растягивание ячейки на несколько строк
width – ширина ячейки (в пикселях),
height – высота ячейки (в пикселях)
Задание 1. Давайте создадим в текстовом редакторе файл tab1.html и запишем вго в папку HTML:
<html> <head><title>Таблица</title> </head> <body> <h2 align = center> Самая простая таблица</h2> <table border> <tr> <td>ячейка A</td> <td>ячейка В</td> <td>ячейка С</td> </tr> <tr> <td>ячейка D</td> <td>ячейка E</td> <td>ячейка F</td> </tr> </table> </body> </html> |
Откройте файл в программе просмотра, вы видите пример самой простой таблицы
Задание 2. Измените внешний вид таблицы:
измените цвета ячеек (используйте английские названия цветов, либо их числовые значения (см. лаб. работа «Работа с цветом»)
пусть все ячейки будут различного цвета.
Заголовки строк и столбцов.
Часто при оформлении каких либо данных статистики требуется указывать название столбцов или строк. Для этого используется флаг <th>.
<th> может иметь следующие параметры:
align - выравнивание;
valign - вертикальное выравнивание;
colspan – растягивание ячейки на несколько столбцов
rowspan – растягивание ячейки на несколько строк
width – ширина названия,
bgcolor – цвет фона под названием.
Задание 3. Измените файл tab1.html (подчеркнутый текст нужно добавить)
<html> <head><title>Таблица</title> </head> <body> <h2 align = center> Самая простая таблица с заголовками</h2> <table border> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> <tr> <td>ячейка A</td> <td>ячейка В</td> <td>ячейка С</td> </tr> <tr> <td>ячейка D</td> <td>ячейка E</td> <td>ячейка F</td> </tr> <tr> <td>ячейка G</td> <td>ячейка H</td> <td>ячейка J</td> </tr> </table> </body> </html> |
Посмотрите, что получилось в окне просмотра.
Параметры rowspan, colspan.
rowspan
Параметр rowspan растягивает ячейку таблицы на указанное количество строк.
Давайте приведем таблицу, созданную нами в файле tab1.html:
Ячейка A |
Ячейка B |
Ячейка C |
Ячейка D |
Ячейка E |
Ячейка F |
Ячейка G |
Ячейка H |
Ячейка J |
К виду:
Объединенные ячейки A, D, G |
Ячейка B |
Ячейка C |
Ячейка E |
Ячейка F |
|
Ячейка H |
Ячейка J |
Это значит, что при описании таблицы у тэга, описывающего ячейку A, нужно указать параметр colspan=3:
…
<td rowspan=2>Объединенные ячейки A, D, G</td>
….
Таким образом, мы растянем ячейку А на три строки (а значит ячейки D и G описывать уже не нужно)
Файл будет выглядеть так (изменения выделены жирным шрифтом):
<html> <head><title>Таблица</title> </head> <body> <h2 align = center> Самая простая таблица с заголовками</h2> <table border> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> <tr> <td rowspan=3>Объединенные ячейки A, D, G</td> <td>ячейка В</td> <td>ячейка С</td> </tr> <tr> <td>ячейка E</td> <td>ячейка F</td> </tr> <tr> <td>ячейка H</td> <td>ячейка J</td> </tr> </table> </body> </html> |
Задание 4. Измените файл tab1.html и приведите его к описанному выше виду. Заметьте, что описания ячеек D и G нужно удалить.
Посмотрите результат в программе просмотра.
colspan
Параметр colspan растягивает ячейку таблицы на указанное количество столбцов.
Давайте приведем таблицу, созданную нами в файле tab1.html:
Объединенные ячейки A, D, G |
Ячейка B |
Ячейка C |
Ячейка E |
Ячейка F |
|
Ячейка H |
Ячейка J |
К виду:
Объединенные ячейки A, D, G |
Ячейка B |
Ячейка C |
Объединенные ячейки E и F |
||
Ячейка H |
Ячейка J |
|
Это значит, что при описании таблицы у тэга, описывающего ячейку A, нужно указать параметр colspan=3:
…
<td colspan=2>Объединенные ячейки Е и F</td>
….
Таким образом, мы растянем ячейку Е на два столбца (а значит ячейку F описывать уже не нужно)
Файл будет выглядеть так (изменения выделены жирным шрифтом):
<html> <head><title>Таблица</title> </head> <body> <h2 align = center> Самая простая таблица с заголовками</h2> <table border> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> <tr> <td rowspan=3>Объединенные ячейки A, D, G</td> <td>ячейка В</td> <td>ячейка С</td> </tr> <td colspan=2>Объединенные ячейки E и F</td> </tr> <tr> <td>ячейка H</td> <td>ячейка J</td> </tr> </table> </body> </html> |
Задание 5. Измените файл tab1.html и приведите его к описанному выше виду. Заметьте, что описание ячейки F нужно удалить. Посмотрите результат в программе просмотра.
Бордюры таблицы
Мы уже упомянули параметр BORDER флага <TABLE>. Этот параметр устанавливает ширину бордюра (рамки таблицы) и может принимать любое значение от 0 до 10.
Ширина бордюра = 0 обозначает его отсутствие.
Сейчас мы создадим таблицу с одной единственной ячейкой. И в эту ячейку мы поместим картинку.
Задание 7. Создайте файл tab2.html, запишите в него такой текст (вместо многоточий укажите нужную информацию):
<html> <head> <title>Таблица</title> </head> <body> <h2 align=center>Таблица </h2> <table align=center border=5> <tr> <td> <img src="…" alt="…" align=left width=… height=… bordered> </td> </tr> </table> </body> </html> |
Посмотрите на рамку в окне программы просмотра. Поэкспериментируйте с бордюром.
Если значение параметра border опускается, то border=1.
Параметр width
Когда Вы создаете таблицу, то ширина столбца оказывается равной самому широкому элементу этого столбца. Но Вы хотите установить для него точную ширину, равную половине всей таблицы. Вот здесь и пригодится параметр WIDTH.
Задание 8. Создайте файл tab3.html и внесите такой текст:
<html> <head> <title>Таблица</title> </head> <body> <h2 align=center>Таблица </h2> <table border width=50%> <tr> <td width=80%>таблица в 50% ширины от экрана. Столбец в 80% ширины таблицы</td> <td>Ячейка 2</td> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table> </body> </html> |
Посмотрите, что получилось, в окне программы просмотра. Задайте ширину первого столбца 30 %.