Мастерство в использовании тела таблицы HTML

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) 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/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70854{{"Тело таблицы HTML"}} html/layout -.-> lab-70854{{"Тело таблицы HTML"}} html/doc_flow -.-> lab-70854{{"Тело таблицы HTML"}} html/tables -.-> lab-70854{{"Тело таблицы HTML"}} html/complex_tbl -.-> lab-70854{{"Тело таблицы HTML"}} html/tbl_access -.-> lab-70854{{"Тело таблицы HTML"}} end

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

Создайте пустой HTML-файл с именем index.html в своем предпочитаемом редакторе кода.

Создайте тег <table> в разделе <body> HTML-файла.

<body>
  <table></table>
</body>

Добавьте тег `<thead>` для заголовка таблицы

В теге <table> создайте тег <thead> и добавьте строку заголовка с тегами <th> внутри.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
</table>

Добавьте тег `<tbody>` для тела таблицы

В теге <table> создайте тег <tbody> и добавьте строки с тегами <td> внутри.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

Добавьте тег `<tfoot>` для подвала таблицы (необязательно)

В теге <table> создайте тег <tfoot> и добавьте строку подвала с тегами <td> внутри.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total: 2 People</td>
    </tr>
  </tfoot>
</table>

Стилизуйте таблицу

Используйте CSS для стилизации таблицы, включая <thead>, <tbody> и <tfoot>, если это необходимо.

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
    color: #444;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tfoot td {
    text-align: right;
    font-weight: bold;
  }
</style>

Резюме

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

Тело таблицы HTML