Table відступи. Атрибути і властивості тега

Всім привіт! Отже, тепер ви вмієте створювати елементарні таблиці, що складаються з такої кількості рядків і стовпців, яке необхідно. Не погано, не погано. А тепер давайте поговоримо про оформлення цих таблиць.

У минулому уроці таблиці відображалися без кордонів. І, погодьтеся, виглядає так собі, навіть і табличкою-то не назвеш. Щоб зробити кордону таблиці в HTML, слід додати до тегу

атрибут border, Надавши йому значення відмінне від нуля.

Отже, давайте зробимо кордону для таблиці. Наприклад, для вже наявної у нас:

Верхня ліва комірка	Верхня права осередок
Нижня ліва комірка	Нижня права осередок

Результат в браузері:

Як прибрати кордони таблиці

У свою чергу, щоб прибрати кордони таблиці HTML, або ще можна сказати, зробити їх невидимими, потрібно атрибуту borderзадати значення 0 . Після цих нехитрих дій рамка забереться.

Атрибут дозволяє створити, але не управляти межами. Він дозволяє лише змінювати їх товщину.

Тому, зараз мова піде про CSS, Властивості якого роблять можливим за допомогою borderстворювати різні кордону, як всередині кожної клітинки, так і зовнішні, навколо таблиці в цілому.

Давайте подивимося як застосовувати CSS для створення зовнішніх і внутрішніх кордонів таблиці.
Для цього видалимо у нашій таблиці атрибут border і додамо стилі:

приклад таблиці

Верхня ліва комірка	Верхня права осередок
Нижня ліва комірка	Нижня права осередок

Результат в браузері:

Тепер давайте додамо кордону і для кожного осередку. Для цього просто доповнимо стилі:

Результат в браузері:

Як прибрати відступи між осередками в таблиці HTML

Погодьтеся, що межа, яку буде задано допомогою CSS, Має не такий зовнішній вигляд, як хотілось би. Безперечно, з точки зору естетики, є над чим працювати. На сторінці браузера можна побачити, що за замовчуванням він відображає кордону таблиць і комірок окремо. Приклад це явно демонструє.

Однак, від таких ось кордонів, які іменуються подвійними, цілком можна позбутися, якщо використовувати CSS-властивість border-collapse. На практиці це виглядає ось так:

Table (border: solid 1px blue; border-collapse: collapse;) ...

Як результат - забирається відстань між осередками:

Значення collapse, приписане атрибуту border, дозволяє прибрати подвійні рамки. Як можна побачити, результатом є "схлопування" кордонів осередків, розташованих поруч, а також рамок осередків і зовнішньої рамки таблиці. Що стосується останньої, то вона може піти і зовсім. І якщо є необхідність в її відображенні, необхідно збільшувати її ширину. Таким чином ми позбулися роздільників в таблиці. А в наступному уроці ми поговоримо про те, як можна ставити вертикальні і горизонтальні межі. Всім удачі!

Став популярний, web-дизайнери в основному використовували метод табличній верстки і отримували дуже хороший результат.

Теги, використовувані для побудови таблиці в html

table- обов'язковий тег, що відкриває і закриває таблицю
caption- необов'язковий тег, що позначає заголовок таблиці
th- необов'язковий тег, в який відкриває і закриває теги якого вписується назва стовпчика. Як правило, виділяється жирним
tr- обов'язковий тег, з якого відкривається і закривається рядок
td- обов'язковий тег, що позначає відкриття і закриття осередку в рядку

Приклад коду простий таблиці

<a href="/kak-sdelat-tablicu-vnutri-tablicy-html/">Таблиця html</a>

Назва таблиці
Стобец 1	Стобец 2
Текст в першій клітинці	Текст у другому осередку

У браузері відобразиться

Призначення таблиць в html

Урок за таблицями дуже важливий! Завдяки таблиць Ви можете розташувати не тільки текст, а й зображення, посилання і багато іншого. У таблиці можна задавати фон(Або його колір), відступ, ширину, кордоні інші параметри, Що додасть їй гарний зовнішній вигляд. Таблиця - Ваш перший крок до розуміння web-дизайну! Раніше багато сайтів були цілком зверстані як таблиці, тобто все, що бачив користувач (бічне меню, верхнє меню, зміст) - було змістом осередків великий таблиці.
На цій ноті перейдемо безпосередньо до атрибутів, які роблять таблицю красивою ...

Властивості і параметри html таблиць: відступ, ширина, колір фону, межа (рамка)

У тега tableє такі атрибути:

width- ширина таблиці. може бути в пікселях або% від ширини екрану.
bgcolor- колір фону елементів таблиці
background- заливає фон таблиці малюнком
border- рамка і кордони в таблиці. Товщина вказується в пікселях
cellpadding- відступ в пікселях між вмістом комірки і її внутрішньої кордоном
Як і раніше, значення атрибута прописуємо в лапках.

Розглянемо застосування даних атрибутів на прикладі. Для цього створимо таблицю (але вже без вкрай рідко застосовуються тегів caption і th) І задамо параметр атрибуту border (межа), width (ширина таблиці, рядки або осередки)і bgcolor (колір осередки)

Таблиця html

В результаті в браузері буде виведена таблиця наступного вигляду

frame- атрибут, що позначає рамку навколо таблиці. Є такі значення:

Void - рамки немає,
above - тільки верхня рамка,
below - тільки нижня рамка,
hsides - тільки верхня і нижня межі,
vsides - тільки ліва і права рамки,
lhs - тільки ліва рамка,
rhs - тільки права рамка,
box - всі чотири частини рамки.

rules- атрибут, що позначає межі всередині таблиці, між осередками. Є такі значення:

None - між осередками немає меж,
groups - кордони тільки між групами рядків і групами стовпців (будуть розглянуті трохи пізніше),
rows - кордони тільки між рядками,
cols - кордони тільки між стобцамі,
all - відображати всі межі.

Розглянемо приклад коду

Таблиця html

Стобец 1	Стобец 2

результат

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

align- вирівнювання таблиці. Її можна розташувати зліва (left), праворуч (right), по центру (center)
cellspacing- відстань між осередками таблиці. Вказується в пікселях (за умовчанням 0 пікселів)
cellpadding- відступ в пікселях між вмістом комірки і її внутрішньої кордоном (за замовчуванням 0 пікселів)
Розглянемо приклад

Таблиця html

Стобец 1	Стобец 2
Текст в першій клітинці першого стовпчика	Текст у другому осередку другого шпальти

У браузері відобразиться вирівняна по центру таблиця наступного вигляду

Рядки tr і осередки td в таблицях HTML

Знову нагадаю про те, що таблиці формуються через підрядник (tr). У рядках (tr) вже знаходяться осередки (td). Якщо ставити параметр для рядка (tr), то він буде дійсний для всіх осередків(Td) в цьому рядку, якщо для конкретного осередку, то тільки для неї. У прикладах вище я вказував колір для рядка, цей параметр поширювався відповідно для всіх осередків.

Для тегів tr і td є наступні

align- вирівнювання тексту всередині комірки. По лівому краю (left), по правому краю (right), по центру (center)
valign- вирівнювання тексту всередині комірки по вертикалі. Вгору (top), вниз (bottom), по центру (middle)
bgcolor- задає колір рядка
width- ширина стовпця (всі осередки нижче візьмуть даний параметр) вказується в пікселях або у відсотках, де 100% ширина всієї таблиці
height- висота комірки (всі осередки в рядку візьмуть даний параметр)

Розглянемо код, де вміст комірок (td), вирівняні по різних краях: в першій по лівому, у другій по правому:

Таблиця html

Стобец 1	Стобец 2
Текст в першій клітинці першого стовпчика	Текст у другому осередку другого шпальти
Стобец 1	Стобец 2

результат

За допомогою таблиць можна зверстати дуже навіть непогану сторінку. Не забувайте, що в осередку можна вставляти не тільки текст, а й зображення, посилання та інше!)

Дякую за увагу! Сподіваюся матеріал був корисний!

CSS дозволяє установть не тільки стиль кордону таблиці, але і стиль меж окремих осередків. Так як у кожного осередку свої кордони, то між сусідніми осередками межа виходить здвоєний. Але існує можливість об'єднати кордони сусідніх осередків в одну. Для цього є властивість border-collapse. Воно приймає значення:

border-collapse: separate - у кожного осередку своя межа (за замовчуванням)

border-collapse: collapse - спільний кордон

border-collapse: inherit - значення приймається від батьківського елемента

Для прикладу створимо таблицю і поставимо рамку осередкам всіх таблиць, які будуть на сторінці. Спочатку не будемо нічого змінювати, щоб подивитися, як таблиця буде виглядати:

стиль:

Стобец 1	Стобец 2
Текст в першій клітинці першого стовпчика	Текст у другому осередку другого шпальти

