Add web design files

This commit is contained in:
2025-11-20 21:37:53 +02:00
parent 258f24570a
commit 9192716bfb
510 changed files with 12551 additions and 0 deletions

Binary file not shown.

View File

@@ -0,0 +1,192 @@
@charset "utf-8";
/* CSS Document */
* {
font-family: Arial;
}
table {
width: 800px;
margin-bottom: 80px;
margin-left: 15px;
}
.red {
background-color: #8c0003;
}
.pale {
background-color: #fdf6e6;
}
.t1 {
height: 500px;
border-collapse: collapse;
border-spacing: 0px;
}
.t1 td {
border: 2px solid #999;
}
.t1_menu {
width: 200px;
}
.t1_l1 {
height: 100px;
}
.t1_l3 {
height: 50px;
}
.t2 {
height: 350px;
border-collapse: collapse;
border-spacing: 0px;
}
.t2 td {
border: 2px solid #999;
}
.t2_l1 {
height: 80px;
}
.t2_l2 {
height: 50px;
}
.t3 {
height: 350px;
border-collapse: collapse;
border-spacing: 0px;
}
.t3 td {
border: 2px solid #999;
}
.t3_c1 {
width: 250px;
}
.t3_l1 {
height: 100px;
}
.t4 {
height: 350px;
border-collapse: collapse;
border-spacing: 0px;
}
.t4 td {
border: 2px solid #999;
}
.t4_l1 {
height: 75px;
}
.t4_l3 {
height: 50px;
}
.t4_menu {
width: 200px;
}
.t6_int_t {
width: 550px;
height: 200px;
margin-left: 25px;
margin-bottom: 0px;
border-collapse: collapse;
border-spacing: 0px;
}
.t6_int_t td {
border: 2px solid #999;
}
.t6_int_left {
width: 150px;
}
.t7 {
height: 260px;
border-collapse: separate;
border-spacing: 10px;
border: 2px solid #e4e4e4;
}
.t7 caption {
color: #6f7a5d;
text-align: right;
}
.t7 td {
border: 2px solid #e4e4e4;
vertical-align: top;
padding-left: 5px;
}
.t7_l1 {
height: 75px;
background-color: #e4e4e4;
font-weight: bold;
}
.t7_l1 td{
padding-top: 10px;
}
.t7_l3 {
height: 50px;
}
.t8 {
border-collapse: separate;
border-spacing: 4px;
border: 2px solid black;
background-color: #E9E9E9;
}
.t8 td {
border: 2px solid black;
}
.t9 {
border-collapse: collapse;
border-spacing: 0px;
height: 165px;
}
.t9 td {
text-align: center;
}
.t9_l1 {
border-top: 2px solid black;
height: 35px;
}
.t9_l2 {
height: 35px;
}
.t9_l3 {
border-top: 1px solid black;
}
.t9_l4 {
border-top: 1px solid black;
}
.t9_l5 {
border-top: 1px solid black;
border-bottom: 2px solid black;
}

View File

@@ -0,0 +1,183 @@
<!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>

View File

