Відступи в осередках таблиці css. Відступ від теми або як прибрати відступи по краях сторінки
знаходиться тіло таблиці. Тіло складається з рядків і стовпців. Таблиця заповнюється за рядком.
кожен тег
створює новий рядок. Далі у вкладених
створюються стовпці. Можна створювати безліч стовпців. При цьому потрібно стежити за кількістю стовпців в кожному рядку. Наприклад, якщо в першому рядку було 5 стовпців, то і в наступних рядках повинно бути 5 стовпців. Інакше таблиця попливе. Є можливість об'єднувати осередки.
Як зробити таблицю в html
Наведемо приклад, html код:
приклад таблиці
стовпець 1
стовпець 2
Зверніть увагу на осередок
. Ми використовуємо спеціальний атрибут colspan для об'єднання осередків по горизонталі. Його числове значення вказує число поєднуваних стовпців. Також існує аналог цього атрибута: тег
(Заголовок таблиці), де потрібно також прописати colspan. Результат буде таким же. Але найчастіше використовують звичайний td.
Тепер розглянемо докладно всі атрибути тега
.
Атрибути і властивості тега
До відкриває тегу
можна прописувати різні атрибути.
1. Властивість align \u003d "параметр" - задає вирівнювання таблиці. Може приймати наступні значення:
У розібраному вище прикладі ми вирівнювали таблицю по центру align \u003d "center".
Цей атрибут можна застосовувати не тільки до таблиці, але і до окремих осередків таблиці
або рядках
. Таким чином, в різних осередках вирівнювання буде різний.
наприклад
...
...
...
2. Властивість background \u003d "URL" - задає фонової малюнок. Замість URL повинен бути написана адреса фонового зображення.
приклад
приклад таблиці
стовпець 1
стовпець 2
Перетвориться на сторінці в наступне:
У розглянутому прикладі наше фонове зображення знаходиться в папці img (яка знаходиться в тій же директорії, що і html-сторінка), а називається зображення fon.gif. Зверніть увагу на те, що в тезі ми додали style \u003d "color: white;" . Оскільки фон майже чорний, то для того, щоб текст не злився з фоном, ми зробили текст білим.
3. Властивість bgcolor \u003d "колір" - задає колір фону таблиці. Як кольору можна вибрати будь-який з усієї палітри (див. Коди і назви html квітів)
4. Властивість border \u003d "число" - задає товщину рамки таблиці. У попередніх прикладах ми вказували border \u003d "1", що означає товщина рамки - 1 піксель.
5. Властивість bordercolor \u003d "колір" - задає колір рамки. Якщо border \u003d "0", то рамки не буде і колір рамки не матиме сенсу.
6. Властивість cellpadding \u003d "число" - відступ від рамки до вмісту осередку в пікселях.
7. Властивість cellspacing \u003d "число" - відстань між осередками в пікселях.
8. Властивість cols \u003d "число" - число стовпців. Якщо його не поставити, то браузер сам визначить число стовпців. Різниця лише в тому, що вказівка \u200b\u200bцього параметра, швидше за все, прискорить завантаження таблиці.
9. Властивість frame \u003d "параметр" - як відображати межі навколо таблиці. Може приймати наступні значення:
void - НЕ малювати кордону
border - межа навколо таблиці
above - межа по верхньому краю таблиці
below - межа знизу таблиці
hsides - додати тільки горизонтальні кордону (зверху і знизу таблиці)
vsides - малювати тільки вертикальні кордону (зліва і праворуч від таблиці)
rhs - межа тільки на правій стороні таблиці
lhs - межа тільки на лівій стороні таблиці
10. Властивість height \u003d "число" - задає висоту таблиці: або в пікселях, або у відсотках.
11. Властивість rules \u003d "параметр" - де відображати кордону між осередками. Може приймати наступні значення:
all - лінія малюється навколо кожного елементу таблиці
groups - лінія відображається між групами, які утворюються тегами , , ,
або
cols - лінія відображається між колонками
none - всі межі ховаються
rows - межа малюється між рядками таблиці, створеними через тег
12. Властивість width \u003d "число" - задає ширину таблиці: або в пікселях, або у відсотках.
13. Властивість class \u003d "ім'я_класу" - можна вказати ім'я класу, якому належить таблиця.
14. Властивість style \u003d "стилі" - стилі можна задати індивідуально для кожної таблиці.
Тепер настав час зануритися всередину таблиці і розглянути атрибути елементів таблиці. Ці атрибути треба писати в відкриваючому тезі
.
Атрибути і властивості
і
1. Властивість align \u003d "параметр" - задає вирівнювання окремої комірки таблиці. Може приймати наступні значення:
left - вирівнювання по лівому краю
center - вирівнювання по центру
right - вирівнювання по правому краю
2. Властивість background \u003d "URL" - задає фонове зображення осередки. Замість URL повинен бути написана адреса фонового зображення.
3. Властивість bgcolor \u003d "колір" - задає колір фону комірки.
4. Властивість bordercolor \u003d "колір" - задає колір рамки осередку.
5. Властивість char \u003d "буква" - задає букву, від якої потрібно зробити вирівнювання. Значення атрибута align має бути встановлено як char.
top - вирівнювання вмісту комірки по верхньому краю рядка
middle - вирівнювання по середині
bottom - вирівнювання по нижньому краю
baseline - вирівнювання по базовій лінії
Примітка 1
для тега
доступні такі ж параметри, що і для
. Параметри для одного тега
будуть ієрархічно застосовані до всіх
всередині нього
Як зробити, щоб кордони осередків в таблиці не склеювалися
У разі використання border (межа осередків) і нульових відступів між осередками, вони все одно склеюються і виходить подвоєний border. Щоб це уникнути потрібно прописати в стилях таблиці border-collapse: collapse:
...
Шановний читач, тепер Ви дізналися набагато більше про html тезі table. Тепер раджу перейти до наступного уроку.
CSS дозволяє установть не тільки стиль кордону таблиці, але і стиль меж окремих осередків. Так як у кожного осередку свої кордони, то між сусідніми осередками межа виходить здвоєний. Але існує можливість об'єднати кордони сусідніх осередків в одну. Для цього є властивість border-collapse. Воно приймає значення:
border-collapse: separate - у кожного осередку своя межа (за замовчуванням)
border-collapse: collapse - спільний кордон
border-collapse: inherit - значення приймається від батьківського елемента
Для прикладу створимо таблицю і поставимо рамку осередкам всіх таблиць, які будуть на сторінці. Спочатку не будемо нічого змінювати, щоб подивитися, як таблиця буде виглядати: