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

View File

@@ -0,0 +1,6 @@
p{font-family:verdana;
font-size:13px;
}
li{font-family:verdana;
font-size:13px;
}

View File

@@ -0,0 +1,63 @@
<html>
<head>
<title>Untitled Document</title>
<link href="file.css" type="text/css" rel="stylesheet">
</head>
<body>
<p style="font-family:verdana;color:green;font-size:16px;font-weight:bold">Welcome to treadwell.cce.cornell.edu | MOODLE Documentation</p>
<p>We have been working on developing documentation for MOODLE for learners and instructors. This documentation project is focused on delivering a number of tutorial videos which explain some of the key features of MOODLE. As new videos become aviable they will be linked here.</p>
<p>Back to | treadwell.cce.cornell.edu | Social & Active eLearning blog |</p>
<p style="font-family:verdana;font-weight:bold;font-size:13;">MOODLE for Learners</p>
<ul>
<li>Introduction to the MOODLE interface for new students. A new sreencast (August 2007) for students. Covers the basics of the MOODLE interface and navigating in a course. 10m25s Flash Video</li>
<li>An Interactive screenshot of the MOODLE. Created with Articulate Engage</li>
<li>Blogging in MOODLE | Adding blog entries and tags. An introduction to the blogging capabilities within MOODLE. 6m54s Flash Video | August 2007</li>
<li>A video (800x600) for new users of MOODLE. This covers the fundamentals of using MOODLE for someone new to online learning and/or MOODLE. 7m32s Flash Video
<br>640x480 version of MOODLE for Learners</li>
<li>RSS, MOODLE and You (640x480) | An introduction to rss feeds and readers. How to subscribe to rss in MOODLE forums and from other sites. 11m03s Flash Video</li>
<li>Embedding Images in Forum Posts and Replies (640x480) | This screencast covers the basics of embedding an image in a forum post. 6m03s Flash Video</li>
</ul>
<br>
<p style="font-family:verdana;font-weight:bold;font-size:13;">Moodle for instructors</p>
<ul>
<li>The Course Skeleton (800x600) | This covers the fundamentals of the course skeleton and how to add links to your new course. 9m23s Flash Video
<br>640x480 version of The Course Skeleton</li>
<li>Who's Doing What, When - Introducing the reports feature in MOODLE | A video exploring the reporting features of MOODLE. This covers the basics of viewing and filtering reports in order to evaluate participation and course activity. September 2007 6m32s flash video</li>
<li>Simple Questions, Simple Answers - Creating a basic quiz in MOODLE | An introduction to creating a very basic quiz. 13m44s Flash Video 640x480 version of Simple Questions</li>
<li>Look Out Hollywood: Adding Video to a MOODLE page (800x600) | Covers the basics of upload and embedding a video file in a web page within MOODLE. 3m29s Flash Video 640x480 version of Look Out Hollywood</i>
<li>Scales and Ratings in MOODLE Forum : How to use forums as tools for rating documents or evaluating materials. A quick overview of scales and how to create them. 5m40s Flash Video 640x480 version of Scales and Ratings in MOODLE Forums</li>
<li>Collaborate and Evaluate - The New Database Feature in MOODLE (640x480) | MOODLE's new Database activity provides a solid tool for collaboration and evaluation of images, documents and data 9m42s Flash Video - Added May 22, 2006</li>
<li>Student and Instructors -2 Views into MOODLE | Instructors and Students view a course differently. What can you expect when making the transition from participant to Instructor? This short screencast compares these 2 views into a MOODLE course</li>
</ul>
<br>
<p style="font-family:verdana;font-weight:bold;font-size:13;">Download videos</p>
<p>You can download the videos, if streaming is taking too long or problematic<br>
MOODLE for Learners<br>
Introduction to MOODLE (800x600) 16mb zip file<br>
Introduction to MOODLE (640x480) 16mb zip file<br>
RSS, MOODLE and You (640x480) 18mb zip file<br>
MOODLE for Instructors<br>
The Course Skeleton 14mb zip file<br>
The Course Skeleton (640x480) 14mb zip file<br>
Logs 30mb zip file<br>
Logs (640x480) 23mb zip file<br>
Simple Questions, Simple Answers (800x600) 25mb zip file<br>
Simple Questions(640x480) 19mb zip file<br>
Look Out Hollywood: Adding Video to a MOOGLE Page (800x600) 9mb zip file<br>
Adding Video (640x480) 7mb zip file<br>
Scales and Ratings in MOODLE Forums (800x600)<br>
Scales and Ratings (640x480)<br>
Collaborate and Evaluate (640x480)<br>
</p>
</body>
</html>