, Тому в тому випадку, коли потрібно залишити осередок без вмісту, але відобразити колір фону, всередину осередку додавали неподілюваний пробіл (). Пробіл не завжди підходить, особливо коли потрібно встановити висоту комірки 1-2 пікселя, через що широке поширення отримав однопіксельний прозорий малюнок. Дійсно, такий малюнок можна масштабувати на свій розсуд, але він на веб-сторінці ніяк не відображається.

На щастя епоха однопіксельні малюнків і всіляких розпірок на їх основі пройшла. Браузери досить коректно працюють з таблицями і без присутності вмісту осередків.

Для управління видом порожніх клітинок використовується властивість empty-cells, при значенні hide межа і фон в порожніх клітинках не відображається. Якщо все осередки в рядку порожні, то рядок ховається цілком. Осередок вважається порожній в наступних випадках:

немає взагалі ніяких символів;
в комірці міститься тільки переклад рядка, символ табуляції або пробіл;
значення visibility встановлено як hidden.

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

Приклад 2.10. порожні осередки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Використання empty-cells

1
2
3
4
5
6

сторінка

Домашнє завдання.

У цьому уроці я теж не буду все докладно описувати - тільки загальні моменти. Для повноти картини подивіться результат прикладу.

Створіть три таблиці, кожна повинні складатися з одного рядка і трьох стовпців (колонок).
У першій таблиці розмістіть Header або «шапку» сторінки (не плутати з «шапкою» HTML-документа), у другій - ліве і праве меню, а також основний вміст (контент), в третій - Footer або «підвал» сторінки.
Нехай ширина першого і останнього стовпця кожної таблиці буде фіксована.
Важливо. використовуйте тег тільки для створення чотирьох кнопок горизонтального меню в «шапці» сторінки. В інших випадках нехай зображення йдуть фоном, а по-друге осередках таблиць взагалі використовуються тільки кольору, причому в першій і останній таблиці це # 99FF99.
Нехай текст контенту сторінки буде вирівняний по обидва боки елементи таблиці, а заголовок розташовується по центру.
Що стосується відстаней між осередками таблиць, а також відступів осередків, то думайте самі, де їх треба зовсім прибрати, а де - збільшити.

Самі по собі таблиці виглядають досить «бідно», до того ж браузери по-своєму відображають деякі характеристики таблиць, зокрема, рамки. Разом з тим ці недоліки легко виправити скориставшись міццю стилів. При цьому вельми розширюються кошти з оформлення таблиць, що дозволяє вдало вписати таблиці в дизайн сайту і наочніше уявити табличні дані.

Колір фону осередків

Колір фону одночасно всіх елементів таблиці встановлюється через властивість background, яке застосовується до селектора TABLE. При цьому слід пам'ятати про правила використання стилів, зокрема, спадкуванні властивостей елементів. Хоча властивість background не успадковується, для осередків значенням фону за замовчуванням виступає transparent, тобто прозорість, тому ефект заливки фону виходить і у осередків. Якщо одночасно з TABLE задати колір у селектора TD або TH, то цей колір буде встановлений в якості фону комірки (приклад 2.3).

Приклад 2.3. Колір фону

таблиці

Тема 1	Тема 2
осередок 3	осередок 4

В даному прикладі отримаємо синій колір фону у осередків (тег

) І червоний у заголовка (тег

). Це пов'язано з тим, що стиль для селектора TH не визначений, тому «просвічується» фон батька, в даному випадку, селектора TABLE. А колір для селектора TD вказаний явно, ось осередки і «заливаються» синім кольором.

Результат даного прикладу показаний на рис. 2.4.

Мал. 2.4. Зміна кольору фону

Поля всередині осередків

Полем називається відстань між краєм вмісту осередку і її кордоном. Зазвичай для цієї мети застосовується атрибут cellpadding тега

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

Приклад 2.4. Поля в таблицях

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

таблиці

Тема 1	Тема 2
осередок 3	осередок 4

В даному прикладі за допомогою групування селектор поля встановлені одночасно для селектора TD і TH. Результат прикладу показаний на рис. 2.5.

Мал. 2.5. Поля в осередках

Якщо застосовується стильова властивість padding для елементів таблиці, то дія атрибуту cellpadding тега

ігнорується.

Відстань між осередками

Для зміни відстані між осередками застосовується атрибут cellspacing тега

. Вплив цього атрибута добре помітно при використанні кордонів навколо осередків або при заливці осередків кольором, який виділяється на тлі сторінки. Як заміну cellspacing виступає стильова властивість border-spacing, воно встановлює відстань між кордонами осередків. Одне значення встановлює одночасно відстань по вертикалі і горизонталі між кордонами осередків. Якщо значень у цієї властивості два, то перше визначає горизонтальну відстань (тобто зліва і праворуч від осередку), а друге - вертикальне (зверху і знизу).

