Создание HTML-таблиц с использованием базовых атрибутов

Введение

В этом лабораторном занятии студенты научатся создавать и управлять HTML-таблицами с использованием основных HTML-тегов и атрибутов таблиц. Лабораторное занятие сосредоточено на понимании основной структуры HTML-таблиц, включая важные теги, такие как <table>, <tr>, <td> и <th>, которые являются ключевыми для организации и представления данных в структурированном виде, похожем на сетку, на веб-страницах.

Участники пройдут комплексный процесс обучения, который охватывает создание базовых таблиц, добавление заголовков и разделов тела таблицы, объединение ячеек с использованием атрибутов colspan и rowspan, а также применение базовых стилевых атрибутов. К концу лабораторного занятия студенты получат практические навыки построения хорошо структурированных HTML-таблиц и поймут, как эффективно представлять данные с использованием элементов HTML-таблиц и связанных с ними атрибутов.

Понять структуру HTML-таблицы и базовые теги

На этом этапе вы узнаете о фундаментальной структуре и базовых тегах, используемых для создания HTML-таблиц. HTML-таблицы являются важными инструментами для организации и отображения данных в структурированном, сеточном формате на веб-страницах.

HTML-таблицы создаются с использованием нескольких ключевых тегов:

<table>: Основной контейнер для всей таблицы
<tr>: Определяет строку таблицы
<td>: Определяет обычную ячейку таблицы (ячейку с данными)
<th>: Определяет ячейку заголовка таблицы

Создадим простой пример, чтобы продемонстрировать эти базовые теги таблицы. Откройте WebIDE и создайте новый файл с именем basic_table.html в директории ~/project.

touch ~/project/basic_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic HTML Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>San Francisco</td>
      </tr>
    </table>
  </body>
</html>

Разберём структуру таблицы:

<table border="1"> создаёт контейнер таблицы с видимой границей. Атрибут border является необязательным.
Первая строка <tr> содержит ячейки заголовка <th> для названий столбцов.
Последующие элементы <tr> содержат ячейки с данными <td> с реальным содержимым.

Примечание: Узнайте больше о Просмотре HTML-файлов в WebIDE.

Пример структуры HTML-таблицы

Основные моменты, которые необходимо запомнить:

Каждый тег <tr> представляет строку в таблице.
Тег <th> используется для ячеек заголовка (обычно они жирные и выровнены по центру).
Тег <td> используется для обычных ячеек с данными.
Атрибут border помогает визуализировать структуру таблицы (хотя в реальных приложениях для стилизации предпочтительно использовать CSS).

Создать простую таблицу с рядами и столбцами

На этом этапе вы узнаете, как создать более сложную таблицу с несколькими рядами и столбцами. Продолжая изучение с предыдущего этапа, мы рассмотрим, как структурировать таблицы с разным количеством рядов и столбцов для эффективного отображения информации.

Откройте WebIDE и создайте новый файл с именем product_table.html в директории ~/project. Мы создадим таблицу инвентаря продуктов, чтобы продемонстрировать создание таблицы с несколькими рядами и столбцами.

touch ~/project/product_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Inventory Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Product ID</td>
        <td>Product Name</td>
        <td>Price</td>
        <td>Quantity</td>
      </tr>
      <tr>
        <td>001</td>
        <td>Laptop</td>
        <td>$999.99</td>
        <td>50</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Smartphone</td>
        <td>$599.99</td>
        <td>75</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Tablet</td>
        <td>$299.99</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

Основные моменты создания таблиц с несколькими рядами и столбцами:

Каждый тег <tr> (строка таблицы) представляет горизонтальный ряд в таблице.
Внутри каждого тега <tr> несколько элементов <td> (данные таблицы) создают столбцы.
Количество элементов <td> в каждом теге <tr> определяет количество столбцов.
Все ряды должны иметь одинаковое количество столбцов для единообразного макета.
Атрибут border помогает визуализировать структуру таблицы.

Обратите внимание, как мы создали таблицу с 4 столбцами:

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

Пример вывода в веб-браузере покажет сетку 4x4, отображающую детали инвентаря продуктов.

Пример таблицы инвентаря продуктов

Добавить заголовки таблицы и разделы тела таблицы

На этом этапе вы узнаете, как улучшить структуру таблицы, используя семантические HTML-теги <thead>, <tbody> и <tfoot> для более эффективной организации содержимого таблицы. Эти теги помогают повысить читаемость и доступность ваших HTML-таблиц.

Откройте WebIDE и создайте новый файл с именем student_grades.html в директории ~/project. Мы создадим таблицу оценок студентов, демонстрирующую использование тегов разделов таблицы.

touch ~/project/student_grades.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Student Grades Table</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Math</th>
          <th>Science</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Alice Johnson</td>
          <td>85</td>
          <td>90</td>
          <td>175</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Bob Smith</td>
          <td>78</td>
          <td>82</td>
          <td>160</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Charlie Brown</td>
          <td>92</td>
          <td>88</td>
          <td>180</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Class Average</td>
          <td>85</td>
          <td>86.67</td>
          <td>171.67</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Основные моменты о разделах таблицы:

