Форматуємо таблиці за допомогою css
У цій статті ви побачите, як за допомогою стилів CSS відформатувати таблиці.
На зорі інтернету дизайнера дуже часто використовували таблиці для створення розмітки. Зараз практично всі сайти розмічаються за допомогою CSS, а таблиці використовують за їх прямим призначенням - для відображення даних.
Теги для компонування таблиць
Таблицю можна зробити за допомогою ключових слів:
Таблицю можна зробити за допомогою ключових слів:
Визначає заголовок (швидше за підпис) таблиці.
Визначає один стовпець в таблиці.
Визначає групу стовпців в таблиці.
Визначає одну або кілька рядків в таблиці.
Створює одну клітинку в таблиці.
Визначає рядки, які відображаються внизу таблиці.
Визначає заголовок для кожного стовпця таблиці.
Призначений для зберігання однієї або кількох рядків, які представлені у верхній частині сторінки.
Створює рядок в таблиці.
Як ви бачите, в таблицях можна використовувати велику кількість тегів, тим більше стилів CSS ми можемо використовувати в кожному конкретному випадку.
Нижче будуть розглянуті властивості CSS, які застосовуються для форматування таблиць.
Осередки не успадкують кордону, описані в тезі table. Межі осередків таблиці можна описати за допомогою властивості border. проте в цьому випадку утворюється проміжок.
Цей проміжок можна видалити за допомогою властивості CSS border-spacing (для IE знадобиться атрибут cellspacing тега table). Однак, якщо ви видаляєте проміжок, кордони подвояться.
Щоб позбутися від подвоєних кордонів і проміжків використовуйте властивість border-collapse із значенням collapse.
Відступи (в HTML атрибут cellpadding) визначаються за допомогою властивості padding. Можна застосовувати тільки до осередків (
вирівнювання
Властивість text-align
Властивості text-align (в HTML атрибут align) і vertical-align вирівнюють вміст всередині комірки таблиці. Властивість text-align (значення: left. Right. Center. Justify) вирівнює вміст по горизонталі. Область застосування теги: