Files
learning/web-design/Файлы/таблицы css/lesson_maket_table.html
2025-11-20 21:37:53 +02:00

184 lines
6.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link href="lesson_maket_table.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3>Задание 1</h3>
<table class="t1">
<tr class="t1_l1 red">
<td colspan="2">шапка сайта</td>
</tr>
<tr class="t1_l2">
<td class="t1_menu pale">меню</td>
<td class="pale">контент</td>
</tr>
<tr class="t1_l3 red">
<td colspan="2">низ сайта</td>
</tr>
</table>
<h3>Задание 2</h3>
<table class="t2">
<tr class="t2_l1 red">
<td colspan="6">шапка сайта</td>
</tr>
<tr class="t2_l2 pale">
<td>меню</td>
<td>меню</td>
<td>меню</td>
<td>меню</td>
<td>меню</td>
<td>меню</td>
</tr>
<tr class="t2_l3">
<td colspan="2" class="red">новости</td>
<td colspan="4">контент</td>
</tr>
</table>
<h3>Задание 3</h3>
<table class="t3">
<tr class="t3_l1">
<td class="red t3_c1" rowspan="2">меню</td>
<td class="red">шапка</td>
</tr>
<tr class="t3_l2">
<td class="pale">контент</td>
</tr>
</table>
<h3>Задание 4</h3>
<table class="t4">
<tr class="t4_l1">
<td class="red">шапка</td>
<td rowspan="2" class="red t4_menu">меню</td>
</tr>
<tr class="t4_l2">
<td class="pale">контент</td>
</tr>
<tr class="t4_l3">
<td colspan="2" class="red">низ сайта</td>
</tr>
</table>
<h3>Задание 5</h3>
<table class="t4">
<tr class="t4_l1">
<td class="red">шапка</td>
<td rowspan="2" class="red t4_menu">меню</td>
</tr>
<tr class="t4_l2">
<td class="pale">контент</td>
</tr>
<tr class="t4_l3">
<td colspan="2" class="red">низ сайта</td>
</tr>
</table>
<h3>Задание 6</h3>
<table class="t4">
<tr class="t4_l1">
<td class="red">шапка</td>
<td rowspan="2" class="red t4_menu">меню</td>
</tr>
<tr class="t4_l2">
<td>
<table class="t6_int_t pale">
<tr>
<td class="t6_int_left">Здесь ромашка</td>
<td>Здесь текст о ромашках</td>
</tr>
<tr>
<td>Здесь тюльпан</td>
<td>Здесь текст о тюльпанах</td>
</tr>
<tr>
<td>Здесь гербер</td>
<td>Здесь текст о герберах</td>
</tr>
</table>
</td>
</tr>
<tr class="t4_l3">
<td colspan="2" class="red">низ сайта</td>
</tr>
</table>
<h3>Задание 7</h3>
<table class="t7">
<caption>Объединение ячеек по 2ум направлениям</caption>
<tr class="t7_l1">
<td>Столбец 1</td>
<td>Столбец 2</td>
<td>Столбец 3</td>
<td>Столбец 4</td>
</tr>
<tr class="t7_l2">
<td colspan="3">Строка2 Ячейка1 (Соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr class="t7_l3">
<td rowspan="2" colspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr class="t7_l4">
<td>Строка4 Ячейка3</td>
</tr>
</table>
<h3>Задание 8</h3>
<table class="t8">
<tr class="t8_l1">
<td colspan="4">Шапка</td>
</tr>
<tr class="t8_l2">
<td>Блок1 левой колонки</td>
<td colspan="2">Центральный блок</td>
<td rowspan="3">Правая колонка</td>
</tr>
<tr class="t8_l3">
<td>Блок2 левой колонки</td>
<td>Левый блок1 центральной колонки</td>
<td>Правый блок1 центральной колонки</td>
</tr>
<tr class="t8_l4">
<td>Блок3 левой колонки</td>
<td>Левый блок2 центральной колонки</td>
<td>Правый блок2 центральной колонки</td>
</tr>
<tr class="t8_l5">
<td colspan="4">Подвал</td>
</tr>
</table>
<h3>Задание 9</h3>
<table class="t9">
<tr class="t9_l1">
<th rowspan="2">Вид соединения</th>
<th colspan="2">Поля допусков ширины шпоночного паза</th>
</tr>
<tr class="t9_l2">
<th>Вал</th>
<th>Втулка</th>
</tr>
<tr class="t9_l3">
<td>Свободное</td>
<td>H9</td>
<td>D10</td>
</tr>
<tr class="t9_l4">
<td>Нормальное</td>
<td>N9</td>
<td>I<sub>s</sub>9</td>
</tr>
<tr class="t9_l5">
<td>Плотное</td>
<td colspan="2">P9</td>
</tr>
</table>
</body>
</html>