Примеры — Урок 08

Рабочие примеры

В каждом блоке сверху — живой результат, ниже — код, который его создаёт. Поля формы реально работают: их можно заполнять.

1. Базовая таблица: thead + tbody

Шапка с заголовками th и тело с данными td.

Навык	Уровень
HTML	Начальный
CSS	Изучаю

<table>
  <thead>
    <tr><th>Навык</th><th>Уровень</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML</td><td>Начальный</td></tr>
    <tr><td>CSS</td><td>Изучаю</td></tr>
  </tbody>
</table>

2. colspan — объединение ячеек по столбцам

Заголовок «Контакты» растянут на 2 столбца через colspan="2".

Контакты
Способ	Значение
E-mail	me@site.ru
Телефон	+7 900 000-00-00

<tr>
  <th colspan="2">Контакты</th>
</tr>
<tr>
  <th>Способ</th><th>Значение</th>
</tr>

3. Форма: label + input + валидация

Подписи кликабельны (клик ставит курсор в поле), у полей есть type и required.

<form action="/contact" method="post">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required>

  <label for="password">Пароль</label>
  <input id="password" name="password"
         type="password" minlength="8" required>

  <button type="submit">Отправить</button>
</form>

4. select и textarea

Выпадающий список из option и многострочное поле textarea.

<label for="topic">Тема обращения</label>
<select id="topic" name="topic">
  <option value="bug">Сообщить об ошибке</option>
  <option value="idea">Предложить идею</option>
  <option value="other">Другое</option>
</select>

<label for="message">Сообщение</label>
<textarea id="message" name="message" rows="3"></textarea>

5. CSS для аккуратной таблицы и формы

border-collapse: collapse убирает двойные рамки; поля делаем блочными, чтобы они шли в столбик.

A	B
1	2

Имя Город

table {
  border-collapse: collapse; /* рамки сливаются в одну */
}

label,
input,
textarea,
select {
  display: block;       /* каждое поле с новой строки */
  margin-bottom: 0.75rem;
}