Відображення меж таблиці html-сторінки

Відображення меж таблиці html-сторінки

Межі html-таблиці легко змінити за допомогою css. Налаштування їх відображення здійснюється за рахунок властивостей: collapse и spacing.

Для редагування вигляду таблиці використовується група властивостей border. Вона надає вам змогу налаштувати ширину, колір, присутність/відсутність меж, їх стиль та інші особливості відображення.


Основи

Таблиця без визначення стилів виглядатиме як структурований текст без меж. Table в html будується завдяки тегам:

  • tr рядків;
  • для заголовків;
  • td для стовпчиків.

<table>
  <tr>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Розмір і шрифт тексту, тло, відступи від краю вікна переглядача вказані в css у контейнері body.


body {
    font-family: Helvetica, Sans-serif;
    font-size: 5vw;
    color: black;
    background-color: rgba(228, 228, 245);
    padding: 20vh;
}

За допомогою стилів оформляють вигляд матриці. Властивість border дозволяє прописати значення товщини, виду та кольору межі html-таблиці.

{
    border-width: 2vw;
    border-style: dotted;
    border-color: skyblue;
}

Скорочено задається за шаблоном border: width style color.

{
    border: 1px solid #4c6ea1;
}


Для певної сторони визначено шаблон border-top (/right/bottom/left) -style (/color/width/radius).

{
    border-top-color: darkblue;
}

Padding встановлює відступи всередині комірки від тексту до рамки, text-align визначає вирівнювання.

За допомогою стилів вигляд таблиці. Властивість border дозволяє прописати значення товщини, стилю та кольору рамки. Padding встановлює відступи від тексту, text-align визначає вирівнювання.

th, td {
    border: 1vw solid #4c6ea1;
    padding: 1vw;
    text-align: left;
  }


Без рамок

Використовувати border або окремо прописувати border-color, -width і -style не обов 'язково, оскільки зробити html-таблицю без меж можна з повноцінним оформленням. Наприклад, наступний код визначає фон, відступи та округлені кути (остання матриця без внутрішніх і зовнішніх ліній).

table {
    text-align: left;
    background-color: rgba(228, 228, 245);
    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;
}
td, th {
    padding: 1.5vw;
}

Завдяки можливості задати тло для кожної комірки, таблиця без меж може виглядати так, ніби вона має їх.

table {
    text-align: left;
    background-color: rgba(228, 228, 245);
    width: 70vw;
    border-spacing: 2vh 2vh;
}
td, th {
    padding: 1.5vh;
}
td {
    background-color: rgba(247, 247, 255);
}

Можна прибрати межі html-таблиці, залишивши внутрішні. Для цього, наприклад, прописують властивість border для комірок (tr), встановлюють на суміжних сторонах загальні рамки (collapse) і забороняють малювати лінії навколо матриці (hidden). Остання дія приховує лінії комірок, які з 'являються там само, де і зовнішні краї таблиці.


table {
    text-align: center;
    border-collapse: collapse;
    background-color: rgba(228, 228, 245);
    border-radius: 50%;
    width: 29vh;
    height: 10vh;
    border-style: hidden;
}
td {
    padding: 1.5vh;
    border: 0.5vh solid black;
}

Collapse и separate

Одна з основних властивостей table у html - border-collapse - визначає, як будуть відображатися межі комірок. Властивість може мати одне значення з трьох: collapse, separate, inherit.

table {
    border-collapse: collapse;
  }

Типовим є значення separate, тому кожна комірка матиме свій кордон. За допомогою collapse можна злити лінії комірок, щоб їх вміст розділяла одна рамка. На картинці представлено три описаних вище стану меж: без стилів; зі значенням border-collapse за замовчуванням; зі значенням border-collapse, що залишає між комірками загальну лінію.


Подвійні рамки

Властивість collapse дозволяє зробити межі комірок в html-таблиці як незалежними один від одного, так і загальними. З ним часто використовують властивість border-spacing, що регулює відстань між рамками комірок. Можна вказати горизонтальний та вертикальний інтервал.

table {
    border-spacing: 0.5vw 1vw;
}

Першим значенням вказується відстань між комірками по горизонталі, друге - по вертикалі. Якщо рамка вказана і для самої таблиці, то відстань від неї до комірок формується також властивістю spasing, але на неї може впливати ще padding матриці. У випадках коли у матриці є фон, визволений простір між комірками буде заповнено ним.

table {
    border-spacing: 0.5vw 1vw;
    border: 1vw solid #4c6ea1;
    padding: 1vw;
    background-color: black;
}
td, th {
    border: 1vw solid #4c6ea1;
    padding: 0.3vw;
    text-align: left;
    background-color: white;
}

Порожні комірки

Якщо для таблиці не вказано об 'єднання меж комірок, властивість empty-cells дозволяє відобразити їх лінії і фон, які вважаються порожніми (позначені як visibility або не мають символів). Якщо потрібно показати рамки та тло кожної комірки, властивості визначають значення show.

