caption-side CSS

Свойство caption-side определяет положение заголовка таблицы, который задается с помощью элемента <caption>, относительно самой таблицы.

Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align.

Свойство `caption-side` определяет положение заголовка таблицы, который задается с помощью элемента [`<caption>`](/html/caption/), относительно самой таблицы. Свойство `caption-side` выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство [`text-align`](/css/text-align/).
Значение по умолчанию:

top

Значение по умолчанию:
`top`
Наследуется:
Да
Применяется:

К <caption> или ко всем элементам, у которых значение display установлено как table-caption.

Применяется:
К [`<caption>`](/html/caption/) или ко всем элементам, у которых значение [`display`](/css/display/) установлено как `table-caption`.
Анимируется:
Нет
Объект JavaScript:

object.style.captionSide

Объект JavaScript:
`object.style.captionSide`
Спецификации:
Спецификации:
* [CSS Logical Properties Level 1](http://dev.w3.org/csswg/css-logical-props/#caption-side) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/tables.html#caption-position)

Синтаксис

/* Directional values */ 
caption-side: top; 
caption-side: bottom; 

/* Warning: non-standard values */ 
caption-side: left; 
caption-side: right; 
caption-side: top-outside; 
caption-side: bottom-outside; 

/* Global values */ 
caption-side: inherit; 
caption-side: initial; 
caption-side: unset;

Синтаксис

/* Directional values */ caption-side: top; caption-side: bottom; /* Warning: non-standard values */ caption-side: left; caption-side: right; caption-side: top-outside; caption-side: bottom-outside; /* Global values */ caption-side: inherit; caption-side: initial; caption-side: unset;

Значения

  • top — Располагает заголовок по верхнему краю таблицы.
  • bottom — Заголовок располагается под таблицей.

Значения

* `top` -- Располагает заголовок по верхнему краю таблицы. * `bottom` -- Заголовок располагается под таблицей.

Примеры

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>caption-side</title>
  <style>
    table {
     width: 100%; /* Ширина таблицы */ 
     border-collapse: collapse; /* Убираем двойную рамку между ячеек */ 
    }
    td {
     border: 1px solid green; /* Параметры границы */ 
     padding: 5px; /* Поля в ячейках */ 
    }
    caption { 
     caption-side: bottom; /* Заголовок под таблицей */ 
    }
   </style>
  </head>
  <body>
   <table>
    <caption>Расклад карт</caption>
    <tr>
     <td> </td><td>♠</td><td>♣</td><td>♥</td>
     <td>♦</td>
    </tr>
    <tr>
     <td>Чебурашка</td><td>6</td><td>3</td><td>1</td><td>3</td>
    </tr>
    <tr>
     <td>Крокодил Гена</td><td>1</td><td>5</td><td>5</td><td>2</td>
    </tr>
    <tr>
     <td>Шапокляк</td><td>3</td><td>4</td><td>6</td><td>0</td>
    </tr>
    <tr>
     <td>Крыса Лариса</td><td>3</td><td>1</td><td>1</td><td>8</td>
    </tr>
   </table>
 </body>
</html> 

Примеры

<!DOCTYPE htm> <html> <head> <meta charset="utf-8"> <title>caption-side</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойную рамку между ячеек */ } td { border: 1px solid green; /* Параметры границы */ padding: 5px; /* Поля в ячейках */ } caption { caption-side: bottom; /* Заголовок под таблицей */ } </style> </head> <body> <table> <caption>Расклад карт</caption> <tr> <td> </td><td>♠</td><td>♣</td><td>♥</td> <td>♦</td> </tr> <tr> <td>Чебурашка</td><td>6</td><td>3</td><td>1</td><td>3</td> </tr> <tr> <td>Крокодил Гена</td><td>1</td><td>5</td><td>5</td><td>2</td> </tr> <tr> <td>Шапокляк</td><td>3</td><td>4</td><td>6</td><td>0</td> </tr> <tr> <td>Крыса Лариса</td><td>3</td><td>1</td><td>1</td><td>8</td> </tr> </table> </body> </html>

Содержание

  • Синтаксис
      /* Directional values */ caption-side: top; caption-side: bottom; /* Warning: non-standard values */ caption-side: left; caption-side: right; caption-side: top-outside; caption-side: bottom-outside; /* Global values */ caption-side: inherit; caption-side: initial; caption-side: unset;
  • Значения
    • Примеры
        <!DOCTYPE htm> <html> <head> <meta charset="utf-8"> <title>caption-side</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойную рамку между ячеек */ } td { border: 1px solid green; /* Параметры границы */ padding: 5px; /* Поля в ячейках */ } caption { caption-side: bottom; /* Заголовок под таблицей */ } </style> </head> <body> <table> <caption>Расклад карт</caption> <tr> <td> </td><td>♠</td><td>♣</td><td>♥</td> <td>♦</td> </tr> <tr> <td>Чебурашка</td><td>6</td><td>3</td><td>1</td><td>3</td> </tr> <tr> <td>Крокодил Гена</td><td>1</td><td>5</td><td>5</td><td>2</td> </tr> <tr> <td>Шапокляк</td><td>3</td><td>4</td><td>6</td><td>0</td> </tr> <tr> <td>Крыса Лариса</td><td>3</td><td>1</td><td>1</td><td>8</td> </tr> </table> </body> </html>

    В начало