Як зробити кордони в таблиці css

Стилі браузера за замовчуванням відображають таблицю та її комірки без видимих ​​меж та фону, при цьому комірки всередині таблиці не прилягають впритул один до одного. За допомогою CSS-стилів можна красиво оформити таблицю відповідно до її вмісту.

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

Розмітка HTML

Стилі CSS

table (
border-spacing: 0 10px;
font-family: "Open Sans", sans-serif;
font-weight: bold;
}
th (
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid;
font-size: 0.9em;
}
th:first-child (
text-align: left;
}
th:last-child (
border-right: none;
}
td (
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}
td:first-child (
border-left: 2px solid #56433D;
border-right: none;
}
td:nth-child(2)(
text-align: left;
}

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

Розмітка HTML

Стилі CSS

table (

font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child (
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td (
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td (
background: #D8E6F3;
}

text-align: left;
}

Завдяки додаванню до специфікації CSS3 властивості border-radius з'явилася можливість закруглення кутів таблиці без використання фонових зображень. Щоб досягти такого ефекту, потрібно закруглити кути відповідних осередків.

Розмітка HTML
- Аналогічно з прикладом 2.

Стилі CSS

table (
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}
th (
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
th, td (
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
th:first-child, td:first-child (
text-align: left;
}
th:first-child (

}
th:last-child (

border-right: none;
}
td (
padding: 10px 20px;
background: #F8E391;
}
tr:last-child td:first-child (
border-radius: 0 0 0 10px;
}
tr:last-child td:last-child (
border-radius: 0 0 10px 0;
}
tr td:last-child (
border-right: none;
}

4. Таблиця з роздільними осередками

Розмітка HTML

- Аналогічно з прикладом 2.

Стилі CSS

table (
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th (
font-size: 18px;
padding: 10px;
}
td (
background: #F5D7BF;
padding: 10px;
}

Розмітка HTML

Стилі CSS

table (
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: center;
border-collapse: collapse;
border-spacing: 5px;
background: #E1E3E0;
border-radius: 20px;
}
th (
font-size: 22px;
font-weight: 300;
padding: 12px 10px;

color: #F56433;
}
tbody tr:nth-child(2) (
border-bottom: 2px solid #F56433;
}
td (
padding: 10px;
color: #8D8173;
}

Розмітка HTML

Стилі CSS

table (
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
text-align: left;
border-collapse: collapse;
border-radius: 20px;
box-shadow: 0 0 0 10px #F2906B;
color: #452F21;
}
th (
padding: 10px 8px;
background: white;
}
table th:first-child (
border-top-left-radius: 20px;
}
table th:last-child (
border-top-right-radius: 20px;
}
td (
border-top: 10px solid #F2906B;
padding: 8px;
background: white;
}
table td:first-child (
border-bottom-left-radius: 20px;
}
table td:last-child (
border-bottom-right-radius: 20px;
}

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

Розмітка HTML

Стилі CSS

table (
border-spacing: 0;
empty-cells: hide;
}
td (
padding: 10px 20px;
text-align: center;

transition: all 0.5s linear;
}
td:first-child (
text-align: left;
color: #3D3511;
font-weight: bold;
}
th (
padding: 10px 20px;
color: #3D3511;
border-bottom: 1px solid #F4EEE8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td:nth-child(even) (
background: #F6D27E;
}
td:nth-child(odd) (
background: #D1C7BF;
}
th:nth-child(even) (
background: #F6D27E;
}
th:nth-child(odd) (
background: #D1C7BF;
}
.round-top (
border-top-left-radius: 5px;
}
.round-bottom (
border-bottom-left-radius: 5px;
}
tr:hover td(
background: #D1C7BF;
font-weight: bold;
}

Розмітка HTML

Стилі CSS

table (
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
border-collapse: collapse;
color: #686461;
}
caption (
padding: 10px;
color: white;
background: #8FD4C1;
font-size: 18px;
text-align: left;
font-weight: bold;
}
th (
border-bottom: 3px solid #B9B29F;
padding: 10px;
text-align: left;
}
td (
padding: 10px;
}
tr:nth-child(odd) (
background: white;
}
tr:nth-child(even) (
background: #E8E6D1;
}

Розмітка HTML

Стилі CSS

Table_col (
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
width: 660px;
background: white;
text-align: left;
border-collapse: collapse;
color: #3E4347;
}
.table_col th:first-child, .table_col td:first-child (
color: #F5F6F6;
border-left: none;
}
.table_col th (
font-weight: normal;
border-bottom: 2px solid #F5E1A6;


padding: 8px 10px;
}
.table_col td (
border-right: 20px solid white;
border-left: 20px solid white;
padding: 12px 10px;
color: #8b8e91;
}

Розмітка HTML

Стилі CSS

Table_blur (
background: #f5ffff;
border-collapse: collapse;
text-align: left;
}
.table_blur th (
border-top: 1px solid #777777;

box-shadow: inset 0 1px 0 #999999, inset 0 -1px 0 #999999;
background: linear-gradient(#9595b6, #5a567f);
color: white;
padding: 10px 15px;
position: relative;
}
.table_blur th:after (
content: "";
display: block;
position: absolute;
left: 0;
top: 25%;
height: 25%;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,.08));
}
.table_blur tr:nth-child(odd) (
background: #ebf3f9;
}
.table_blur th:first-child (
border-left: 1px solid #777777;
border-bottom: 1px solid #777777;
box-shadow: inset 1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur th:last-child (
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
box-shadow: inset -1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur td (
border: 1px solid #e3eef7;
padding: 10px 15px;
position: relative;
transition: all 0.5s ease;
}
.table_blur tbody:hover td (
color: transparent;
text-shadow: 0 0 3px #a09f9d;
}
.table_blur tbody:hover tr:hover td (
color: #444444;
text-shadow: none;
}

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

Ширина таблиці

За замовчуванням ширина таблиці встановлюється браузером самостійно, виходячи з обсягу табличних даних. Якщо тексту в осередках багато, тоді таблиця займатиме всю доступну їй ширину, а якщо мало, ширина таблиці автоматично зменшиться. За наявності на сторінці кількох таблиць їх різна ширина виглядає часом недбало. Так що краще явно встановити ширину таблиці у відсотках, пікселях, em або будь-яких інших одиницях CSS, як показано в прикладі 1.

Приклад 1. Ширина таблиці у відсотках

Table ( width: 100%; ) .tbl-medium ( width: 60%; ) .tbl-small ( width: 200px; )

У цьому прикладі ширина 100% застосовується до всіх таблиць. Знову ж таки, класи допомагають встановити ширину для вибраних таблиць задіявши раніше створений клас. Щоб вказати таблиці ширину 200 пікселів треба додати до елемента

Вирівнювання таблиць

Вихідно будь-яка таблиця розташовується по лівому краю вікна браузера. Можна вирівняти її по центру, якщо тільки таблиця не займає всю доступну область, тобто менше 100%. І тому до стилю таблиці слід додати відступи через властивість margin зі значенням auto , як у прикладі 2.

Приклад 2. Вирівнювання таблиці з допомогою margin

У цьому прикладі для всіх таблиць на сторінці встановлено вирівнювання по центру.

Колір фону

Колір фону одночасно всіх осередків таблиці встановлюється через властивість background, яке застосовується до селектора table. При цьому слід пам'ятати про правила використання стилів, зокрема, успадкування властивостей елементів. Якщо одночасно з table задати колір у селектора td або th то він і буде встановлений як тло (приклад 3).

Приклад 3. Колір тла

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

Мал. 1. Зміна кольору тла

Якщо нам потрібно зробити зебру - так називається чергування рядків різного кольору, слід скористатися псевдокласом :nth-child , додаючи його до селектора tr . Щоб зебра поширювалася тільки на тіло таблиці, а не її заголовок, відокремимо їх один від одного за допомогою елементів і (Приклад 4).

Приклад 4. Створення зебри

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

Мал. 2. Зебра

Значення even у селектора: nth-child застосовує стиль до всіх парних рядків і задає їх колір тла. Можна також змінити його на odd, тоді сірим кольором будуть виділятися непарні рядки.

Аналогічно кольором виділяються не рядки, а колонки, для цього слід використовувати селектор tbody td:nth-child(even) .

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

Полем називається відстань між кордоном осередку та його вмістом. Без полів текст у таблиці «налипає» на рамку, погіршуючи цим його сприйняття, додавання ж полів дозволяє поліпшити читабельність тексту. Для цієї мети застосовується стильова властивість padding, яка працює з селектором td або th, як показано вище в прикладах 3 і 4. Зазвичай вказують одне значення, воно тоді задає порожній простір навколо вмісту осередку відразу з усіх боків. Два значення пишуться, коли треба задати різні поля по вертикалі (перше значення) та горизонталі (друге значення).

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

Між вічками є невелика порожня відстань, яка не видно, поки для осередків не встановити кордон або фоновий колір. Вихідна ця відстань дорівнює 2px і його можна змінити за допомогою властивості border-spacing, додаючи його до селектора table (приклад 5).

Приклад 5. Використання border-spacing

Table ( border-spacing: 3px; /* Відстань між осередків */ ) thead th ( background: #e08156; /* Колір фону заголовка */ color: #333; /* Колір тексту */ ) td, th ( padding: 5px ; /* Поля в осередках */ background: #4c715b; /* Колір фону осередків */ color: #f5e8d0;

Додаючи цей стиль до будь-якої таблиці отримаємо результат, продемонстрований на рис. 3.

Мал. 3. Вид таблиці з відстанню між осередками

Якщо до table додається властивість border-collapse зі значенням collapse, то border-spacing ігнорується, тому що відстані між осередків вже немає.

Межі та рамки

Щоб чітко відокремити вміст одного осередку від іншого, до осередків додаються межі. За їх створення відповідає стильова властивість border, яка застосовується до елементів ( або ). Однак тут нас чатують підводні камені. Оскільки рамка створюється кожної комірки, то місцях зіткнення осередків виходить межа подвоєної товщини. Для усунення зазначеної особливості є кілька шляхів. Найпростіший – скористатися властивістю border-collapse зі значенням collapse. У його завдання входить відстежувати зіткнення ліній і замість подвійного кордону зображувати одинарну. Цю властивість достатньо додати до селектора table, а далі воно все зробить самостійно (приклад 6).

Приклад 6. Застосування властивості border-collapse під час створення рамок таблиці

Різниця між межами таблиці при додаванні властивості border-collapse, а також без нього представлена ​​на рис. 4.

Мал. 4. Вигляд таблиці під час використання border-collapse

На рис. 4а показано рамку таблиці, яка використовується за умовчанням. Зверніть увагу, що всередині таблиці всі лінії мають подвоєну товщину. Додавання border-collapse прибирає цю особливість, і товщина всіх ліній стає однаковою (рис. 4б).

Лінії не обов'язково робити для всіх сторін осередків, згідно з дизайном вони можуть відокремлювати один рядок або стовпчик від іншого. Для цього ми використовуємо властивості border-bottom, border-left та інші. Застосовувати межі до елементів , , і не можна, тому додаємо їх до селектора table та td (приклад 7).

Приклад 7. Лінії між рядками

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

Мал. 5. Таблиця з горизонтальними лініями

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

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

У цьому прикладі вміст вирівнюється по лівому краю, а вміст - по центру. Результат прикладу наведено нижче (рис. 6).

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

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

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

У цьому прикладі вирівнювання тексту відбувається по верхньому краю. Результат прикладу показано на рис. 7.

Мета уроку:Знайомство з властивостями таблиці та принципами табличної верстки CSS

Розглянемо основні CSS властивості таблиці

border

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

• BORDER-STYLE (СТИЛЬ КОРДОНУ)
• BORDER-WIDTH (ШИРИНА КОРДОНИ)
• BORDER-COLOR (КОЛІР КОРДОНУ)

Існує також збірне правило:

table.collapse( border-collapse:collapse; ) table.separate( border-collapse:separate; )

Результат:

width та height
(висота та ширина таблиці)

Значення:

Приклад:

text-align
(Вирівнювання по горизонталі)

Значення:

• center (по центру)
• left (ліворуч)
• right (з правого краю)
• justify (по ширині)

vertical-align
(Вирівнювання по вертикалі)

Значення:

• baseline (по базовій лінії)
• sub (як підіндекс)
• super (як надіндекс)
• top (по верхньому краю)
• middle (посередині)
• bottom (по нижньому краю)
• % (від висоти міжрядкового інтервалу)

Приклад:

padding
(Внутрішні відступи в таблиці)

background-color (заднє тло)
color (колір тексту)

Таблична верстка CSS

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

Але це не зовсім правильно, адже кожному тегу є своє призначення, і таблиці не мали служити для верстки сторінок. Однак відсутність альтернативи спонукала дизайнерів саме на такий метод верстки.

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

Таблична верстка із двох колонок

Одне з найпоширеніших методів верстки — дві колонки, тобто. сторінка поділяється на дві частини.

Приклад:задати основний каркас сторінки з двох колонок: перша — з фіксованим розміром, друга — на область браузера, що залишилася. Виконати завдання за допомогою CSS стилів ()

Результат:

Приклад:поставити різне тлоосередків (щоб розділити дві колонки один від одного) та встановити відстань між колонками (розділювач)

/* для лівої комірки */ td#left( width:200px; background: #ccc; border:1px solid black; /* тимчасово позначимо межі */ ) /* для правої комірки */ td#right( background: #fc3; border:1px solid black; /* тимчасово позначимо межі */ ) /* для роздільника */ #razdel( width: 10px; /* Відстань між колонками */

Всі разом:

Для роздільника було додано новий осередок.
Результат:

Приклад:зробити роздільник між колонками таблиці, використовуючи пунктирну лінію кордону суміжних осередків

/* для лівої комірки */ td#left( width:200px; background: #ccc; /* Колір фону лівої колонки */ /* нове */ border-right: 1px dashed #000; /* Параметри правого пунктирного кордону */ )

Всі разом:

Результат:

Таблична верстка із трьох колонок

Існує поняття фіксованого або гумового макета верстки.

Фіксований макет CSS

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

Приклад:створити шаблон сторінки із трьох колонок. Використовувати фіксований макет табличної верстки:

• ліва колонка - 150 пікселів;
• середня колонка - 400 пікселів;

Результат:

Гумовий макет

• Ширина таблиціпри використанні «гумового» дизайну встановлюється у % від ширини вікна браузера. Т.о. при зміні вікна браузера змінюються і розміри таблиці.
• Ширина всіх осередківможе встановлюватися в процентах.
• Другий варіант, коли ширина деяких осередківвстановлюється в процентах, а деяких - у пікселях.

Важливо:Сума ширини всіх колонок повинна вийти 100% незалежно від ширини таблиці.

Приклад:

• ліва колонка - 20%;
• середня колонка - 40%;
• права колонка - 40%;

Встановити фон для колонок та візуально розділити колонки кордоном.

Виконання:

Результат:

Розглянемо другий варіант, коли ширина центральної колонки автоматично підбирається браузером; прикладом може бути малюнок:

Приклад:створити шаблон сторінки із трьох колонок. Використовувати гумовий макет табличної верстки:

• ліва колонка - 150 пікселів;
• середня колонка - 40%;
• права колонка - 200 пікселів;

Встановити фон для колонок та візуально розділити колонки кордоном.

Результат:
Результат буде приблизно такий самий, тільки розтягування буде відбувається за рахунок центральної колонки.

Використання вкладеної таблиці у гумовому макеті

Якщо ширина двох колонок встановлюється у відсотках, а третьої - у пікселях, обійтися однією таблицею не вийде. Так, якщо ширина всієї таблиці дорівнює 100 відсотків, першої колонки - 200 пікселів, а колонок, що залишилися, по 20 відсотків, то просте обчислення показує, що розмір першої колонки виходить рівним 60 відсотків. У такому разі задане значення в пікселях браузером не сприйметься, а розмір буде встановлений у відсотках.

• Вихідна таблиця створюється із двома осередками. Ширина таблиці задається у відсотках.
• Для лівого осередку(першої колонки) встановлюється ширина у пікселях.
• Ширина правого осередку(основа для інших колонок) не вказується. Всередину цього осередку вставляється друга таблиця, що теж складається з двох осередків.
• У осередків вкладеної таблиці ширина встановлюється у відсотках.
• Ширина внутрішньої таблиці має бути встановлена ​​в 100 відсотківщоб ця таблиця займала весь вільний простір у зовнішній таблиці.
• Ширина центральної та правої колонки обчислюється щодо ширини комірки, а не зовнішньої таблиці загалом.

Приклад:створити шаблон сторінки із трьох колонок. Використовувати гумовий макет із вкладеною таблицею:

• ліва колонка - 150 пікселів;
• середня колонка - 60%;
• права колонка - 40%;

Встановити фон для колонок.

Виконання:

1 2 3 Атрибути тегів cellpadding і cellspacing тут необхідні, щоб не було «зазору» між таблицями. Результат: Мета уроку:Знайомство з властивостями таблиці та принципами табличної верстки CSS Розглянемо основні CSS властивості таблиці border Властивість розглядається в одному і включає одночасно декілька властивостей: BORDER-STYLE (СТИЛЬ КОРДОНУ) BORDER-WIDTH (ШИРИНА КОРДОНИ) BORDER-COLOR (КОЛІР КОРДОНУ) Існує також збірне правило: table.collapse( border-collapse:collapse; ) table.separate( border-collapse:separate; ) Результат: width та height (висота та ширина таблиці) Значення: Приклад: text-align (Вирівнювання по горизонталі) Значення: center (по центру) left (ліворуч) right (з правого краю) justify (по ширині) vertical-align (Вирівнювання по вертикалі) Значення: baseline (по базовій лінії) sub (як підіндекс) super (як надіндекс) top (по верхньому краю) middle (посередині) bottom (по нижньому краю) % (від висоти міжрядкового інтервалу) Приклад: padding (Внутрішні відступи в таблиці) background-color (заднє тло) color (колір тексту) Таблична верстка CSS Завдяки великій кількості властивостей таблиць та варіаціям їх оформлення, таблиці довгий час були деяким станартом верстки веб-сторінок. Якщо зробити межі таблиці невидимими, можна використовувати її окремі осередки як окремих блоків сраницы: шапка, меню, підвал тощо. Але це не зовсім правильно, адже кожному тегу є своє призначення, і таблиці не мали служити для верстки сторінок. Однак відсутність альтернативи спонукала дизайнерів саме на такий метод верстки. Зараз є інший спосіб - використання шарів, які поступово замінили таблиці у цьому виді роботи з веб-сторінкою. Однак і в наш час деякі дизайнери успішно використовують табличну верстку. Таблична верстка із двох колонок Одне з найпоширеніших методів верстки — дві колонки, тобто. сторінка поділяється на дві частини. Зазвичай ліва частина – меню та додаткові елементи, а права частина – основна, для головного контенту. У разі ширина лівої частини задається певним значенням, тобто. жорстко, а права частина займає область сторінки, що залишилася. У такому разі необхідно задати загальну ширину всієї таблиці (тега table) у відсотках через властивість width (100%), а для першої комірки (тега td) встановити ширину (також властивість width) у пікселах або відсотках. Приклад:задати основний каркас сторінки з двох колонок: перша — з фіксованим розміром, друга — на область браузера, що залишилася. Виконати завдання за допомогою CSS стилів () Виконання: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</td> <td id = "right" > 2</td> </ tr > </ table > ... 1 2 ... Результат: Тепер спробуємо візуально відокремити дві колонки таблиці одна від одної. Приклад:встановити різний фон осередків (щоб розділити дві колонки один від одного) і встановити відстань між колонками (розділювач) Виконання: Додамо нові властивості стилів: /* для лівої комірки */ td#left( width:200px; background: #ccc; border:1px solid black; /* тимчасово позначимо межі */ ) /* для правої комірки */ td#right( background: #fc3; border:1px solid black; /* тимчасово позначимо межі */ ) /* для роздільника */ #razdel( width: 10px; /* Відстань між колонками */ Всі разом: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</td> <td id = "razdel" > <td id = "right" > 2</td> </ tr > </ table > 1 2 Для роздільника було додано новий осередок. Результат: Розділювач між колонками можна також зробити менш, що виділяється. Для цього скористаємось стилями кордонів. Приклад:зробити роздільник між колонками таблиці, використовуючи пунктирну лінію кордону суміжних осередків Виконання: Додамо нові властивості меж для осередків: /* для лівої комірки */ td#left( width:200px; background: #ccc; /* Колір фону лівої колонки */ /* нове */ border-right: 1px dashed #000; /* Параметри правого пунктирного кордону */ ) Всі разом: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</td> <td id = "right" > 2</td> </ tr > </ table > 1 2 Результат: Таблична верстка із трьох колонок Існує поняття фіксованого або гумового макета верстки. Фіксований макет CSS При використанні фіксованого макета ширина всієї таблиці задається у пікселях, і тоді, незалежно від дозволу монітора та вікна браузера, таблиця завжди матиме однакову ширину. В такому випадку ширину інших колонок варто також зробити фіксованою. Можна не вказати ширину одного осередку, тоді вона буде обчислена автоматично, виходячи з розмірів інших осередків та всієї таблиці. Приклад:створити шаблон сторінки із трьох колонок. Використовувати фіксований макет табличної верстки: ліва колонка - 150 пікселів; середня колонка - 400 пікселів; Виконання: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</td> <td id = "central" > 2</td> <td id = "right" > 3</td> </ tr > </ table > 1 2 3 Результат: Гумовий макет Ширина таблиціпри використанні «гумового» дизайну встановлюється у % від ширини вікна браузера. Т.о. при зміні вікна браузера змінюються і розміри таблиці. Ширина всіх осередківможе встановлюватися в процентах. Другий варіант, коли ширина деяких осередківвстановлюється в процентах, а деяких - у пікселях. Важливо:Сума ширини всіх колонок повинна вийти 100% незалежно від ширини таблиці. Приклад: ліва колонка - 20%; середня колонка - 40%; права колонка - 40%; Встановити фон для колонок та візуально розділити колонки кордоном. Виконання: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</td> <td id = "central" > 2</td> <td id = "right" > 3</td> </ tr > </ table > 1 2 3 Результат: Розглянемо другий варіант, коли ширина центральної колонки автоматично підбирається браузером; прикладом може бути малюнок: Приклад:створити шаблон сторінки із трьох колонок. Використовувати гумовий макет табличної верстки: ліва колонка - 150 пікселів; середня колонка - 40%; права колонка - 200 пікселів; Встановити фон для колонок та візуально розділити колонки кордоном. Виконання: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</td> <td id = "central" > 2</td> <td id = "right" > 3</td> </ tr > </ table > 1 2 3 Результат: Результат буде приблизно такий самий, тільки розтягування буде відбувається за рахунок центральної колонки. Використання вкладеної таблиці у гумовому макеті Якщо ширина двох колонок встановлюється у відсотках, а третьої - у пікселях, обійтися однією таблицею не вийде. Так, якщо ширина всієї таблиці дорівнює 100 відсотків, першої колонки - 200 пікселів, а колонок, що залишилися, по 20 відсотків, то просте обчислення показує, що розмір першої колонки виходить рівним 60 відсотків. У такому разі задане значення в пікселях браузером не сприйметься, а розмір буде встановлений у відсотках. Вихідна таблиця створюється із двома осередками. Ширина таблиці задається у відсотках. Для лівого осередку(першої колонки) встановлюється ширина у пікселях. Ширина правого осередку(основа для інших колонок) не вказується. Всередину цього осередку вставляється друга таблиця, що теж складається з двох осередків. У осередків вкладеної таблиці ширина встановлюється у відсотках. Ширина внутрішньої таблиці має бути встановлена ​​в 100 відсотківщоб ця таблиця займала весь вільний простір у зовнішній таблиці. Ширина центральної та правої колонки обчислюється щодо ширини комірки, а не зовнішньої таблиці загалом. Приклад:створити шаблон сторінки із трьох колонок. Використовувати гумовий макет із вкладеною таблицею: ліва колонка - 150 пікселів; середня колонка - 60%; права колонка - 40%; Встановити фон для колонок. Виконання: 1 2 3 Атрибути тегів cellpadding і cellspacing тут необхідні, щоб не було «зазору» між таблицями. Результат: У цій статті ви побачите, як за допомогою стилів CSSформатувати таблиці. На зорі інтернету дизайнера дуже часто використовували таблиці для створення розмітки. Зараз практично всі сайти розмічаються при допомоги CSS, А таблиці використовують за їх прямим призначенням – для відображення даних. Теги для компонування таблиць Таблицю можна зробити за допомогою наступних тегів: Таблицю можна зробити за допомогою наступних тегів: Визначає заголовок (скоріше підпис) таблиці. Визначає один стовпець у таблиці. Визначає групу стовпців у таблиці. Створює таблицю. Визначає один або кілька рядків у таблиці. Створює одну комірку у таблиці. Визначає рядки, що відображаються внизу таблиці. Визначає заголовок кожного стовпця таблиці. Призначений для зберігання одного або кількох рядків, які представлені зверху таблиці. Створює рядок у таблиці. Як ви бачите, у таблицях можна використовувати велику кількість тегів, тим більше стилів CSS ми можемо використовувати у кожному конкретному випадку. Нижче будуть розглянуті властивості CSS, які застосовуються для форматування таблиць. Межі Осередки не успадковують межі, описані в тегу table . Кордони осередків таблиці можна описати за допомогою властивості border, проте в цьому випадку утворюється проміжок. Th, td (border:2px solid black;) Цей проміжок можна видалити за допомогою властивості CSS border-spacing (для IE знадобиться атрибут cellspacing тега table). Однак, якщо ви вилучаєте проміжок, межі подвоїться. Table (border-spacing:0;) Щоб позбутися подвоєних меж та проміжків, використовуйте властивість border-collapse зі значенням collapse . Table (border-collapse:collapse;) Відступи Відступи (у HTML атрибут cellpadding) визначаються за допомогою властивості padding. Можна застосовувати тільки до осередків ( ) або до осередків під заголовки ( ) . Th, td (padding:10px 12px 13px 14px;) Вирівнювання Властивість text-align Властивості text-align (в HTML атрибут align) і vertical-align вирівнюють вміст усередині комірки таблиці. Властивість text-align (значення: left, right, center, justify) вирівнює вміст по горизонталі. Область застосування: , , . Th, td, table (text-align: center;) Властивість vertical-align Властивість vertical-align (значення: top, baseline, bottom, middle) вирівнює вміст по вертикалі. Область застосування: th, td. Th, td (vertical-align: bottom;) Форматуємо стовпці До тегів col і colgroup можна застосовувати властивості width і властивості групи background. Це зручно, якщо у вас виникне бажання виділити стовпець або задати йому певну ширину. Клас та ідентифікатори Щоб форматувати конкретну комірку або таблицю, не забувайте про класи, ідентифікатори тощо. Розповісти друзям Twitter Samsung Game... Зник робочий стіл Android або не працює лаунчер! Наступна стаття Xperia Companion – новий додаток на Windows PC для оновлення та відновлення Xperia Читайте також Найкращі музичні плеєри на андроїд 2024-03-13 00:03:49 Що таке хаб, свитч та роутер? 2024-03-12 00:04:38 Json розшифровка абревіатури 2024-03-11 00:04:21 Галерея зображень на jQuery з цікавим ефектом 2024-03-09 00:04:15