table {
     empty-cells: show;
}

Значення hide ховає межі і тло порожніх блоків. Якщо всі комірки порожні, рядок має нульову висоту і лише одну вертикальну лінію.

table {
    border-spacing: 0.5vw 1vw;
    border: 0.1vw solid #4c6ea1;
    padding: 0.5vw;
    background-color: rgba(33, 31, 171, 0.12);
    empty-cells: hide;
}
td, th {
    border: 0.3vw solid #4c6ea1;
    padding: 0.5vw;
    text-align: left;
    background-color: white;
}

Атрибут

Для виділення меж групам елементів (коміркам, стовпчикам, рядкам, групам рядків або стовпчиків) існує атрибут rules. Його значення прописується безпосередньо в html в тегі table.

Він дозволяє вибірково промалювати рамки елементів. Достатньо вказати атрибут у html, це створить внутрішні лінії між комірками. Кордон html-таблиці доведеться вказувати вручну в css.

<table rules=""all"">
  <tr>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

table {
    border-top: 1vw solid #486743;
    font-size: 5vw;
}
th, td {
    padding: 2vw;
}

Так, на першій картинці представлена чиста робота атрибуту без додаткового оформлення рамок через table. На другій картинці домальована верхня лінія, яка встановлена через інструкцію.

table {
    border-top: 1vw doted #486743;
}

Атрибут може мати декілька значень. All створює межі між комірками з товщиною рамки, що дорівнює 1px. Cols створює лінії між стовпчиками, rows - між рядками, none стирає краї. На картинці наведено приклади таблиці зі значеннями all і rows.

Ви можете змінити колір меж комірок та ширину рамки під час використання атрибута rules за допомогою border і bordercolor.

Конфлікти стилів

Комірки, рядки, стовпчики та групи елементів можуть вказувати власні значення меж. При цьому вони можуть різнитися за трьома параметрами: стилю, товщині та кольору.

У режимі collapse виникають конфлікти офрмлення. Через те, що на один кордон може поширюватися правило двох різних осередків, виникає проблема вибору стилю, який буде пріоритетним. Як пише Є.Мальчук, виграє найбільш "броський" "(крім hidden).

  1. Якщо у одного з елементів у властивості border-style для спірної межі вказано значення hidden, цей стиль перемагає. Hidden має вищий пріоритет.
  2. Найменша вага має значення none. Воно теж диктує лінії не відображатися, але щоб вказівка виконалася, всі елементи для цієї лінії повинні мати це (none) правило.
  3. Між тонкими і товстими кордонами більший пріоритет мають товсті.
  4. При однакових рамках, але різних стилях завжди перемагає подвійний суцільний (double), за ним йде solid, пунктирний (dashed), dotted.
  5. Якщо відмінності полягають тільки в кольорах, то вигляд самого маленького компонента завжди вище (вигляд комірки має більший пріоритет, ніж рядки, а рядки вище, ніж таблиці).

Ілюстрація конфлікту

Проілюструвати конфлікт стилів легко на вже розглянутої таблиці. Достатньо додати пару класів коміркам і прописати для них оформлення. Html приймає вигляд:

<table>
  <tr>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
  </tr>
  <tr>
    <td>Cell</td>
    <td class=""second_cell"">Cell</td>
    <td class=""third_cell"">Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Відповідний йому css.

body {
    font-family: Helvetica, Sans-serif;
    font-size: 5vw;
    color: black;
    margin: 0;
    width: 80vw;
    background-color: white;
    padding: 3vw;
}
table {
    background-color: rgba(33, 31, 171, 0.12);
    padding: 0.5vw;
    border-collapse: collapse;
    border-spacing: 0.5vw 1vw;
    border-style: hidden;
}
th {
    padding: 1vw;
    text-align: left;
    border: 0.1vw solid #4c6ea1;
}
td {
    padding: 1vw;
    border: 0.2vw dotted #4c6ea1;
}
.second_cell {
   border: 0.01vw solid #4c6ea1;
}
.third_cell {
    border: 0.01vw double red;
}

Стилі рамок

Можна встановити вигляд кордону для кожної сторони комірки окремо. Для цього достатньо в border-style вказати не одне значення, а перерахувати чотири, відповідно сторонам комірки.

th, td {
    padding: 1vw;
    text-align: left;
    border-width: 0.5vw;
    border-color: darkred;
    border-style: dotted;
}
.seven {
    border-top-color: skyblue;
    border-top-style: solid;
    border-right-width: 2vw;
    border-bottom-style: dashed;
    border-left-style: hidden;
}

Ви можете вказати дані до одного рядка від одного до чотирьох різних значень. Кожне традиційно стає інструкцією для однієї зі сторін.

  • Якщо поставити два значення, перше відповідатиме за нижню і верхню межі, друге - за ліву і праву.
  • З трьох перше відповідає за верхню, друге - за ліву і праву, третє - за нижню межу.
  • Чотири значення однозначно визначають кожну лінію, починаючи з верхньої за годинниковою стрілкою до лівої.