Властивість border-spacing діє тільки в тому випадку, якщо для селектора TABLE не задано властивість border-collapse із значенням collapse (приклад 2.5).

Приклад 2.5. Відстань між кордонами осередків

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

заміна cellspacing

Леонардо	5	8
Рафаель	4	11
Мікеланджело	24	9
Донателло	2	13

Результат даного прикладу показаний на рис. 2.6.

Мал. 2.6. Вид таблиці при використанні border-spacing

браузер Internet Explorerдо сьомої версії включно не підтримує властивість border-spacing, тому в цьому браузері для таблиць буде застосовуватися значення cellspacing заданий за замовчуванням (зазвичай воно дорівнює 2px).

При додаванні до селектора TABLE властивості border-collapse із значенням collapse, атрибут cellspacing ігнорується, а значення border-spacing обнуляється.

Межі і рамки

За замовчуванням кордону в таблиці спочатку немає, а її додавання відбувається за допомогою атрибута border тега

. Браузери по-різному відображають таку кордон, тому краще не вказувати цей атрибут взагалі, а малювання кордонів покласти на стилі. Розглянемо два методи, безпосередньо пов'язаних зі стилями.

Використання атрибута cellspacing

Відомо, що атрибут cellspacing тега

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

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

Застосування властивості border

Стильова властивість border одночасно встановлює колір кордону, її стиль і товщину навколо елементу. Там, де необхідно створити окремі лінії на різних сторонах, краще використовувати похідні - border-left, border-right, border-top і border-bottom, ці властивості відповідно визначають кордон зліва, справа, зверху і знизу.

Застосовуючи властивість border до селектора TABLE, ми додаємо рамку навколо таблиці в цілому, а до селектора TD або TH - рамку навколо осередків (приклад 2.6).

Приклад 2.6. Додавання подвійний рамки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

таблиці

Тема 1	Тема 2
осередок 3	осередок 4

В даному прикладі використовується подвійна рамка чорного кольору навколо самої таблиці і суцільна рамка білого кольору навколо кожного осередку. Результат прикладу показаний на рис. 2.7.

Мал. 2.7. Кордон навколо таблиці і осередків

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

. Хоча в коді прикладу цей атрибут ніде не фігурує, браузер використовує його за замовчуванням. якщо задати

, То отримаємо не подвійні, а одинарні лінії, але подвоєною товщини. Для зміни зазначеної особливості застосовується стильова властивість border-collapse із значенням collapse, яке додається до селектора TABLE (приклад 2.7).

Приклад 2.7. Створення одинарної рамки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

таблиці

Тема 1	Тема 2
осередок 3	осередок 4

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

Мал. 2.8. Кордон навколо таблиці

Вирівнювання вмісту комірок

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

, Він визначає заголовок, в якому вирівнювання відбувається по центру. Щоб змінити спосіб вирівнювання застосовується стильова властивість text-align (приклад 2.8).

Приклад 2.8. Вирівнювання вмісту комірок по горизонталі

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

таблиці

Тема 1	осередок 1	осередок 2
Тема 2	осередок 3	осередок 4

В даному прикладі вміст тега

вирівнюється по лівому краю, а вміст тега

- по центру. Результат прикладу показаний нижче (рис. 2.9).

Мал. 2.9. Вирівнювання тексту в осередках

Вирівнювання по вертикалі в осередку завжди відбувається по її центру, якщо це не обумовлено. Це не завжди зручно, особливо для таблиць, у яких вміст комірок розрізняється по висоті. В такому випадку вирівнювання встановлюють по верхньому краю осередки за допомогою властивості vertical-align, як показано в прикладі 2.9.

Приклад 2.9. Вирівнювання вмісту комірок по вертикалі

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

таблиці

Тема 1	Тема 2
осередок 1	осередок 2

В даному прикладі встановлюється висота заголовка

як 40 пікселів і вирівнювання тексту відбувається по нижньому краю. Результат прикладу показаний на рис. 2.10.

Мал. 2.10. Вирівнювання тексту в осередках

порожні осередки

Браузери інакше відображають осередок, усередині якої нічого немає. «Нічого» в даному випадку означає, що всередину вічка не додали ні малюнок, ні текст, причому пробіл в розрахунок не береться. Природно, вид осередків розрізняється тільки в тому випадку, якщо навколо них встановлена межа. При використанні невидимою рамки, вид осередків, незалежно від того, є в них що-небудь чи ні, збігається.

Старі браузери не відображали колір фону порожніх клітинок вигляду