---

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Задания по таблицам</title>
<style>
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding: 30px 20px;
  background: #f5f7fa;
  color: #222;
}
h1 { text-align: center; color: #2f6fed; }
h2 {
  color: #2f6fed;
  border-bottom: 2px solid #2f6fed;
  padding-bottom: 8px;
  margin: 0 0 16px;
  font-size: 20px;
}
.task {
  background: #fff;
  padding: 24px;
  border-radius: 10px;
  margin-bottom: 30px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.t1 {
  border-collapse: collapse;
  border: 3px solid gray;
}
.t1 th, .t1 td {
  border: 1px solid green;
  padding: 10px 14px;
  text-align: left;
}
.t1 th {
  background: #cfe3ff;
  color: #003366;
}
.t1 td:first-child {
  color: #b00020;
  font-weight: bold;
}
.t1 caption {
  caption-side: top;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  color: #003366;
}

.t3 {
  width: 100%;
  border-collapse: collapse;
}
.t3 th, .t3 td {
  border: 1px solid #ccc;
  padding: 12px 14px;
  text-align: left;
}
.t3 thead th {
  background: #2f6fed;
  color: #fff;
}
.t3 tbody tr:hover {
  background: #eef3ff;
}

.t4 {
  width: 100%;
  border-collapse: collapse;
}
.t4 th, .t4 td {
  border: 1px solid #ddd;
  padding: 12px 14px;
  text-align: left;
}
.t4 thead th {
  background: #333;
  color: #fff;
}
.t4 tbody tr:nth-child(even) {
  background: #f2f6fc;
}
.t4 tbody tr:nth-child(odd) {
  background: #fff;
}

.t5 {
  border-collapse: separate;
  border-spacing: 8px;
}
.t5 th {
  background: #e74c3c;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 16px;
  padding: 14px;
  border-radius: 8px;
}
.t5 td {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  background: #fafafa;
  width: 160px;
}
.t5 .photo {
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: #ffe9a8;
}
.t5 .name {
  font-weight: 600;
  color: #333;
}

.t6 {
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #2f6fed;
  border-radius: 12px;
  overflow: hidden;
}
.t6 th, .t6 td {
  padding: 12px 18px;
  text-align: center;
  border-bottom: 1px solid #cfe3ff;
}
.t6 thead th {
  background: #2f6fed;
  color: #fff;
}
.t6 td:nth-child(2n)   { background: #e8f0ff; }
.t6 td:nth-child(2n+1) { background: #fff; }
.t6 tr:last-child td   { border-bottom: none; }

.t7 {
  width: 600px;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
}
.t7 td {
  border: 1px solid #999;
  padding: 10px;
  vertical-align: top;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.t7 td:first-child {
  width: 150px;
}
</style>
</head>
<body>

<h1>Задания по таблицам (кроме №2)</h1>

<div class="task">
  <h2>Задание 1. Расписание</h2>
  <table class="t1">
    <caption>Расписание занятий</caption>
    <tr>
      <th>Время</th>
      <th>Понедельник</th>
      <th>Вторник</th>
      <th>Среда</th>
      <th>Четверг</th>
      <th>Пятница</th>
    </tr>
    <tr>
      <td>09:00</td>
      <td>Математика</td>
      <td>Физика</td>
      <td>История</td>
      <td>Информатика</td>
      <td>Литература</td>
    </tr>
    <tr>
      <td>10:45</td>
      <td>Русский</td>
      <td>Английский</td>
      <td>Химия</td>
      <td>Биология</td>
      <td>География</td>
    </tr>
    <tr>
      <td>13:00</td>
      <td>Информатика</td>
      <td>Математика</td>
      <td>Физкультура</td>
      <td>Английский</td>
      <td>Физика</td>
    </tr>
  </table>
</div>

<div class="task">
  <h2>Задание 3. Таблица со стилями, ширина 100%</h2>
  <table class="t3">
    <thead>
      <tr>
        <th>№</th>
        <th>Студент</th>
        <th>Группа</th>
        <th>Оценка</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Иванов Иван</td><td>ИС-21</td><td>5</td></tr>
      <tr><td>2</td><td>Петров Пётр</td><td>ИС-21</td><td>4</td></tr>
      <tr><td>3</td><td>Сидоров Сидор</td><td>ИС-22</td><td>5</td></tr>
      <tr><td>4</td><td>Смирнова Анна</td><td>ИС-22</td><td>3</td></tr>
    </tbody>
  </table>
</div>

<div class="task">
  <h2>Задание 4. Чередование строк + фон шапки</h2>
  <table class="t4">
    <thead>
      <tr>
        <th>Товар</th>
        <th>Количество</th>
        <th>Цена</th>
        <th>Сумма</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Ноутбук</td><td>2</td><td>45 000 ₽</td><td>90 000 ₽</td></tr>
      <tr><td>Мышь</td><td>5</td><td>800 ₽</td><td>4 000 ₽</td></tr>
      <tr><td>Клавиатура</td><td>5</td><td>1 500 ₽</td><td>7 500 ₽</td></tr>
      <tr><td>Монитор</td><td>2</td><td>12 000 ₽</td><td>24 000 ₽</td></tr>
      <tr><td>Наушники</td><td>3</td><td>2 500 ₽</td><td>7 500 ₽</td></tr>
    </tbody>
  </table>
</div>

<div class="task">
  <h2>Задание 5. Раздельные строки, фото блюда + название</h2>
  <table class="t5">
    <tr>
      <th>Меню</th>
      <th>Меню</th>
      <th>Меню</th>
    </tr>
    <tr>
      <td>
        <div class="photo">🍕</div>
        <div class="name">Пицца «Маргарита»</div>
      </td>
      <td>
        <div class="photo">🍔</div>
        <div class="name">Бургер классический</div>
      </td>
      <td>
        <div class="photo">🥗</div>
        <div class="name">Салат «Цезарь»</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="photo">🍝</div>
        <div class="name">Паста карбонара</div>
      </td>
      <td>
        <div class="photo">🍜</div>
        <div class="name">Суп рамен</div>
      </td>
      <td>
        <div class="photo">🍰</div>
        <div class="name">Чизкейк</div>
      </td>
    </tr>
  </table>
</div>

<div class="task">
  <h2>Задание 6. Вертикальная закраска + округлые границы</h2>
  <table class="t6">
    <thead>
      <tr>
        <th>Товар</th>
        <th>Январь</th>
        <th>Февраль</th>
        <th>Март</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Ручки</td><td>120</td><td>135</td><td>150</td></tr>
      <tr><td>Блокноты</td><td>80</td><td>92</td><td>105</td></tr>
      <tr><td>Стикеры</td><td>200</td><td>180</td><td>230</td></tr>
      <tr><td>Маркеры</td><td>45</td><td>50</td><td>60</td></tr>
    </tbody>
  </table>
</div>

<div class="task">
  <h2>Задание 7. 600px, левая колонка 150px, по центру</h2>
  <table class="t7">
    <tr>
      <td>Дата</td>
      <td>15 октября 2025 года, среда — это очень длинный текст, который не должен растягивать таблицу ни в коем случае</td>
    </tr>
    <tr>
      <td>Событие</td>
      <td>Встреча команды разработчиков, обсуждение новых фич и разбор обратной связи от пользователей</td>
    </tr>
    <tr>
      <td>Место</td>
      <td>г. Москва, ул. Тверская, д. 15, офис 302</td>
    </tr>
    <tr>
      <td>Ответственный</td>
      <td>Иванов Иван Иванович</td>
    </tr>
  </table>
</div>

</body>
</html>