Вказати вигляд меж комірки можна і через просте визначення даних для кожної сторони, як це було показано вище.

Всього є десять стилів для рамок. Всі вони змінюють лінію або видаляють її:

  • none - кордону немає;
  • hidden - більш суворе none, блокує появу риси (в ситуації конфлікту);
  • dotted - з точок;
  • dashed - пунктирна;
  • solid - суцільна;
  • double - подвійна суцільна;
  • groove - рамка ніби втиснута в поверхню;
  • ridge - випукла лінія;
  • inset - за фактом для однієї сторони елемента поводиться як ridge, якщо застосовується до всього елемента, то top і left затінені, а bottom і right висвітлені;
  • outset - поводиться подібно groove при застосуванні до однієї сторони елемента, затіняє bottom і right, top і left виявляються більш світлими.

До кожної з комірок (до top і left сторін) застосовано один із стилів. Для того щоб вони не конкурували між собою, самим "" слабким "", проставлені найбільші значення.

table {
    background-color: rgba(33, 31, 171, 0.12);
    padding: 0.5vw;
    border-collapse: collapse;
    border: 0.3vw solid black;
}
th, td {
    padding: 1vw;
    text-align: left;
}
.one {
    border-top: hidden;
    border-left: hidden;
}
.two {
    border-top: 0.4vw double #4c6ea1;
    border-left: 0.4vw double #4c6ea1;
}
.three {
    border-top: 0.5vw solid #4c6ea1;
    border-left: 0.5vw solid #4c6ea1;
}
.four {
    border-top: 0.7vw dashed #4c6ea1;
    border-left: 0.7vw dashed #4c6ea1;
}
.five {
    border-top: 0.8vw dotted #4c6ea1;
    border-left: 0.8vw dotted #4c6ea1;
}
.six {
    border-top: 0.9vw ridge #4c6ea1;
    border-left: 0.9vw ridge #4c6ea1;
}
.seven {
    border-top: 1vw outset #4c6ea1;
    border-left: 1vw outset #4c6ea1;
}
.eight {
    border-top: 1.1vw groove #4c6ea1;
    border-left: 1.1vw groove #4c6ea1;
}
.nine {
    border-top: 1.2vw inset #4c6ea1;
    border-left: 1.2vw inset #4c6ea1;
}

Структурування матеріалу

Характер даних, представлених у матриці, часто вимагає модифікації меж самої таблиці, рамок її комірок, рядків або стовпчиків. Для цього можна використовувати:

  • обнулення ліній (для border-width вказують значення в 0px);

Перевага hidden в силі його пріоритету. Якщо на кордон діє правило відразу двох елементів і в одному з них у border-style вказано значення hidden, лінія відображатися не буде. Тобто можна спокійно зробити всю таблицю, а потім вибірково видалити непотрібні рамки.

Використання hidden по відношенню до комірок робить неможливим відновлення кордону іншими методами (крім важкоатлета! imporant). Тому за потреби вилучити деякі зі сторін комірок, краще використовувати none.

Припустимо, є таблиця. Мета - вилучити вертикальні межі всередині першого рядка. Вона позначена окремим тегом (заголовком), тому не потрібно вводити додатковий клас. Якщо застосувати hidden до всього тегу, прописавши його border-left, то разом з внутрішніми кордонами видалиться і одна частина бічної рамки таблиці, що не потрібно за умовою. Якщо ж скористатися none і лінією матриці, то для внутрішніх рис буде два неконфліктуючих правила, а у зовнішнього краю none буде конфліктувати з правилом, яке їй задається в table, і сторона залишиться на місці.

Вилучення окремих ліній комірок здійснюється за допомогою класів, які прописують відповідним елементам, як це було показано для індивідуального завдання стилю, ширини і кольору.

Тоді як прибрати бічний кордон в html-таблиці легше через звернення до зовнішніх рамок матриці, які вказують в table. Достатньо прописати вказівку на конкретну лінію в css.

table {
    border-left-style: hidden;
}

Видалення рамок у рядках легко реалізувати за допомогою властивості border зі значенням hidden в tr. Зникають не тільки горизонтальні лінії таблиці, а й бічні. Матриця вироджується у вертикальні колонки.

tr {
    border-style: hidden;
}

У крайньому випадку звертаються до! important. Якщо додати його після інструкції, то вона отримає додатковий пріоритет.

Межі html-таблиці гнучко і легко налаштовуються. Група властивостей border дозволяє приховати елементи, змінити колір, ширину або стиль. Браком таблиць є не завжди однозначно передбачуваний результат поєднання правил, застосованих до окремого елемента. Через це рекомендують або скорочувати кількість можливих стилів для меж, або застосовувати їх точково.


Надрукувати