Отже, ми вивчили з вами найбільш прості дії, які можна здійснювати з межами таблиць. І тепер таблиця виглядає куди більш естетично. Однак, наповнення осередків прямо таки впирається в межі. Це легко можна виправити, достатньо лише зробити відступи в осередках в таблиці HTML. І тоді текст всередині рамки, в осередку, буде більш Новомосковскбельним.
Для того, щоб зробити відступи в комірці слід використовувати атрибут cellpadding для тега
. Однак, є й інший, більш кращий варіант: CSS.
В такому випадку відступи задаються за допомогою властивості padding. З його допомогою не важко зробити відступ там, де треба, тобто - зверху, праворуч, знизу або ліворуч, використовуючи, відповідно, одне з даних властивостей: padding-top. padding-right. padding-bottom і padding-left.
Можна задати, на скільки саме пікселів повинен здійснюватися відступ. Наведемо приклад, в якому нижній відступ становитиме 20 пікселів, а всі інші будуть по 10. Такий CSS-код буде виглядати ось так:
А повний код стилів на даному етапі:
Результат в браузері:
Відступи між осередками
Як правило, завдання, пов'язані зі створенням таблиць, можна вирішити, використовуючи для цього теги, атрибути і властивості, які дозволяють створювати рамки, відступи в осередках, а також задати колірний фон самих осередків.
Відступи в таблицях бувають не тільки всередині осередків. Вони можуть також бути присутнім і між самими осередками.
Існує дві можливості зробити відступи між осередками:
Треба підкреслити, що border-spacing прописується для таблиці в цілому, в той час як властивість padding прописується безпосередньо для осередків.
Давайте глянемо на приклад:
І на отриманий результат:
Відразу обмовимося, що не треба намагатися зробити такі відступи за допомогою border-collapse: collapse. Адже при використанні цієї опції осередку «липнуть» один до одного.
А щоб вони були окремо один від одного, слід використовувати border-collapse: separate. Важливо розуміти, що дане значення є значенням за замовчуванням. І застосовується воно тільки для того, щоб наочно показати, як вирішується це завдання. Якщо ми видалимо цей рядок, то результат у вигляді окремо розташованих один від одного осередків буде збережений.
Схожі статті
