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

Введение

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

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 85%. Он получил 100% положительных отзывов от учащихся.

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

Давайте начнем с создания нового 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>. С помощью этих инструментов вы можете создать сложные и информативные таблицы для отображения данных на ваших веб-страницах.

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