Задание 6. Создание таблиц
Цель работы: Научиться создавать таблицы в HTML. Овладеть навыками работы с различными элементами таблицы.
Таблицы на HTML-страницах обычно используются для представления данных и/или для позиционирования на странице других элементов.
Основные элементы таблицы следующие:
§ Ячейка (cell) – отдельный неделимый блок таблицы.
§ Строка (row) - горизонтальная последовательность ячеек.
§ Столбец (column) – вертикальная последовательность ячеек.
Важно, что каждая ячейка может объединять более одну строку или более, чем один столбец. Рассмотрим пример:
Ячейка А | Ячейка B |
Ячейка C | |
Ячейка D | Ячейка E |
Ячейка F |
Эта таблица имеет 2 столбца, 4 строки и 6 ячеек. При этом, Ячейка C включает в себя два столбца одной строки, а Ячейка D включает в себя две строки одного столбца. Остальные ячейки занимают один столбец одной строки.
Основные тэги таблицы – это <table> и </table>. Они используются для определения начала и конца таблицы. Синтаксис этих тэгов следующий:
<table border="width" cellpadding="padding"
cellspacing="spacing" width="width">
...
</table>
Атрибут border определяет ширину рамки таблицы в пикселях, рамка обрамляет каждую ячейку. Если рамка не нужна, то поставьте border="0".
Атрибут cellpadding определяет расстояние (в пикселях) между содержимым ячейки и границей ячейки..
Атрибут cellspacing определяет расстояние (в пикселях) между соседними ячейками.
Атрибут width может определять горизонтальный размер таблицы (в пикселях) при ее размещении на странице. Однако, для динамического изменения ширины таблицы в зависимости от изменения ширины окна браузера, можно указывать ширину таблицы в процентах от ширины окна браузера. Например, width="50%".
Каждая строка таблицы должна быть определена тэгами <tr> и </tr>, которые размешенвы между <table> и </table>. А внутри <tr> и </tr> должны быть помещены тэги <td> и </td> для определения ячеек в строке. Синтаксис тэга <td> следующий:
<td rowspan="n" colspan="n" width="n"
align="center|right" valign="top|bottom" bgcolor="n">
<содержимое ячейки>
</td>
Если ячейка объединяет несколько строк, то следует использовать <td rowspan="n">, где n - это количество объединяемых строк.
Если ячейка объединяет несколько столбцов, то следует использовать <td colspan="n">, где n - это количество объединяемых столбцов.
Заметим, что объединение ячеек происходит вниз и вправо от той ячейки, для которой мы указали атрибуты rowspan и colspan.
Для каждой ячейки можно специфицировать ширину width в пикселях или процентах (аналогично ширине таблицы). Только проценты будут определять часть ширины таблицы, а не окна браузера.
Атрибуты align и valign определяют правила горизонтального и вертикального позиционирования содержимого ячейки. По умолчанию, позиция текста или изображения внутри ячейки принимается: по горизонтали – левая сторона, по вертикали - середина. Поэтому, если Вы хотите, чтобы Ваш текст был размещен, выравненным по правой стороне ячейки, укажите align="right". А если Вы хотите, чтобы текст был прижат к верхней стороне ячейки, укажите valign="bottom".
Атрибут bgcolor позволяет определить цвет фона ячейки.
1. Постройте на своей HTML-странице следующую таблицу:
<table border="1" cellpadding="20" cellspacing="0">
<tr>
<td colspan="3">A</td>
<td colspan="4">B</td>
</tr>
<tr>
<td colspan="7">C</td>
</tr>
<tr>
<td rowspan="2" colspan="6">D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
</tr>
</table>
2. Загрузите страницу в браузер. Вы должны увидеть приблизительно следующую таблицу:
А | B |
С | |
D | Е |
F |
3. Измените ширину таблицы, указав значение атрибута width в пикселях в тэге <table>.
4. Измените ширину ячейки А, указав значение атрибута width в пикселях в соответствующем тэге <td>.
5. Измените ширину ячейки А, указав значение атрибута width в процентах в соответствующем тэге <td>.
6. Измените значение атрибута border, указав border="3".
7. Измените значение атрибута cellpadding, указав cellpadding ="3".
8. Измените значение атрибута cellspacing, указав cellspacing ="20".
9. После каждого изменения загружайте страницу в браузер и обращайте внимание на изменения.
10. Поместите в ячейку C еще одну таблицу. Например, так:
...
<tr>
<td colspan="7">
<table border="1">
<tr>
<td>С1</td>
<td>С2</td>
</tr>
<tr>
<td>С3</td>
<td>С4</td>
</tr>
</table>
</td>
</tr>
...
11. Загрузите страницу в браузер и посмотрите, что получилось.
12. Создайте на своей HTML-странице следующую таблицу для отображения данных:
Объем продаж товаров (млн. руб.) | |||
2000 | 2001 | 2002 | 2003 |
1.6 | 2.3 | 3.2 | 4.6 |
13. Позиционируйте с помощью таблицы на своей странице текст и изображение следующим образом:
<текст над изображением> | ||
<текст слева от изображения> | <изображение> | <текст справа от изображения> |
<текст под изображением> |
14. Создайте таблицу и раскрасьте некоторые ячейки следующими образом:
<синий текст, желтый фон> | <черный текст, голубой фон> | ||
<белый текст, синий фон> | |||
Проекты по теме:
Основные порталы (построено редакторами)