Объединение строк и столбцов (rowspan, colspan)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 22
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий мы сосредоточимся на мощных инструментах для структурирования таблиц — colspan и rowspan. Эти атрибуты позволяют создавать сложные и визуально понятные таблицы, объединяя несколько ячеек в одну. Вы на практике научитесь делать 'шапки' таблиц, которые охватывают несколько столбцов, и боковые заголовки, которые относятся к нескольким строкам. Задания построены от простого к сложному: сначала вы поработаете с каждым атрибутом отдельно, а затем научитесь комбинировать их для создания профессионально выглядящих табличных данных, таких как расписания или прайс-листы.
Список тем

Объединение столбцов для заголовка

id: 37835_table-colspan-1

Создайте заголовок для таблицы, который будет занимать два столбца. Ячейка с текстом 'Товары и цены' должна растянуться на всю ширину таблицы.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}
thead {
  background-color: #f2f2f2;
}
HTML
<table>
  <thead>
    <tr>
      <th input1="2">Товары и цены</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ноутбук</td>
      <td>80000 RUB</td>
    </tr>
    <tr>
      <td>Мышь</td>
      <td>1500 RUB</td>
    </tr>
  </tbody>
</table>
Чтобы объединить ячейки по горизонтали, используется атрибут `colspan`. Его значение — это число столбцов, которые нужно объединить. В данном случае, чтобы занять место двух столбцов, нужно добавить атрибут `colspan` со значением '2' к тегу `<th>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указание количества объединяемых столбцов

id: 37835_table-colspan-2

У нас есть таблица с расписанием на три дня. Сделайте так, чтобы общий заголовок 'Расписание' занимал все три столбца.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}
thead {
  background-color: #f0f8ff;
}
HTML
<table>
  <thead>
    <tr>
      <th colspan="input1">Расписание</th>
    </tr>
    <tr>
      <th>Пн</th>
      <th>Вт</th>
      <th>Ср</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>CSS</td>
      <td>JS</td>
    </tr>
  </tbody>
</table>
Атрибут `colspan` уже есть. Вам нужно указать правильное значение для него. Посчитайте, сколько столбцов в таблице ('Пн', 'Вт', 'Ср') и впишите это число в кавычки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Объединение строк для боковой ячейки

id: 37835_table-rowspan-1

В этом расписании есть два урока в первой половине дня. Объедините ячейку 'Утро' так, чтобы она занимала две строки по высоте.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}
.time-block {
  font-weight: bold;
  background-color: #fafad2;
}
HTML
<table>
  <thead>
    <tr>
      <th>Время</th>
      <th>Предмет</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="time-block" input1="2">Утро</td>
      <td>Алгебра</td>
    </tr>
    <tr>
      <td>Геометрия</td>
    </tr>
  </tbody>
</table>
Для объединения ячеек по вертикали (строк) используется атрибут `rowspan`. Его значение — это число строк для объединения. Добавьте этот атрибут к нужной ячейке `<td>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указание количества объединяемых строк

id: 37835_table-rowspan-2

Необходимо, чтобы ячейка 'Группа 1' относилась ко всем трем студентам в списке. Укажите правильное значение для атрибута `rowspan`, чтобы объединить три строки.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  vertical-align: middle;
}
th {
 text-align: center;
 background-color: #f2f2f2;
}
HTML
<table>
  <thead>
    <tr>
      <th>Группа</th>
      <th>Студент</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="input1">Группа 1</td>
      <td>Иван</td>
    </tr>
    <tr>
      <td>Мария</td>
    </tr>
    <tr>
      <td>Петр</td>
    </tr>
  </tbody>
</table>
Атрибут `rowspan` уже на месте. Вам нужно лишь указать, сколько строк он должен объединить. Посчитайте количество студентов в 'Группе 1' и впишите это число.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Одновременное использование rowspan и colspan

id: 37835_table-combined-1

Давайте создадим более сложную таблицу. Заголовок 'Недельное меню' должен занимать 3 столбца, а ячейка 'Обед' — 2 строки.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}
thead {
  background-color: #e6e6fa;
}
.meal-time {
  background-color: #f5f5f5;
}
HTML
<table>
  <thead>
    <tr>
      <th input1="3">Недельное меню</th>
    </tr>
    <tr>
      <th>Время</th>
      <th>Блюдо</th>
      <th>Напиток</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="meal-time" input2="2">Обед</td>
      <td>Суп</td>
      <td>Компот</td>
    </tr>
    <tr>
      <td>Второе</td>
      <td>Чай</td>
    </tr>
  </tbody>
</table>
Здесь нужно применить оба атрибута. Для заголовка `<th>` используйте `colspan` со значением '3'. Для ячейки 'Обед' `<td>` используйте `rowspan` со значением '2'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Полная запись атрибута

id: 37835_table-full-attribute-1

В итоговой строке таблицы ячейка 'Всего' должна занимать два столбца. Впишите в тег `<td>` полностью весь необходимый атрибут с его значением.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
tfoot {
  font-weight: bold;
  background-color: #f0f0f0;
}
HTML
<table>
  <thead>
    <tr>
      <th>Продукт</th>
      <th>Количество</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Хлеб</td>
      <td>1</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Молоко</td>
      <td>2</td>
      <td>140</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td input1>Всего</td>
      <td>190</td>
    </tr>
  </tfoot>
</table>
Вспомните, как выглядит полная запись HTML-атрибута: `имя="значение"`. Вам нужен атрибут для объединения двух столбцов. Правильная конструкция будет `colspan="2"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сложная вложенная структура

id: 37835_table-complex-2

Создайте сложную структуру. Ячейка 'A' должна занимать 2 строки. Ячейка 'B' - 2 столбца. А ячейка 'F' должна быть самой большой, занимая 2 строки и 2 столбца одновременно.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 1.2em;
}
th, td {
  border: 2px solid #555;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
}
HTML
<table>
  <tr>
    <td input1="2">A</td>
    <td input2="2">B</td>
  </tr>
  <tr>
    <td colspan="2">C</td>
  </tr>
  <tr>
    <td rowspan="2" input3="2">F</td>
    <td>D</td>
  </tr>
  <tr>
    <td>E</td>
  </tr>
</table>
Для ячейки 'F' нужно указать оба атрибута в одном теге, например: `<td rowspan="2" colspan="2">...</td>`. Для ячейки 'A' используйте `rowspan`, а для 'B' — `colspan`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру