Определение и создание HTML-таблицы

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70852{{"Определение HTML-таблицы"}} html/layout -.-> lab-70852{{"Определение HTML-таблицы"}} html/doc_flow -.-> lab-70852{{"Определение HTML-таблицы"}} html/tables -.-> lab-70852{{"Определение HTML-таблицы"}} html/tbl_access -.-> lab-70852{{"Определение HTML-таблицы"}} end

Создание таблицы

Давайте начнем с создания нового HTML-файла с именем index.html и настройки его базовой структуры. Внутри тегов <body> создайте элемент <table>. Этот элемент будет содержать все строки и столбцы вашей таблицы.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Определение строк

Далее определите строки вашей таблицы с использованием тега <tr>. Каждая строка будет содержать одну или несколько ячеек. Чтобы создать одну ячейку, используйте тег <td>.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Добавление заголовка таблицы

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

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Добавление границ и стилей

По умолчанию HTML-таблицы имеют минимальный стиль и не имеют границ. Чтобы добавить границу к своей таблице, используйте CSS-свойство border.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Резюме

Следуя этому учебнику, вы узнали, как создать базовую HTML-таблицу и оформить ее с использованием CSS. Таблицы можно дополнительно настроить, добавив атрибуты, такие как colspan и rowspan, к ячейкам, а также используя дополнительные теги, такие как <caption> и <thead>. С помощью этих инструментов вы можете создать сложные и информативные таблицы для отображения данных на ваших веб-страницах.