Еще пример группировки столбцов и рядов
Модуль 2. Урок 2. Создание сложных таблиц
Сложные таблицы подразумевают объединение (слияние) ячеек по ширине или высоте. Для изучения темы мы построим такую простую таблицу:
<table>
<table border="1">
<tr>
<td>1</td> <td>2</td>
</tr>
<tr>
<td>3</td> <td>4</td>
</tr>
</table>
Вид данной таблицы в браузере показан на рис. 1.
Рис. 1. Простая таблица 2 на 2
Далее на основе этой простой таблице мы познакомимся со сложными.
Пример объединения столбцов по горизонтали (colspan)
<table>
<table border="1">
<tr>
<td colspan="2">1+2</td><!--COLUMN (СТОЛБЕЦ) span ( диапазон). В первой строке два столбца складываем вместе по горизонтали. Текст 1+2 писать не обязательно -->
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
Чтобы лучше запомнить - col ( column) это объединение столбецов ПО ГОРИЗОНТАЛИ. Атрибут colspan позволит нам объединять столбцы по горизонтали между собой и применяется он к тегу <td> (столбец). То есть, colspan определяет количество столбцов, которое ячейка данных должна охватывать по горизонтали. Следовательно, запись < td colspan="2"> означает объединение двух столбцов в одну строку по горизонтали (рис. 2).
Рис. 2. Объединение двух столбцов в одну строку
Итак, сolspan - количество столбцов по горизонтали, <td colspan ="3"> объединено 3 столбца (пустых, без текста) по ширине (рис. 3).
|
| ||
Рис. 3. Пример объединения столбцов по горизонтали
|
|
|
Пример объединения строк по вертикали (rowspan)
<table>
<table border="1">
<tr>
<td rowspan="2">1 и 3</td><!--ROW (ряд) span ( диапазон). В первой строке две стоки складываем вместе по горизонтали. Текст 1 и 3 писать не обязательно -->
<td>2</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
Чтобы лучше запомнить – row это ряд (строка), rowspan – объединение строк ПО ВЕРТИКАЛИ. Атрибут применяется к тегу к тегу <td> (столбец). Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Следовательно, наша запись <td rowspan="2"> означает объединения 2х строк по вертикали (рис. 4).
Рис. 4. Объединения 2х строк по вертикали
Итак: rowspan – количество строк, объединяемых по вертикали (высоте). Если <td rowspan="3">, то это значить, что в этой строке объединено 3 столбца по высоте (рис. 5).
|
| |
Рис. 5. Пример объединения строк по вертикали
Пример построения сложной таблицы
Шаг 1. Анализируем задание
Строим простую таблицу на основе сложной (рис. 6), нумеруем клетки – так будет проще понять, как будет выполнен код
|
|
|
Рис. 6. Анализируем задание, чтобы понять его код
Из рисунка мы видим, что в коде у нас не будет записей для ячеек 4 и 3
Шаг 2. Пишем код
<table>
<table border="1">
<body>
<table border="1" cellspacing="0"> <!-- расстояние между ячейками =0-->
<tr>
<td rowspan="2">ячейка 1</td>
<td colspan="2">ячейка 2</td>
</tr>
<tr>
<td>ячейка 5</td>
<td>ячейка 6</td>
</tr>
</table>
</body>
</table>
Совет
Запишите этот пример себе в тетрадь.
Еще пример группировки столбцов и рядов
Ниже дан пример сложной таблицы и ее код:
| ячейка 1 | ячейка 3 | |
| ячейка 4 | ячейка 5 | ячейка 6 |
| ячейка 8 | ячейка 9 | |
<body>
<table border="1" cellspacing="0"> <!-- расстояние между ячейками =0-->
<tr>
<td colspan="2"> ячейка 1 </td>
<!-- <td> ячейка 2 </td>-->
|
|
|
<td> ячейка 3 </td>
</tr>
<tr>
<td rowspan="2"> ячейка 4 </td>
<td> ячейка 5 </td>
<td> ячейка 6 </td>
</tr>
<tr>
<!-- <td> ячейка 7 </td>-->
<td> ячейка 8 </td>
<td> ячейка 9 </td>
</tr>
</table>
</body>
Примечание
Атрибут "cellspacing" (расстояние между ячейками) устанавливает величину отступа от границ ячеек до границ соседних элементов (других ячеек или границы таблицы). В качестве значения указывается длина отступа.
Подсказка
Чтобы понять суть кода выше, нарисуйте таблицу 3 на 3, напишите для нее код, закомментируйте 2 и 7 клетку. Возможно, что так понять работу со сложными таблицами станет проще.
| 1 | Клетка 2 пропадает (ремарка) | 3 |
| 4 | 5 | 6 |
| Клетка 7 пропадает (ремарка) | 8 | 9 |
Цвет рамки таблицы
|
|
|
Для любой таблицы можно задать рамку равную, например, 5 пикселям, а рамке мы можем задать цвет, например, красный:
<table border="5" bordercolor="red">
Таблица с изображением и рамкой
Посредством таблиц можно оформлять картинки в рамки.
<table border=5 bordercolor=#ff0000 height=200>
<tr>
<td>
<Img src="sobaka.jpg">
</td>
</tr>
</table>
Здесь мы задали размеры таблицы 200 на 200px, вставили в первую строку и первый столбец изображение и задали красный #ff0000 цвет рамки для ячейки (рис. 7).
Рис. 7. Таблица использована как рамка для изображения
Сложная таблица с цветной рамкой и цветными ячейками
Давайте исследуем такой код:
<table border="1" bordercolor="red">
<tr>
<td height="30" bgcolor="green" colspan="2"> Первая ячейка в первой строке зеленая, шириной в 2 столбца, высотой 30 пикселей
</td>
<td bgcolor="green" rowspan="2">Вторая ячейка в 1й строке зеленая, высотой в 2 строки, зеленая, шириной 60 пикселей
</td>
</tr>
<tr>
<td height="30" bgcolor="red">Первая ячейка во второй строке красная, высотой 30, шириной 50 пикселей
</td>
<td bgcolor="red">Вторая ячейка второй строки красная, шириной 60 пикселей
</td>
</tr>
</table>
Такая таблица в браузере смотрится так (рис. 8).
Рис. 8. Сложная цветная таблица из 4 ячеек
Прежде, чем идти к преподавателю и отвечать на оценку, проверьте себя: сможете ли вы ответить на такие вопросы и выполнить такие задания?
Вопросы для самоконтроля
- Покажите, как анализировать построение сложной таблицы на базе простой
- Повторите пример объединения столбцов по горизонтали
- Повторите пример объединения строк по вертикали
- Выполните таблицу с изображением и рамкой
- Выполните сложную таблицу с цветной рамкой и цветными ячейками
Задания для самопроверки
1. Построить такие таблицы:
2. Построить сложную таблицу (рис. 9).
Рис. 9. Таблица-шаблон сайта
Атрибуты такой таблицы:
- Фон bgcolor=blue
- Текст font color=red
Подсказка
Примечание
Возможно, что кому-то поможет при изучении темы работа с генератором таблиц
https://realadmin.ru/saytostroy/generator-html-table.html
ПРИМЕРЫ
Группировка столбцов и рядов
Повторите страницу по данному по образцу:
| ячейка 1 | ячейка 3 | |
| ячейка 4 | ячейка 5 | ячейка 6 |
| ячейка 8 | ячейка 9 | |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Задачник HTMLя</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td colspan="2"> ячейка 1 </td>
<!-- <td> ячейка 2 </td>-->
<td> ячейка 3 </td>
</tr>
<tr>
<td rowspan="2"> ячейка 4 </td>
<td> ячейка 5 </td>
<td> ячейка 6 </td>
</tr>
<tr>
<!-- <td> ячейка 7 </td>-->
<td> ячейка 8 </td>
<td> ячейка 9 </td>
</tr>
</table>
</body>
</html>
2. Повторите страницу по данному по образцу:
| ячейка 1 | ||
| ячейка 4 | ячейка 5 | ячейка 6 |
| ячейка 8 | ячейка 9 | |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Задачник HTML </title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td colspan="3"> ячейка 1 </td>
<!-- <td> ячейка 2 </td>-->
<!-- <td> ячейка 3 </td>-->
</tr>
<tr>
<td> ячейка 4 </td>
<td rowspan="2"> ячейка 5 </td>
<td> ячейка 6 </td>
</tr>
<tr>
<!-- <td> ячейка 7 </td>-->
<td> ячейка 8 </td>
<td> ячейка 9 </td>
</tr>
</table>
</body>
</html>
3. Повторите страницу по данному по образцу:
| ячейка 1 | ячейка 2 | ячейка 3 |
| ячейка 5 | ||
| ячейка 8 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Задачник HTML </title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td rowspan="3"> ячейка 1 </td>
<td> ячейка 2 </td>
<td rowspan="3"> ячейка 3 </td>
</tr>
<tr>
<!-- <td> ячейка 4 </td>-->
<td> ячейка 5 </td>
<!-- <td> ячейка 6 </td>-->
</tr>
<tr>
<!-- <td> ячейка 7 </td>-->
<td> ячейка 8 </td>
<!-- <td> ячейка 9 </td>-->
</tr>
</table>
</body>
</html>
Закрепление
Повторите страницу по данному по образцу:
| номер | теги | |
| тег | значение | |
| 1 | p | для текста |
| 2 | a | |
| 3 | b | |
| 4 | i | |
| 5 | table | таблица |
| 6 | tr | ряд таблицы |
| 7 | td | ячейки таблицы |
| 8 | th | |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Задачник HTML </title>
</head>
<body>
<table border="1" cellspacing="0" height="200">
<tr>
<th rowspan="2">номер</th>
<th colspan="2">теги</th>
</tr>
<tr>
<!-- <th>номер</th> -->
<th>тег</th>
<th>значение</th>
</tr>
<tr align="center">
<td>1</td>
<td>p</td>
<td rowspan="4">для текста</td>
</tr>
<tr align="center">
<td>2</td>
<td>a</td>
<!--<td>ссылка</td> -->
</tr>
<tr align="center">
<td>3</td>
<td>b</td>
<!-- <td>жирный текст</td> -->
</tr>
<tr align="center">
<td>4</td>
<td>i</td>
<!-- <td>курсив</td>-->
</tr>
<tr align="center">
<td>5</td>
<td>table</td>
<td>таблица</td>
</tr>
<tr align="center">
<td>6</td>
<td>tr</td>
<td>ряд таблицы</td>
</tr>
<tr align="center">
<td>7</td>
<td>td</td>
<td rowspan="2">ячейки таблицы</td>
</tr>
<tr align="center">
<td>8</td>
<td>th</td>
<!-- <td>заголовок таблицы</td>-->
</tr>
</table>
</body>
</html>
Оглавление
Модуль 2. Урок 2. Создание сложных таблиц. 1
Пример объединения столбцов по горизонтали (colspan) 1
Пример объединения строк по вертикали (rowspan) 2
Пример построения сложной таблицы.. 2
Еще пример группировки столбцов и рядов. 3
Цвет рамки таблицы.. 4
Таблица с изображением и рамкой. 4
Сложная таблица с цветной рамкой и цветными ячейками. 5
Вопросы.. 6
Задания. 6
Подсказка. 6
Оглавление. 6
Дата добавления: 2021-12-10; просмотров: 30; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!