- •Пояснительная записка
- •Введение html редакторы
- •Что такое html?
- •Кто создал html?
- •При помощи чего создаются html-страницы?
- •Визуальные редакторы или wysiwyg (What You See Is What You Get — Что видишь, то и получаешь)
- •Текстовые html-редакторы
- •Урок 1. Как устроен сайт. Делаем первую страницу.
- •Урок 2. Оформляем html-страницу и форматируем текст.
- •Шаг 1. Меняем фон html-страницы и цвет текста
- •Шаг 2. Форматируем текст
- •Урок 3. Располагаем элементы на странице.
- •Урок 4. Соединяем html-страницы между собой.
- •Урок 5. Структура html документа
- •Заголовок документа - тег head и его элементы
- •Тело документа - тег body
- •Урок 6. Форматирование текста
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 7. Форматирование текста (продолжение).
- •Теги, делающие текст заголовками
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 8. Специальные символы.
- •Урок 9. Ссылки в html.
- •Ссылка - тег a
- •Урок 10. Создание списков.
- •Нумерованные списки
- •Маркированные списки
- •Списки определений
- •Вложенные списки
- •Списки списков
- •Урок 11. Работа с изображениями.
- •Размеры изображений
- •Отделение изображения от текста
- •Альтернативный текст
- •Изображение в качестве ссылки
- •Урок 12. Работа с таблицами - тег table.
- •Создаем таблицу
- •Оформляем строки (tr) и ячейки (td)
- •Атрибуты таблиц
- •Атрибуты ячеек
- •Урок 13. Работа с таблицами сложной структуры.
- •Тег colspan - объединение столбцов
- •Вложенные таблицы
- •Специальные символы
- •Домашнее задание №1.
- •Домашнее задание №2.
- •Домашнее задание №3.
- •Домашнее задание №4.
- •Домашнее задание №5.
- •Домашнее задание №6.
- •Домашнее задание №7.
- •Домашнее задание №8.
- •Домашнее задание №9.
- •Домашнее задание №10.
- •Домашнее задание №11.
- •Домашнее задание №12.
- •Домашнее задание №13.
- •Домашнее задание №14.
- •Домашнее задание №15.
- •Домашнее задание №16.
- •Домашнее задание №17.
- •Домашнее задание №18.
- •Домашнее задание №19.
- •Домашнее задание №20.
- •Домашнее задание №21.
Урок 12. Работа с таблицами - тег table.
Содержание урока:
Создаем таблицу
Оформляем таблицу
Оформляем строки и ячейки
Создаем таблицу
Таблица - один из основных инструментов для создания web-страниц. Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Если вы прошли серию уроков Делаем сайт - первые шаги, то вы понимаете о чем речь. Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки.
Например:
Название таблицы |
||
столбец 1 |
столбец 2 |
столбец 3 |
первый столбец первой строки |
второй столбец первой строки |
третий столбец первой строки |
первый столбец второй строки |
второй столбец второй строки |
третий столбец второй строки |
первый столбец третьей строки |
второй столбец третьей строки |
третий столбец третьей строки |
Рассмотрим нашу таблицу с точки зрения HTML:
сама таблица задается с помощью тегов <table></table>,
у таблицы есть название - теги <caption></caption>,
таблица состоит из строк - теги <tr></tr>,
каждая строка состоит из столбцов - теги <td></td>,
столбцы имеют названия, расположенные в первой строке - теги <th></th>.
Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:
<html>
<head>
<title>html table</title>
</head>
<body>
<table>
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
Результат:
Название таблицы |
||
1 |
2 |
3 |
11 |
12 |
13 |
21 |
22 |
23 |
31 |
32 |
33 |
Как видите, получилось не очень красиво, будем украшать. Оформляем таблицу Для этого у тега <table> существует ряд параметров:
width - задает ширину таблицы (в пикселах или % от ширины экрана),
bgcolor - задает цвет фона ячеек таблицы,
background - заливает фон таблицы рисунком,
border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы.
Применим эти параметры:
<html>
<head>
<title>html table</title>
</head>
<body>
<table width="300" bgcolor="plum" border="1">
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
Результат:
Название таблицы |
||
1 |
2 |
3 |
11 |
12 |
13 |
21 |
22 |
23 |
31 |
32 |
33 |
Уже лучше, но наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив еще три параметра:
align - задает выравнивание таблицы: слева (right), справа (left), по центру (center),
cellspacing - задает расстояние между ячейками таблицы (в пикселах),
cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).
Применим эти параметры:
<html>
<head>
<title>html table</title>
</head>
<body>
<table width="300" bgcolor="plum" border="1"
align="center" cellspacing="5" cellpadding="10">
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
Результат:
Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0", то границы примут привычный вид:
<table width="300" bgcolor="plum" border="1"
align="center" cellspacing="0" cellpadding="10">
Результат:
Вообще, за границы отвечают два параметра:
frame - задает вид рамки вокруг таблицы и может принимать следующие значения:
void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.
rules - задает вид внутренних границ таблицы и может принимать следующие значения:
none - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.
С помощью этих параметров можно задавать границы так, как вам хочется. Здесь приведем только один пример, сами же поэкспериментируйте со всеми.
<html>
<head>
<title>html table</title>
</head>
<body>
<table width="300" bgcolor="plum" border="1"
align="center" cellspacing="5" cellpadding="10"
rules="rows" frame="void">
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
Результат:
Следует заметить, что границы в разных браузерах отображаются немного по-разному.