HTML Табличная ячейка данных: мастерство над тегом TD

Введение

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

Примечание: Вы можете практиковать программирование в 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/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-70856{{"HTML Табличная ячейка данных"}} html/doc_flow -.-> lab-70856{{"HTML Табличная ячейка данных"}} html/tables -.-> lab-70856{{"HTML Табличная ячейка данных"}} html/complex_tbl -.-> lab-70856{{"HTML Табличная ячейка данных"}} html/tbl_access -.-> lab-70856{{"HTML Табличная ячейка данных"}} end

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

Первым шагом является создание HTML-таблицы с некоторыми данными. Откройте файл index.html и добавьте следующий код:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Здесь мы создали HTML-таблицу с двумя строками и тремя столбцами. Тег <td> используется для определения содержимого каждой ячейки в таблице.

Использование атрибута colspan

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

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

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

Использование атрибута rowspan

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

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2">John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Male</td>
      </tr>
      <tr>
        <td rowspan="2">Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
      <tr>
        <td colspan="2">Female</td>
      </tr>
    </table>
  </body>
</html>

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

Атрибут header используется для указания того, что ячейка связана с одной или несколькими ячейками-заголовками. Чтобы использовать атрибут header, добавьте следующий код:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <th id="name-header">Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td headers="name-header">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td headers="name-header">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Здесь мы использовали атрибут header, чтобы указать, что первый столбец связан с ячейкой-заголовком с идентификатором name-header.

Резюме

Поздравляем! Вы узнали, как использовать HTML-тег <td> для определения таблиц данных в HTML-таблице. Вы также узнали о различных атрибутах, таких как colspan, rowspan и header, которые можно использовать с этим тегом для создания более сложных таблиц.

HTML Табличная ячейка данных