LabEx
ВходРегистрация

HTML Таблица Строка

HTMLBeginner
Практиковаться сейчас

Введение

Таблицы можно использовать для представления данных в структурированном формате. Основной компонент любой таблицы - это элемент строки таблицы (), который определяет строку ячеек. Строки таблицы должны быть помещены внутри элемента таблицы (

). В этом практическом занятии мы узнаем, как создавать строки HTML-таблиц.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Создание структуры HTML таблицы

Для создания HTML-таблицы сначала необходимо определить ее структуру. Создайте HTML-файл с именем index.html. Добавьте в файл следующий код:

<!doctype html>
<html>
  <head>
    <title>Моя таблица</title>
  </head>

  <body>
    <table>
      <tr>
        <th>Заголовочная ячейка 1</th>
        <th>Заголовочная ячейка 2</th>
      </tr>

      <tr>
        <td>Ячейка данных 1</td>
        <td>Ячейка данных 2</td>
      </tr>
    </table>
  </body>
</html>

В этом коде мы создали HTML-таблицу с двумя строками и двумя столбцами. Первая строка содержит две заголовочные ячейки (

. Например, чтобы добавить еще одну строку в таблицу, добавьте следующий код между существующими элементами :

<tr>
  <td>Ячейка данных 3</td>
  <td>Ячейка данных 4</td>
</tr>

Теперь таблица имеет три строки, в каждой из которых по две ячейки.

Стилизация строк таблицы

Мы можем добавить стили к строкам таблицы с использованием CSS. Добавьте следующий стиль в элемент , чтобы добавить цвет фона к четным строкам:

<style>
  tr:nth-child(even) {
    background-color: lightgray;
  }
</style>

Этот код добавит цвет фона lightgray ко второй строке таблицы.

Объединение строк таблицы

Мы можем объединить две или более соседних строк в одну строку с использованием атрибута rowspan. Например, предположим, что мы хотим объединить первые две строки в одну. Замените первый элемент

следующим кодом:

<tr>
  <th rowspan="2">Заголовочная ячейка 1</th>
  <th>Заголовочная ячейка 2</th>
</tr>

Атрибут rowspan="2" в первой заголовочной ячейке объединит первые две строки в одну.

Создание заголовков таблиц

Мы можем использовать элемент

), а вторая строка содержит две ячейки с данными ().

Добавление дополнительных строк

Для добавления дополнительных строк в таблицу необходимо добавить в таблицу больше элементов

для создания заголовковых ячеек в таблице. Заголовочные ячейки обычно используются для описания содержимого столбцов. Чтобы добавить заголовочную ячейку в первый столбец, замените первый элемент во второй строке следующим кодом:

<th scope="row">Ячейка данных 1</th>

Атрибут scope="row" в элементе

указывает, что это заголовочная ячейка для первой строки.

Резюме

В этом практическом занятии мы узнали, как создавать строки таблицы в HTML и настраивать таблицу с использованием CSS. Мы также узнали, как объединять соседние строки и создавать заголовочные ячейки в таблице. С этими навыками вы теперь можете создавать красивые и структурированные таблицы для своих веб-страниц.

Связанные HTML Курсы
HTML для начинающих

HTML для начинающих

htmlweb-development
Создание веб-приложения для игры в крестики-нолики

Создание веб-приложения для игры в крестики-нолики

javascriptweb-development
Создание веб-игры «Бей-кабанчика»

Создание веб-игры «Бей-кабанчика»

javascriptweb-development