CSS caption-side — де стоїть заголовок таблиці
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Встановлюйте вирівнювання тексту по правому чи лівому краю через властивість
автор: Svitlanatext-align.
Синтаксис
caption-side: top|bottom|initial|inherit;Властивість caption-side може отримувати 4 значень:
-
top -
Заголовок буде зверху таблиці. Без задання.
автор: Svitlana -
bottom -
Заголовок буде під таблицею.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | top |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.captionSide="bottom" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Приклад використання
HTML
<table>
<caption>Це заголовок таблиці</caption>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
</table>CSS
table {
border: 1px solid #666;
width: 100%;
}
td, th {
border: 1px solid #666;
padding: 16px;
text-align: center;
}
caption {
caption-side: bottom;
margin: 16px 0;
padding: 16px;
background-color: #ddd;
color: #222;
font-weight: 700;
}Підпис таблиці типово стоїть зверху; caption-side: bottom переносить його під таблицю.
HTML
<table>
<caption>Підпис опинився знизу</caption>
<tr><td>комірка</td><td>комірка</td></tr>
</table>CSS
caption {
caption-side: bottom;
}
table, td {
border: 1px solid #0172ad;
}
td { padding: 6px; }Чотири таблиці: заголовок згори (типово), заголовок знизу (правило написано на самій таблиці — властивість успадковується), спроба поставити його ліворуч через caption-side: left (Firefox її ігнорує) і довгий заголовок, який не розтягує таблицю, а переноситься по її ширині. Жовта підкладка показує, що фон таблиці під заголовок не заходить.
HTML
<div class="grid">
<table>
<caption>Заголовок згори — типово</caption>
<tr><th>Місто</th><th>Люди</th></tr>
<tr><td>Київ</td><td>2 950 000</td></tr>
</table>
<table class="bottom">
<caption>Заголовок знизу</caption>
<tr><th>Місто</th><th>Люди</th></tr>
<tr><td>Львів</td><td>717 000</td></tr>
</table>
<table>
<caption class="left">caption-side: left — не працює</caption>
<tr><th>Місто</th><th>Люди</th></tr>
<tr><td>Одеса</td><td>993 000</td></tr>
</table>
<table class="bottom">
<caption class="tinted">Дуже довгий заголовок, який не розтягує таблицю,
а переноситься по її ширині</caption>
<tr><th>Місто</th><th>Люди</th></tr>
<tr><td>Харків</td><td>1 421 000</td></tr>
</table>
</div>CSS
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: flex-start;
}
table {
border-collapse: collapse;
border: 4px solid #2f6fd0;
background: #eaf3ff;
font: 13px/1.4 system-ui, sans-serif;
}
caption {
font-weight: 600;
}
td,
th {
padding: 6px 10px;
border: 1px solid #b9c6d8;
}
.bottom {
caption-side: bottom;
}
.left {
caption-side: left;
}
.tinted {
background: #f2b134;
text-align: left;
padding: 4px;
}Динамічний приклад
HTML
<button>Переключити позицію заголовку таблиці</button>
<table>
<caption>Заголовок таблиці</caption>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
</table>CSS
body {
margin: 20px;
}
button {
border: 2px solid red;
background: yellow;
padding: 10px;
display: block;
cursor: pointer;
margin: 0 auto 20px;
}
table {
min-width: 80%;
margin: auto;
border-collapse: collapse;
}
caption {
background: #ddd;
padding: 10px;
}
.cap-bottom {
caption-side: bottom;
}
td {
text-align: center;
border: solid 2px #ccc;
padding: 5px;
}JS
document.querySelector('button').addEventListener('click', function () {
document.querySelector('caption').classList.toggle('cap-bottom');
}, false);Коментарі
Коментарів ще немає — будьте першим!