<thead>: Содержит строки заголовков с названиями столбцов.
<tbody>: Содержит основные строки с данными.
<tfoot>: Содержит строки с общими данными или нижним колонтитулом.
Используйте <th> для ячеек заголовков вместо <td>.
Эти семантические теги помогают улучшить структуру таблицы и ее доступность.

Пример демонстрирует:

Строку заголовка с названиями столбцов с использованием <th>.
Несколько строк с данными в <tbody>.
Строку нижнего колонтитула с средними значениями по классу в <tfoot>.

Пример вывода в веб-браузере покажет структурированную таблицу с четко определенными разделами для заголовков, тела и нижнего колонтитула.

Пример таблицы оценок студентов

Объединение ячеек таблицы с использованием атрибутов colspan и rowspan

На этом этапе вы узнаете, как объединять ячейки таблицы по горизонтали и вертикали с использованием атрибутов colspan и rowspan. Эти атрибуты позволяют создавать более сложные и гибкие макеты таблиц, объединяя несколько ячеек.

Откройте WebIDE и создайте новый файл с именем event_schedule.html в директории ~/project. Мы создадим таблицу расписания мероприятий, демонстрирующую объединение ячеек.

touch ~/project/event_schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conference Event Schedule</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Time</th>
          <th>Room A</th>
          <th>Room B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>9:00 AM</td>
          <td rowspan="2">Keynote Speech</td>
          <td>Workshop 1</td>
        </tr>
        <tr>
          <td>10:00 AM</td>
          <td>Workshop 2</td>
        </tr>
        <tr>
          <td>11:00 AM</td>
          <td colspan="2">Lunch Break</td>
        </tr>
        <tr>
          <td>12:00 PM</td>
          <td>Panel Discussion</td>
          <td>Networking Session</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Основные моменты о атрибутах colspan и rowspan:

colspan: Объединяет ячейки по горизонтали по столбцам.
- Пример: <td colspan="2"> расширяет ячейку на 2 столбца.
rowspan: Объединяет ячейки по вертикали по строкам.
- Пример: <td rowspan="2"> расширяет ячейку на 2 строки.
При использовании этих атрибутов удаляйте соответствующие ячейки в других строках.

В этом примере:

"Keynote Speech" занимает 2 строки в зале A.
"Lunch Break" занимает 2 столбца в обоих залах.
Другие ячейки сохраняют стандартный макет одной ячейки.

Пример вывода в веб-браузере покажет таблицу с объединенными ячейками, создающую более компактное и организованное расписание.

Пример HTML-таблицы с объединенными ячейками

Стилизация и настройка атрибутов таблицы

На этом этапе вы узнаете, как стилизовать и настраивать HTML-таблицы с использованием встроенного CSS и HTML-атрибутов. Правильная стилизация может повысить читаемость и визуальное привлекательность ваших таблиц.

Откройте WebIDE и создайте новый файл с именем styled_table.html в директории ~/project. Мы создадим таблицу с использованием различных техник стилизации.

touch ~/project/styled_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Styled Product Catalog</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
      }
      th {
        background-color: #4caf50;
        color: white;
        padding: 10px;
        text-align: left;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      tr:hover {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Wireless Headphones</td>
          <td>$99.99</td>
          <td>50</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Smart Watch</td>
          <td>$199.99</td>
          <td>30</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Bluetooth Speaker</td>
          <td>$79.99</td>
          <td>75</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Показанные основные техники стилизации:

border-collapse: Убирает промежутки между ячейками таблицы.
Пользовательский шрифт и типографика.
Цветная строка заголовка.
Альтернативные цвета строк с использованием :nth-child(even).
Эффект наведения на строки таблицы.
Стилизация отступов и границ ячеек.

Варианты стилизации включают:

Встроенный CSS в теге <style>.
Отдельный CSS-файл (рекомендуется для больших проектов).
Встроенные стили с использованием атрибута style.
Свойства CSS для макета, цветов и интерактивности.

Пример вывода в веб-браузере покажет профессионально стилизованную, легко читаемую таблицу с эффектами наведения и цветами.

Пример стилизованной HTML-таблицы

Резюме

В этом практическом занятии (лабораторной работе) участники изучили основы создания HTML-таблиц с использованием таких важных HTML-тегов, как <table>, <tr>, <td> и <th>. Практическое занятие помогло участникам понять структуру таблиц, создать базовые таблицы с рядами и столбцами, а также изучить методы добавления заголовков, объединения ячеек и настройки атрибутов таблицы.

Практические упражнения показали, как создавать структурированные, сетчатые представления данных на веб - страницах, охватывая ключевые концепции, такие как определение строк таблицы, создание ячеек заголовков и данных, а также использование атрибутов, таких как border, для улучшения визуального отображения таблиц. Участники получили практический опыт создания семантических и хорошо организованных HTML - таблиц, которые могут эффективно отображать информацию в различных сценариях веб - дизайна.