@@ -0,0 +1,456 @@
@charset "utf-8";
/* CSS Document */
.otstup{
margin-bottom: 80px;
}
.t1{
border: 3px solid #000000;
width: 250px;
height: 125px;
border-spacing: 2px;
}
.capt{
font-size: 21px;
padding-bottom: 10px;
}
.small_capt{
font-size: 17px;
padding-bottom: 9px;
}
.title{
font-size: 30px;
margin: 0;
margin-bottom: 30px;
}
.t1_ltd{
border: 3px solid #BBBBBB;
width: 110px;
}
.t1_rtd{
border: 3px solid #BBBBBB;
}
.t2{
border: 6px solid #000000;
width: 250px;
height: 125px;
border-spacing: 0px;
}
.t2_ltd{
width: 110px;
border-right: 2px solid #BBBBBB;
border-bottom: 2px solid #BBBBBB;
}
.t2_rtd{
border-bottom: 2px solid #BBBBBB;
}
.t2_bltd{
border-right: 2px solid #BBBBBB;
}
.t3{
border: 3px solid #000000;
width: 250px;
height: 125px;
border-spacing: 0px;
}
.t3_ltd{
width: 110px;
border-bottom: 2px solid #BBBBBB;
}
.t3_rtd{
border-bottom: 2px solid #BBBBBB;
}
.t4{
border: 3px solid #000000;
width: 250px;
height: 125px;
border-spacing: 0px;
}
.t4_ltd{
width: 110px;
}
.t4_rtd{
border-left: 2px solid #BBBBBB;
}
.t5{
border: 3px solid #000000;
width: 285px;
height: 160px;
border-spacing: 4px;
}
.t5_td{
border: 2px solid #BBBBBB;
padding-left: 7px;
}
.t6{
border: 3px solid #000000;
width: 300px;
height: 125px;
border-spacing: 0px;
}
.t6_ltd{
border-right: 1px solid #BBBBBB;
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
}
.t6_rtd{
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
}
.t6_bltd{
border-right: 1px solid #BBBBBB;
padding-left: 7px;
}
.t6_brtd{
padding-left: 7px;
}
.t7{
border: 3px solid #000000;
width: 300px;
height: 130px;
border-spacing: 0px;
}
.t7_tltd{
border-right: 1px solid #000000;
border-bottom: 2px solid #BBBBBB;
height: 35px;
}
.t7_trtd{
border-bottom: 2px solid #BBBBBB;
height: 35px;
}
.t7_ltd{
border-right: 1px solid #BBBBBB;
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
}
.t7_rtd{
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
}
.t7_bltd{
border-right: 1px solid #BBBBBB;
padding-left: 7px;
}
.t7_brtd{
padding-left: 7px;
}
.t8{
border: 3px solid #000000;
width: 340px;
height: 140px;
border-spacing: 0px;
}
.t8_tltd{
border-right: 2px solid #000000;
border-bottom: 1px solid #000000;
}
.t8_height{
height: 30px;
}
.t8_trtd{
border-bottom: 1px solid #000000;
}
.t8_ltd{
border-right: 1px solid #BBBBBB;
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
}
.t8_rtd{
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
}
.t8_bltd{
border-right: 1px solid #BBBBBB;
padding-left: 7px;
}
.t8_brtd{
padding-left: 7px;
}
.t10{
border: 3px solid #000000;
width: 370px;
height: 175px;
border-spacing: 4px;
}
.t10_left{
width: 140px;
}
.t10_htd{
border: 1px solid #000000;
height: 30px;
}
.t10_trtd{
border: 1px solid #000000;
background-color:#FF95AC;
}
.t10_td{
border: 1px solid #BBBBBB;
padding-left: 7px;
}
.t11{
border: 3px solid #000000;
width: 370px;
height: 175px;
border-spacing: 4px;
}
.t11_left{
width: 140px;
}
.t11_htd{
border: 1px solid #000000;
height: 30px;
}
.t11_td{
border: 1px solid #BBBBBB;
padding-left: 7px;
}
.t13{
border: 3px solid #000000;
width: 200px;
border-spacing: 4px;
}
.t13 td{
border: 1px solid #BBBBBB;
padding-left: 7px;
}
.t14{
border: 3px solid #000000;
width: 200px;
border-spacing: 4px;
}
.t14 td{
border: 1px solid #BBBBBB;
padding-left: 7px;
}
.t15{
border: 3px solid #000000;
width: 200px;
border-spacing: 4px;
}
.t15 td{
border: 1px solid #BBBBBB;
padding-left: 7px;
}
.t16{
border: 3px solid #000000;
width: 150px;
border-spacing: 4px;
}
.t16 td{
border: 1px solid #BBBBBB;
padding-left: 7px;
}
.t17{
border: 3px solid #000000;
width: 340px;
height: 140px;
border-spacing: 0px;
}
.t17_height{
height: 30px;
}
.t17_tltd{
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#B8E7E3;
}
.t17_trtd{
border-bottom: 1px solid #000000;
background-color:#B8E7E3;
}
.t17_ltd{
border-right: 1px solid #BBBBBB;
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
background-color:#EFEEC6;
}
.t17_rtd{
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
background-color:#EFEEC6;
}
.t17_bltd{
border-right: 1px solid #BBBBBB;
padding-left: 7px;
background-color:#EFEEC6;
}
.t17_brtd{
padding-left: 7px;
background-color:#EFEEC6;
}
.t18{
border: 3px solid #000000;
width: 340px;
height: 140px;
border-spacing: 0px;
}
.t18_height{
height: 30px;
}
.mozilla18{
background-color: pink;
}
.google18{
background-color: lightgreen;
}
.safari18{
background-color: lightblue;
}
.t18_tltd{
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.t18_trtd{
border-bottom: 1px solid #000000;
}
.t18_ltd{
border-right: 1px solid #BBBBBB;
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
}
.t18_rtd{
border-bottom: 1px solid #BBBBBB;
padding-left: 7px;
}
.t18_bltd{
border-right: 1px solid #BBBBBB;
padding-left: 7px;
}
.t18_brtd{
padding-left: 7px;
}
.t19{
width: 350px;
border-spacing: 0px;
}
.t19 td{
border-bottom: 2px solid #BBBBBB;
height: 35px;
}
.t20{
width: 350px;
border-spacing: 0px;
}
.t20_align{
text-align: center
}
.t20_ttd{
border-bottom: 2px solid #000000;
height: 35px;
}
.t20_ltd{
height: 35px;
padding-left: 7px;
border-left: 1px solid #BBBBBB;
border-bottom: 1px solid #BBBBBB;
}
.t20_rtd{
height: 35px;
padding-left: 7px;
border-right: 1px solid #BBBBBB;
border-left: 1px solid #BBBBBB;
border-bottom: 1px solid #BBBBBB;
}
.t21{
width: 390px;
border-spacing: 0px;
}
.t21 td{
font-family: Arial;
}
.t21 caption{
font-size: 30px;
padding-bottom: 10px;
font-family: Arial;
text-align: left;
}
.t21_padding{
padding-left: 7px;
}
.t21_align_center{
text-align: center;
}
.t21_align_right{
text-align: right;
padding-right: 7px;
}
.t21_tltd{
border: 1px solid #000000;
height: 35px;
background-color: teal;
color: white;
width: 125px;
}
.t21_tctd{
background-color: lightblue;
color: white;
width: 140px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.t21_trtd{
background-color: teal;
color: white;
width: 125px;
border: 1px solid #000000;
}
.t21_td{
border-bottom: 1px solid #BBBBBB;
height: 35px;
}
.t21_yellow{
border-bottom: 1px solid #BBBBBB;
height: 35px;
background-color:#EFEEC6;
}
.t22{
width: 504px;
border-spacing: 7px;
}
.t22 td{
text-align: center;
vertical-align: middle;
font-size: 12px;
color: white;
height: 18px;
}
.t22_space{
width: 5px;
}
.t22_orange{
background-color: orange;
width: 56px;
}
.t22_blue{
background-color: skyblue;
width: 56px;
}
.t22_green{
background-color:mediumseagreen;
width: 56px;
}
.t22_purple{
background-color: magenta;
width: 56px;
}

View File

@@ -0,0 +1,557 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS tables</title>
<link href="task.css" rel="stylesheet" type="text/css">
</head>
<body>
1
<table class="t1 otstup">
<caption class="capt"><strong>Распределение браузеров</strong></caption>
<tr>
<td class="t1_ltd">Браузер</td>
<td class="t1_rtd">Посещения</td>
</tr>
<tr>
<td class="t1_ltd">Mozilla Firefox</td>
<td class="t1_rtd">163</td>
</tr>
<tr>
<td class="t1_ltd">Google Chrome</td>
<td class="t1_rtd">78</td>
</tr>
<tr>
<td class="t1_ltd">Safari</td>
<td class="t1_rtd">35</td>
</tr>
</table>
2
<table class="t2 otstup">
<caption class="capt"><strong>Распределение браузеров</strong></caption>
<tr>
<td class="t2_ltd">Браузер</td>
<td class="t2_rtd">Посещения</td>
</tr>
<tr>
<td class="t2_ltd">Mozilla Firefox</td>
<td class="t2_rtd">163</td>
</tr>
<tr>
<td class="t2_ltd">Google Chrome</td>
<td class="t2_rtd">78</td>
</tr>
<tr>
<td class="t2_bltd">Safari</td>
<td>35</td>
</tr>
</table>
3
<table class="t3 otstup">
<caption class="capt"><strong>Распределение браузеров</strong></caption>
<tr>
<td class="t3_ltd">Браузер</td>
<td class="t3_rtd">Посещения</td>
<td class="t3_rtd">Доля</td>
</tr>
<tr>
<td class="t3_ltd">Mozilla Firefox</td>
<td class="t3_rtd">163</td>
<td class="t3_rtd">59%</td>
</tr>
<tr>
<td class="t3_ltd">Google Chrome</td>
<td class="t3_rtd">78</td>
<td class="t3_rtd">28%</td>
</tr>
<tr>
<td>Safari</td>
<td>35</td>
<td>13%</td>
</tr>
</table>
4
<table class="t4 otstup">
<caption class="capt"><strong>Распределение браузеров</strong></caption>
<tr>
<td class="t4_ltd">Браузер</td>
<td class="t4_rtd">Посещения</td>
<td class="t4_rtd">Доля</td>
</tr>
<tr>
<td class="t4_ltd">Mozilla Firefox</td>
<td class="t4_rtd">163</td>
<td class="t4_rtd">59%</td>
</tr>
<tr>
<td class="t4_ltd">Google Chrome</td>
<td class="t4_rtd">78</td>
<td class="t4_rtd">28%</td>
</tr>
<tr>
<td>Safari</td>
<td class="t4_rtd">35</td>
<td class="t4_rtd">13%</td>
</tr>
</table>
5
<table class="t5 otstup">
<caption class="capt"><strong>Распределение браузеров</strong></caption>
<tr>
<td class="t5_td">Браузер</td>
<td class="t5_td">Посещения</td>
<td class="t5_td">Доля</td>
</tr>
<tr>
<td class="t5_td">Mozilla Firefox</td>
<td class="t5_td">163</td>
<td class="t5_td">59%</td>
</tr>
<tr>
<td class="t5_td">Google Chrome</td>
<td class="t5_td">78</td>
<td class="t5_td">28%</td>
</tr>
<tr>
<td class="t5_td">Safari</td>
<td class="t5_td">35</td>
<td class="t5_td">13%</td>
</tr>
</table>
6
<table class="t6 otstup">
<caption class="capt"><strong>Распределение браузеров</strong></caption>
<tr>
<td class="t6_ltd">Браузер</td>
<td class="t6_ltd">Посещения</td>
<td class="t6_rtd">Доля</td>
</tr>
<tr>
<td class="t6_ltd">Mozilla Firefox</td>
<td class="t6_ltd">163</td>
<td class="t6_rtd">59%</td>
</tr>
<tr>
<td class="t6_ltd">Google Chrome</td>
<td class="t6_ltd">78</td>
<td class="t6_rtd">28%</td>
</tr>
<tr>
<td class="t6_bltd">Safari</td>
<td class="t6_bltd">35</td>
<td class="t6_brtd">13%</td>
</tr>
</table>
7
<table class="t7 otstup">
<caption class="capt"><strong>Распределение браузеров</strong></caption>
<tr>
<th class="t7_tltd">Браузер</th>
<th class="t7_tltd">Посещения</th>
<th class="t7_trtd">Доля</th>
</tr>
<tr>
<td class="t7_ltd">Mozilla Firefox</td>
<td class="t7_ltd">163</td>
<td class="t7_rtd">59%</td>
</tr>
<tr>
<td class="t7_ltd">Google Chrome</td>
<td class="t7_ltd">78</td>
<td class="t7_rtd">28%</td>
</tr>
<tr>
<td class="t7_bltd">Safari</td>
<td class="t7_bltd">35</td>
<td class="t7_brtd">13%</td>
</tr>
</table>
8
<table class="t8 otstup">
<tr>
<th class="t8_tltd" rowspan="2">Браузер</th>
<th class="t8_trtd t8_height" colspan="2">Посещения</th>
</tr>
<tr>
<th class="t8_tltd t8_height">Количество</th>
<th class="t8_trtd">В процентах</th>
</tr>
<tr>
<td class="t8_ltd">Mozilla Firefox</td>
<td class="t8_ltd">163</td>
<td class="t8_rtd">59%</td>
</tr>
<tr>
<td class="t8_ltd">Google Chrome</td>
<td class="t8_ltd">78</td>
<td class="t8_rtd">28%</td>
</tr>
<tr>
<td class="t8_bltd">Safari</td>
<td class="t8_bltd">35</td>
<td class="t8_brtd">13%</td>
</tr>
</table>
10
<table class="t10 otstup">
<caption class="small_capt">Распределение браузеров</caption>
<tr>
<th class="t10_htd t10_left">Браузер</th>
<th class="t10_htd">Посещения</th>
<td class="t10_trtd"></td>
</tr>
<tr>
<th class="t10_htd"></th>
<th class="t10_htd">Количество</th>
<th class="t10_htd">В процентах</th>
</tr>
<tr>
<td class="t10_td">Mozilla Firefox</td>
<td class="t10_td">163</td>
<td class="t10_td">59%</td>
</tr>
<tr>
<td class="t10_td">Google Chrome</td>
<td class="t10_td">78</td>
<td class="t10_td">28%</td>
</tr>
<tr>
<td class="t10_td">Safari</td>
<td class="t10_td">35</td>
<td class="t10_td">13%</td>
</tr>
</table>
11
<table class="t11 otstup">
<caption class="small_capt">Распределение браузеров</caption>
<tr>
<th class="t11_htd t11_left">Браузер</th>
<th class="t11_htd" colspan="2">Посещения</th>
</tr>
<tr>
<th class="t11_htd"></th>
<th class="t11_htd">Количество</th>
<th class="t11_htd">В процентах</th>
</tr>
<tr>
<td class="t11_td">Mozilla Firefox</td>
<td class="t11_td">163</td>
<td class="t11_td">59%</td>
</tr>
<tr>
<td class="t11_td">Google Chrome</td>
<td class="t11_td">78</td>
<td class="t11_td">28%</td>
</tr>
<tr>
<td class="t11_td">Safari</td>
<td class="t11_td">35</td>
<td class="t11_td">13%</td>
</tr>
</table>
12
<table class="t10 otstup">
<caption class="small_capt">Распределение браузеров</caption>
<tr>
<th class="t11_htd t10_left">Браузер</th>
<th class="t11_htd" colspan="2">Посещения</th>
</tr>
<tr>
<th class="t10_trtd"></th>
<th class="t10_htd">Количество</th>
<th class="t10_htd">В процентах</th>
</tr>
<tr>
<td class="t10_td">Mozilla Firefox</td>
<td class="t10_td">163</td>
<td class="t10_td">59%</td>
</tr>
<tr>
<td class="t10_td">Google Chrome</td>
<td class="t10_td">78</td>
<td class="t10_td">28%</td>
</tr>
<tr>
<td class="t10_td">Safari</td>
<td class="t10_td">35</td>
<td class="t10_td">13%</td>
</tr>
</table>
13
<table class="t13 otstup">
<tr>
<td>1.1</td>
<td colspan="2">1.2</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td colspan="3">2.2</td>
</tr>
<tr>
<td colspan="4">3.1</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
</tr>
</table>
14
<table class="t14 otstup">
<tr>
<td rowspan="4">1.1</td>
<td>1.2</td>
<td rowspan="3">1.3</td>
<td>1.4</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
<td>2.4</td>
</tr>
<tr>
<td>3.4</td>
</tr>
<tr>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
</tr>
</table>
15
<table class="t15 otstup">
<tr>
<td rowspan="3">1.1</td>
<td>1.2</td>
<td rowspan="2">1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.2</td>
<td>3.4</td>
</tr>
<tr>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
</tr>
</table>
16
<table class="t16 otstup">
<tr>
<td rowspan="2" colspan="2">1.1</td>
<td>1.3</td>
</tr>
<tr>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
17
<table class="t17 otstup">
<tr>
<th class="t17_tltd" rowspan="2">Браузер</th>
<th class="t17_trtd t17_height" colspan="2">Посещения</th>
</tr>
<tr>
<th class="t17_tltd t17_height">Количество</th>
<th class="t17_trtd">В процентах</th>
</tr>
<tr>
<td class="t17_ltd">Mozilla Firefox</td>
<td class="t17_ltd">163</td>
<td class="t17_rtd">59%</td>
</tr>
<tr>
<td class="t17_ltd">Google Chrome</td>
<td class="t17_ltd">78</td>
<td class="t17_rtd">28%</td>
</tr>
<tr>
<td class="t17_bltd">Safari</td>
<td class="t17_bltd">35</td>
<td class="t17_brtd">13%</td>
</tr>
</table>
18
<table class="t18 otstup">
<tr>
<th class="t18_tltd" rowspan="2">Браузер</th>
<th class="t18_trtd t18_height" colspan="2">Посещения</th>
</tr>
<tr>
<th class="t18_tltd t18_height">Количество</th>
<th class="t18_trtd">В процентах</th>
</tr>
<tr class="mozilla18">
<td class="t18_ltd">Mozilla Firefox</td>
<td class="t18_ltd">163</td>
<td class="t18_rtd">59%</td>
</tr>
<tr class="google18">
<td class="t18_ltd">Google Chrome</td>
<td class="t18_ltd">78</td>
<td class="t18_rtd">28%</td>
</tr>
<tr class="safari18">
<td class="t18_bltd">Safari</td>
<td class="t18_bltd">35</td>
<td class="t18_brtd">13%</td>
</tr>
</table>
19
<table class="t19 otstup">
<caption class="capt"><strong>Посещения по городам</strong></caption>
<tr>
<td>Город</td>
<td>Посещения</td>
<td>Страниц</td>
<td>Время</td>
</tr>
<tr>
<td>СПб</td>
<td>199</td>
<td>18,02</td>
<td>00:13:45</td>
</tr>
<tr>
<td>Москва</td>
<td>69</td>
<td>1,48</td>
<td>00:00:44</td>
</tr>
<tr>
<td>Киев</td>
<td>5</td>
<td>13,43</td>
<td>00:18:07</td>
</tr>
</table>
20
<table class="t20 otstup">
<tr>
<td class="t20_ttd"><strong>Город</strong></td>
<td class="t20_ttd"><strong>Посещения</strong></td>
<td class="t20_ttd"><strong>Страниц</strong></td>
<td class="t20_ttd"><strong>Время</strong></td>
</tr>
<tr>
<td class="t20_ltd">СПб</td>
<td class="t20_ltd">199</td>
<td class="t20_ltd">18,02</td>
<td class="t20_rtd">00:13:45</td>
</tr>
<tr>
<td class="t20_ltd">Москва</td>
<td class="t20_ltd">69</td>
<td class="t20_ltd" rowspan="2">нет данных</td>
<td class="t20_rtd">00:00:44</td>
</tr>
<tr>
<td class="t20_ltd">Киев</td>
<td class="t20_ltd">5</td>
<td class="t20_rtd">00:18:07</td>
</tr>
<tr>
<td class="t20_ltd" colspan="3">Всего посещений</td>
<td class="t20_rtd">273</td>
</tr>
<tr>
<td class="t20_align" colspan="4">Посещения по городам</td>
</tr>
</table>
21
<table class="t21 otstup">
<caption><strong>Итоговая таблица</strong></caption>
<tr>
<td class="t21_tltd t21_padding"><strong>Город</strong></td>
<td class="t21_tctd t21_align_center"><strong>Посещений</strong></td>
<td class="t21_trtd t21_align_right"><strong>%</strong></td>
</tr>
<tr>
<td class="t21_td t21_padding">СПб</td>
<td class="t21_td t21_align_center">199</td>
<td class="t21_td t21_align_right">65.12</td>
</tr>
<tr>
<td class="t21_yellow t21_padding">Москва</td>
<td class="t21_yellow t21_align_center">69</td>
<td class="t21_yellow t21_align_right">21.3</td>
</tr>
<tr>
<td class="t21_td t21_padding">Киев</td>
<td class="t21_td t21_align_center">5</td>
<td class="t21_td t21_align_right">8</td>
</tr>
<tr>
<td class="t21_yellow t21_padding" colspan="2">Посещений за весь период</td>
<td class="t21_yellow t21_align_right">273</td>
</tr>
</table>
22
<table class="t22">
<tr>
<td class="t22_orange">$ 5</td>
<td class="t22_orange">$ 75</td>
<td class="t22_orange">$ 25</td>
<td class="t22_green">$ 15</td>
<td class="t22_green">$ 65</td>
<td class="t22_orange">$ 3</td>
<td class="t22_orange">$ 82</td>
<td class="t22_purple">$ 33</td>
<td class="t22_space"></td>
<td class="t22_orange">Bonus</td>
</tr>
<tr>
<td class="t22_blue">$ 25</td>
<td class="t22_orange">$ 40</td>
<td class="t22_orange">$ 140</td>
<td class="t22_green">$ 26</td>
<td class="t22_green">$ 35</td>
<td class="t22_orange">$ 42</td>
<td class="t22_purple">$ 45</td>
<td class="t22_purple">$ 29</td>
<td class="t22_space"></td>
<td class="t22_orange">Bonus</td>
</tr>
<tr>
<td class="t22_blue">Bonus</td>
<td class="t22_blue">$ 50</td>
<td class="t22_orange">$ 2</td>
<td class="t22_green">$ 30</td>
<td class="t22_orange">$ 24</td>
<td class="t22_purple">$ 12</td>
<td class="t22_purple">$ 24</td>
<td class="t22_purple">$ 30</td>
<td class="t22_space"></td>
<td class="t22_blue">$ 72</td>
</tr>
</table>
</body>
</html>