Таблицы. Верстка сайта. Урок 9 2

1. Таблицы

Урок 9

2. Верстка сайта

3. Блочная (адаптированная) верстка

4. Табличная верстка

5.

Таблицы в HTML
Описание таблицы
Описание строки
Описание ячейки

6.

Таблицы в HTML
пример
результат

7.

Таблицы в HTML
Объединение ячеек.

8.

Таблицы в HTML
Объединение ячеек.
<table border="1">
<tr>
<td rowspan="3">строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2">строка3 ячейка2</td>
</tr>
</table>
Данная ячейка займет 3
строки
Данная ячейка займет 2
колонки

9. Практическая работа

Урок 9

10. Практическая работа

В папке 2_lesson на рабочем столе (названа своей
фамилией) открываем через SublimeText
файл photo.html:

11. Практическая работа

Создать еще одну страницу table.html

12. Практическая работа

Работаем со страницей table.html. Добавить
заголовок.
Добавить на все стр. гиперссылку на table.html

13. Практическая работа

Добавляем на страницу таблицу «Расписание
тренировок»

14. Практическая работа

Заполняем ячейки текстом

15. Практическая работа

Объединяем ячейки
Не забыть убрать лишние ячейки!

16. Практическая работа

17. Самостоятельная работа

Добавить в таблицу еще одну строку (сразу под
заголовком). Загрузить в нее картинки.
Размер картинок задать: width=120px