HTML Таблица с Заголовком: Пошаговое Руководство

Введение

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

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

Создайте базовую таблицу

В первом шаге создайте базовую таблицу с некоторыми данными с использованием тега table. Вот пример:

<table>
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Джон</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Джейн</td>
    <td>25</td>
  </tr>
</table>

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

Чтобы добавить заголовок к таблице, просто вставьте тег <caption> после открывающего тега <table> и перед строками таблицы. Вот пример:

<table>
  <caption>
    Информация о сотрудниках
  </caption>
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Джон</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Джейн</td>
    <td>25</td>
  </tr>
</table>

Стилизуйте заголовок

Чтобы стилизовать заголовок, используйте атрибут style внутри тега <caption>. Вот пример:

<table>
  <caption style="color: blue; font-size: 20px;">
    Информация о сотрудниках
  </caption>
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Джон</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Джейн</td>
    <td>25</td>
  </tr>
</table>

Резюме

В HTML тег <caption> используется для добавления заголовка или названия к таблице. Тег <caption> используется внутри тега <table>, сразу после открывающего тега <table>. Заголовок - это краткое описание, которое дает краткую объяснение о таблице. Это помогает понять ее назначение. Чтобы добавить заголовок к таблице, просто вставьте тег <caption> после открывающего тега <table> и перед строками таблицы. С использованием атрибута style внутри тега <caption> мы можем стилизовать заголовок.