HTML-тег <caption>

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

Тег <caption> должен располагаться сразу после тега <table> , и каждая таблица может иметь только один заголовок.

Базовый пример HTML-тега <caption>

Вот простой пример, демонстрирующий использование тега <caption> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Caption Example</h2>
        <table border="1">
            <caption>Monthly Sales Data</caption>
            <tr>
                <th>Month</th>
                <th>Sales</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$10,000</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$12,000</td>
            </tr>
        </table>
    </body>
</html>
Базовый пример HTML-подписи Тег

Пояснение: Тег <caption> определяет заголовок таблицы. Большинство браузеров по умолчанию отображают заголовок по центру над таблицей.

Атрибуты HTML-тега <caption>

Тег <caption> не имеет каких-либо определенных атрибутов, но его можно стилизовать с помощью CSS.

Стилизация тега <caption>

Тег <caption> можно стилизовать с помощью CSS, чтобы изменить его внешний вид: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            caption {
                font-size: 20px;
                font-weight: bold;
                color: #007BFF;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Caption Example</h2>
        <table border="1">
            <caption>Quarterly Performance</caption>
            <tr>
                <th>Quarter</th>
                <th>Revenue</th>
            </tr>
            <tr>
                <td>Q1</td>
                <td>$25,000</td>
            </tr>
            <tr>
                <td>Q2</td>
                <td>$30,000</td>
            </tr>
        </table>
    </body>
</html>
Стилизация подписи Тег

В этом примере подпись выделена более крупным текстом, жирным шрифтом и синим цветом.

Особые случаи для HTML-тега <caption>

Размещение подписи

Хотя тег <caption> по умолчанию отображается над таблицей, вы можете изменить его положение с помощью CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            caption {
                caption-side: bottom;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>Bottom Caption Example</h2>
        <table border="1">
            <caption>Data provided by the finance department</caption>
            <tr>
                <th>Month</th>
                <th>Profit</th>
            </tr>
            <tr>
                <td>March</td>
                <td>$15,000</td>
            </tr>
            <tr>
                <td>April</td>
                <td>$18,000</td>
            </tr>
        </table>
    </body>
</html>

Результат: Подпись отображается под таблицей из-за свойства CSS caption-side: bottom; .

Размещение подписи в таблице

Многострочные подписи

Вы можете включить многострочные подписи, используя переносы строк или перенос текста внутри тега <caption> : 

<!DOCTYPE html>
<html>
    <style>
      table {
        width: 100%;
      }
      </style>
    <body>
        <h2>Multi-Line Caption Example</h2>
        <table border="1">
            <caption>
                Annual Report<br>Revenue and profit analysis for 2024
            </caption>
            <tr>
                <th>Year</th>
                <th>Revenue</th>
            </tr>
            <tr>
                <td>2023</td>
                <td>$150,000</td>
            </tr>
            <tr>
                <td>2024</td>
                <td>$200,000</td>
            </tr>
        </table>
    </body>
</html>
Многострочные подписи