View File

@@ -0,0 +1,54 @@
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.main {
margin: auto;
width: 360px;
height: 494px;
background: linear-gradient(to bottom, #ffaf00, #ff9901);
border-radius: 20px;
margin-top: 50px;
padding: 1px;
;
}
h2 {
color: white;
font-family: Arial;
margin-top: 20px;
}
.field_name {
font-family: Arial;
text-align: left;
margin-left: 20px;
margin-top: 12px;
margin-bottom: 5px;
}
input {
width: 320px;
height: 25px;
}
.problem_field {
height: 120px;
}
.send {
margin-top: 15px;
font-family: Arial;
height: 30px;
font-size: 18px;
}
.last {
text-align: left;
font-family: Arial;
margin-left: 20px;
}

View File

@@ -0,0 +1,25 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="forms.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main" align="center">
<h2>Ваша заявка или вопрос</h2>
<p class="field_name">Ваше имя</p>
<input type="text">
<p class="field_name">Телефон</p>
<input type="text">
<p class="field_name">Город</p>
<input type="text">
<p class="field_name">Опишите Вашу проблему</p>
<input type="text" class="problem_field">
<input type="button" value="Отправить сообщение" class="send">
<p class="last"><i>! - Все поля обязательны для заполнения</i></p>
</div>
</body>
</html>

View File

@@ -0,0 +1,110 @@
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.FL {
float: left;
}
.FR {
float: right;
}
.CB {
clear: both;
}
.border {
width: 494px;
height: 570px;
;
margin: 0 auto;
border: 1px solid black;
padding-top: 40px;
}
.main {
width: 400px;
margin: 0 auto;
}
.access {
font-family: Arial;
margin-bottom: 50px;
color: #9e97aa;
}
.text_input {
width: 380px;
height: 50px;
margin-bottom: 20px;
font-size: 20px;
border: none;
background-color: #f7f6f9;
padding-left: 20px;
color: #9e97aa;
}
.remember_block {
color: lightgrey;
font-family: Arial;
font-size: 18px;
margin-bottom: 20px;
}
.remember {
background-color: white;
width: 15px;
height: 15px;
border: 1px solid black;
margin-right: 10px;
}
.restore {
color: lightgrey;
font-family: Arial;
font-size: 18px;
}
.line {
width: 400px;
height: 0px;
border-bottom: 1px solid #E2E2E2;
}
.captcha {
font-weight: normal;
color: lightgrey;
font-family: Arial;
margin-top: 20px;
}
.recaptcha {
width: 400px;
height: 50px;
border: none;
border-radius: 0;
background-color: #f7f6f9;
color: #958ea3;
margin-top: 30px;
font-family: Arial;
font-size: 20px;
}
.recaptcha option {}
.last {
width: 400px;
background-color: #9816f4;
color: white;
font-family: Arial;
font-size: 25px;
border: none;
border-radius: 50px;
height: 70px;
margin-top: 30px;
}

View File

@@ -0,0 +1,28 @@
<!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" />
<link href="forms5.css" rel="stylesheet" type="text/css">
<title>Документ без названия</title>
</head>
<body>
<div class="border" align="center">
<div align="center" class="main">
<h2 class="access">Access Account</h2>
<input type="text" placeholder="Email Addresses" class="text_input" />
<input type="password" class="text_input" placeholder="Password" />
<div class="FL remember_block"><input type="checkbox" class="remember" /> Remember me</div>
<div class="restore FR">Forget password?</div>
<div class="line CB"></div>
<h3 class="captcha">Select captcha type</h3>
<select class="recaptcha">
<option>Recaptcha</option>
</select>
<input class="last" type="submit" value="Sign In" />
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,45 @@
.div1{
width: 100px;
height: 100px;
border: 1px solid #49FF00;
background-color: #49FF00;
position: absolute;
top: 175px;
left: 200px;
}
.div2{
width: 100px;
height: 100px;
border: 1px solid #001DFF;
background-color: #001DFF;
position: absolute;
top: 120px;
left: 370px;
}
.div3{
width: 350px;
height: 50px;
border: 1px solid #FF0004;
background-color: #FF0004;
position: absolute;
top: 150px;
left: 260px;
}
.div4{
border: 1px solid #C000FF;
width: 50px;
height: 185px;
background-color: #C000FF;
position: absolute;
top: 60px;
left: 270px;
}
.div5{
width: 75px;
height: 75px;
border: 1px solid #D3CEAF;
background-color: #D3CEAF;
position: absolute;
top: 100px;
left: 304px;
}

View File

@@ -0,0 +1,21 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="z-index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>

View File

@@ -0,0 +1,45 @@
*{
padding: 0;
border: 0;
margin: 0;
}
.container{
width: 600px;
border: 1px solid #FF0000;
margin: 0px auto;
background-color: #FFFF00;
}
.log{
margin-left: 10px;
width: 580px;
height: 100px;
border: 0px solid #000000;
background-color: #FFA500;
margin-bottom: 10px;
}
.nav{
width: 150px;
height: 500px;
background-color: #008000;
border: 1px solid #EE82EE;
float: left;
margin-left: 10px;
margin-bottom: 10px;
}
.content{
width: 400px;
height: 500px;
background-color: #0000FF;
border: 1px solid #A52A2A;
float: right;
margin-right: 10px;
margin-bottom: 10px;
}
.podval{
width: 580px;
height: 100px;
margin-left: 10px;
border: 1px solid #494B97;
background-color: #49FF00;
clear:both;
}

View File

@@ -0,0 +1,17 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="Контейнерный дизайн.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="log"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="podval"></div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View File

@@ -0,0 +1,14 @@
<html>
<head>
<title>Биография</title>
</head>
<body>
<div align="center"><img src="1.jpg" width="400" height="300"></img></div>
<p align="center"><font face="Arial">Меня зовут Олег. Мне 14 лет. Я учусь в 8"Б" классе в лицее имени святых равноапостольных братьев Кирилла и Мефодия, из которой меня часто отправляют на олимпиады. Однажды я даже выиграл в конкурсе "Кенгуру" по математике</font></p>
<div align="center"><a href="parents.html"><font face="Arial" color="Teal">Мои родители</font></a><br><br>
<a href="friends.html"><font face="Arial" color="chocolate">Мои друзья</a></font><br><br><a href="raspisanie.html"><font face="Arial">Расписание</font></a>
<br><br><a href="raboti.html"><font face="Arial">Практические работы</font></a></div>
</body>
</html>

View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>Друзья</title>
</head>
<body>
<p align="center"><font face="Arial">У меня есть много друзей. Некоторые из них живут в Молдове, с некоторыми я общаюсь через интернет. Моего лучшего друга зовут Артём. У него пухлое телосложение, а, как известно, толстые люди самые добрые!</font></p>
<div align="center"><a href="biogr_Oleg.html"><font face="Arial">Биография</font></a></div>
</body>
</html>

View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>Родители</title>
</head>
<body>
<p align="center"><font face="Arial">У меня есть мама и папа. Маме 43 года.У неё высшее педагогическое образование. Она работает в сервисном центре. Папа живёт в другом доме. У него очень интересная профессия: оператор кассовых аппаратов.</font></p>
<div align="center"><a href="biogr_Oleg"><font face="Arial">Биография</font></a></div>
</body>
</html>

View File

@@ -0,0 +1,51 @@
<html>
<head>
<title><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD></title>
</head>
<body>
<br><br>
<table bgcolor="lightblue" width="300" height="220" cellspacing="0" cellpadding="0" border="1">
<tr>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_2</td>
<td bgcolor="LightGray"><a target="_blank" href="E:\web\<5C><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_2\2.1.html">MOODLE</a></td>
</tr>
<tr>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_3.1</td>
<td bgcolor="LightGray"><a target="_blank" href="E:\web\<5C><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_3\3.1.html"><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD></a></td>
</tr>
<tr>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_3.2</td>
<td bgcolor="LightGray"><a target="_blank" href="E:\web\<5C><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_3\3.2\3.2.html">WebCT</a></td>
</tr>
<tr>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_3.table</td>
<td bgcolor="LightGray"><a target="_blank" href="E:\web\<5C><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_3\3.table.html">Rainfall Dafiinson</a></td>
</tr>
<tr>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_6</td>
<td bgcolor="LightGray"><a target="_blank" href="E:\web\<5C><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_6\6\6.html">NetMechanic</a></td>
</tr>
<tr>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_8</td>
<td bgcolor="LightGray"><a target="_blank" href="E:\web\<5C><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_8\<5C><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> 8.html">WebCT <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD></a></td>
</tr>
<tr>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_12</td>
<td bgcolor="LightGray"><a target="_blank" href="E:\web\<5C><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>_12\<5C><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> 12.html">Forms</a></td>
</tr>
<tr>
<td>Lab10</td>
<td bgcolor="LightGray"><a target="_blank" href="E:\web\Lab10\Lab10\About conference.html">telda</a></td>
</tr>
</table>
</body>
</html>

View File

@@ -0,0 +1,11 @@
<html>
<head>
<title>Расписание</title>
</head>
<body>
<table border="1" cellspacing="0" cellpading="0">
<tr>
<td>N</td>
</tr>
</body>
</html>

View File

@@ -0,0 +1,59 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Primal test</title>
</head>
<body>
<ol>
<li>Пшено, 1 стакан</li>
<li>Вода H<sub>2</sub>O или AquaLife <sup>&reg;</sup>, 2<br> стакана</li>
<li>Молоко , <strike>1,5 стакана</strike> 2 стакана</li>
<li>Масло сливочное, 3 ст.л.</li>
<li>Тыква, около 300г</li>
<li>Соль, по вкусу</li>
<li><u>Сахар демерара, посыпать<br>сверху</u></li>
</ol>
<div style="height: 1px; width: 255px; background-color: #A0A0A0;"></div>
<br>
<i>Примечания:</i><br>
Пшено необходимо перебрать<br>
Тыкву нарезать кубиками 1х1<br>
Кашу перемешивать не надо<br>
<ol style="color:#737373; margin-top: 50px">
<li>
Разметка
<ol>
<li>
Основы HTML
<ol><li>
HTML-теги
<ol>
<li>парные</li>
<li>одиночные</li>
</ol>
</li></ol>
</li>
<li>
Основы CSS
<ol><li>
Селекторы
<ol>
<li>по типу</li>
<li>по классу</li>
<li>вложенные</li>
</ol>
</li></ol>
</li>
<li>Стиль кодирования</li>
</ol>
</li>
<li>Работа с фотошопом</li>
<li>Построение сеток</li>
<li>Декоративные элементы</li>
<li>Введение в JavaScript</li>
<li>Прогрессивное улучшение</li>
</ol>
</body>
</html>

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>

View File

@@ -0,0 +1,21 @@
<html>
<head>
<title>Объдинение столбцов и строчек</title>
</head>
<body>
<table height="300" width="600" cellspacing="0" cellpadding="0" border="1">
<tr height=100>
<td colspan="2" rowspan="2">1</td>
<td>2</td>
<td rowspan="3">3</td>
</tr>
<tr height="100">
<td rowspan="2">4</td>
</tr>
<tr height="100">
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>

View File

@@ -0,0 +1,25 @@
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table height="200" width="300" border="1" cellspacing="0" cellpending="0">
<tr height="50">
<td align="center">1</td>
</tr>
<tr height="50">
<td align="center">2</td>
</tr>
<tr height="100">
<td>
<div>
<ul type="disc">
<li>Яблоко</li>
<li>Апельсин</li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>