Створення таблиць в HTML - фон таблиці - рамка таблиці

Створення таблиць в HTML - фон таблиці - рамка таблиці - об'єднання осередків - 4.7 out of 5 based on 6 votes

При створенні веб сторінок дуже часто необхідно представити деякий вміст сторінки у вигляді таблиць.

Іноді таблиці використовують для створення структури сторінки. Цей підхід не зовсім вірний, тому що таблиці спочатку не призначалися для позиціонування елементів сторінки.

Для цієї мети найкраще користуватися засобами CSS. Але в деяких випадках таблиці є незамінними і зручними для надання інформації.

Матеріали по темі:

За створення таблиць в HTML відповідає тег <table> і закриває тег </ table>. Але вам напевно вже відомо, що таблиці складаються з рядків і осередків. Тому для того, щоб створити таблицю, нам необхідні ще два тега: це тег <tr> </ tr> який відповідає за створення рядків, і тег, <td> </ td> відповідає за створення осередків.

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

<Table> <tr> <td> 1 - осередок </ td> <td> 2 - осередок </ td> </ tr> <tr> <td> 3 - осередок </ td> <td> 4 - осередок < / td> </ tr> </ table>

Для того щоб, побачити що з цього вийде, створіть html сторінку використовуючи код розташований нижче. Якщо не знаєте як створити HTML сторінку, дивіться урок основи HTML .

<Html> <head> <title> Таблиця </ title> <table> <tr> <td> 1 - осередок </ td> <td> 2 - осередок </ td> </ tr> <tr> <td> 3 - осередок </ td> <td> 4 - осередок </ td> </ tr> </ table> </ head> </ html>

У вас повинно вийти наступне:

Як ви бачите, наша таблиця ще зовсім не схожа на таблицю. Все це тому, що наші теги <table> </ table> і <td> </ td> мають безліч атрибутів, які необхідно вказати, щоб у нашій таблиці з'явилася рамка, фон, розміри і т. Д.

Спочатку ми розглянемо атрибути, які притаманні тегам <table> </ table>. Для того, щоб бачити як буде змінюватися наша таблиця, ви можете додавати ці атрибути до тегам <table> </ table> і, оновлюючи сторінку, дивитися як буде виглядати таблиця в браузері. Для зручності я не буду приводити весь код сторінки, а тільки код стосується тега <table> т. Е. Те що ми будемо змінювати.

І так тег <table> має наступні атрибути:

border - задає ширину рамки таблиці в пікселях, записується так: <table border = "2"> </ table>.

bordercolor - колір рамки таблиці, даний атрибут може не підтримувати деякі браузери, тому ви можете і не побачити заданий колір рамки: <table border = "2" bordercolor = "# 548DD4"> </ table>

Ми задали ширину рамки 2 пікселя, синього кольору, таблиця прийме наступний вигляд:

width - задає ширину таблиці в пікселях або відсотках:

height - висота таблиці в пікселях або відсотках: <table border = "2" bordercolor = "# 548DD4" width = "250" height = "150"> </ table>

Ширина таблиці буде 250 пікселів, а висота 150 пікселів, таблиця буде виглядати так:

align - вирівнювання таблиці;

align = left - таблиці буде вирівняна по лівому краю;

align = right - таблиця буде вирівняна по правому краю:

Наша таблиця повинна вирівнятися по правому краю.

bgcolor - колір фону таблиці, bgcolor = # FFC000 - колір фону таблиці буде жовтий:

Таблиця отримає наступний вигляд:

background - за допомогою даного атрибута можна задати зображення, яке буде фоном таблиці.

Як приклад збережіть маленьке зображення, яке ви бачите в дужках ( ) В ту папку, де у вас знаходиться сторінка з таблицею, а до тегу <table> додайте background = "fon.gif" весь код:

Таблиця прийме наступний вигляд:

сellpadding - атрибут, що задає лівий, правий, верхній і нижній відступи всередині осередку. Наприклад, якщо до нашого тегу <table> додати сellpadding = 10, то текст, написаний всередині осередків, отримає відступ.

cellspacing - задає відступ між осередками таблиці.

Якщо ви придивитеся до нашої таблиці, то побачите, що між рамками осередків є невеликий простір, це і є відступ між осередками, він задається за замовчуванням. Для того, щоб його прибрати, досить в тезі <table> прописати cellspacing = 0. Весь код:

В результаті наші осередки притулилися одне до одного, а текст всередині осередків отримав відступ:

hspace - задає проміжок від таблиці в ліво і в право в пікселях, записується так: hspace = 20

nowrap - забороняє перенос слів в комірці, записується просто nowrap

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

Тепер розглянемо атрибути тега <td>, деякі з них такі ж, як і атрибути тега <table>

width - ширина комірки в пікселях або у відсотках.

height - висота комірки в пікселях або відсотках.

Наприклад, задамо ширину першого осередку першого рядка в 30% - width = 30%, а висоту першого осередку другого рядка в 100px. Код буде таким:

Наша таблиця прийме наступний вигляд:

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

align - вирівнює вміст комірок, має таке значення:

align = "lef" - вміст комірки буде вирівняно по лівому краю;

align = "right" - вміст буде вирівняно по правому краю;

align = "center" - вміст буде вирівняно по центру осередки.

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

<Table border = "2" bordercolor = "# 548DD4" width = "250" height = "150" align = "right" bgcolor = "# FFC000" background = "fon.gif" cellspacing = "0" сellpadding = "10 "> <tr> <td width =" 30% "align =" lef "> 1 - осередок </ td> <td align =" right "> 2 - осередок </ td> </ tr> <tr> <td height = "100px"> 3 - осередок </ td> <td align = "center"> 4 - осередок </ td> </ tr> </ table>

bgcolor - за допомогою даного атрибута можна задати колір осередки.

background - встановлює зображення у вигляді фону комірки.

З даними атрибутами ми вже зустрічалися, розглядаючи атрибути тега <table>. Працюють вони однаково, тільки в цьому випадку ними задається фон комірки. Наприклад, задамо колір фону 2-й осередки жовтим, а в якості фону 4-й осередку встановимо наступне зображення ( З даними атрибутами ми вже зустрічалися, розглядаючи атрибути тега <table> ).

Для цього в наш код додамо необхідні атрибути, для наших осередків bgcolor = "# FFFF00" для 2-го осередки і background = "fon.jpg" для 4-го осередки. В результаті наша таблиця стане виглядати так:

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

bordercolor - задає колір рамки осередку.

C цим атрибутом ми так само зустрічалися, розглядаючи атрибути тега <table>. Нагадую, що він працює не у всіх браузерах. Зверніть увагу на те, що у тега <td> немає атрибута border позначає рамку комірки. Задамо колір рамки 2 - го осередки червоним для цього до другої осередку додамо атрибут bordercolor = "# FF0000"

Існує ще один атрибут, призначений для вирівнювання вмісту осередків:

valign - він виробляє вирівнювання комірки по вертикалі.

Має наступні значення:

valign = "top" - вирівнювання вмісту комірки по верхньому краю;

valign = "bottom" - вирівнювання вмісту комірки по нижньому краю;

valign = "middle" - вирівнювання посередині комірки;

valign = "baseline" - вирівнювання вмісту комірки по базовій лінії.

Додамо ці атрибути до кожної з наших 4-х осередків.

<Table border = "2" bordercolor = "# 548DD4" width = "250" height = "150" align = "right" bgcolor = "# FFC000" background = "fon.gif" cellspacing = "0" сellpadding = "10 "> <tr> <td width =" 30% "align =" lef "valign =" top "> 1 - осередок </ td> <td align =" right "bgcolor =" # FFFF00 "bordercolor =" # FF0000 " valign = "bottom"> 2 - осередок </ td> </ tr> <tr> <td height = "100" valign = "middle"> 3 - осередок </ td> <td align = "center" background = " fon.jpg "valign =" baseline "> 4 - осередок </ td> </ tr> </ table>

Наша таблиця прийме наступний вигляд:

Останнє що нам необхідно розглянути в цьому уроці, це об'єднання елементів таблиці. Для того щоб об'єднати кілька осередків в рядку, існує атрибут colspan = "" де в лапках вказується кількість осередків яке необхідно об'єднати.

Щоб об'єднати комірки по вертикалі т. Е. В стовпці, необхідно використовувати атрибут rowspan = "" де в лапках вказується кількість осередків, яке необхідно об'єднати.

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

<Table border = "1" cellspacing = "0" сellpadding = "0"> <tr> <td> 1 - осередок </ td> <td> 2 - осередок </ td> <td> 3 - осередок </ td > </ tr> <tr> <td> 4 - осередок </ td> <td> 5 - осередок </ td> <td> 6 - осередок </ td> </ tr> <tr> <td> 7 - осередок </ td> <td> 8 - осередок </ td> <td> 9 - осередок </ td> </ tr> </ table>

<Table border = 1 cellspacing = 0 сellpadding = 0> <tr> <td> 1 - осередок </ td> <td> 2 - осередок </ td> <td> 3 - осередок </ td > </ tr> <tr> <td> 4 - осередок </ td> <td> 5 - осередок </ td> <td> 6 - осередок </ td> </ tr> <tr> <td> 7 - осередок </ td> <td> 8 - осередок </ td> <td> 9 - осередок </ td> </ tr> </ table>

Тепер об'єднаємо 1-ю та 2-ю осередок в рядку і 3-ю, 6-ю і 7-ю осередок в ряду. Код нашої таблиці буде наступний:

<Table border = "1" cellspacing = "0" сellpadding = "0"> <tr> <td colspan = "2"> 1 і 2 - осередки об'єднані </ td> <td rowspan = "3"> 3-6 -9 - осередки об'єднані </ td> </ tr> <tr> <td> 4 - осередок </ td> <td> 5 - осередок </ td> </ tr> <tr> <td> 7 - осередок < / td> <td> 8 - осередок </ td> </ tr> </ table>

Зверніть увагу, що теги того осередку, яка об'єднується, не заносяться. Наша таблиця буде мати такий вигляд:

Наша таблиця буде мати такий вигляд:

Це були останні атрибути осередків. Як ви можете бачити атрибутів у тегів <table> і <td> безліч. Це дозволяє розміщувати в таблицях різний вміст, позиціонуючи його і оформляючи необхідним чином.

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

Матеріал підготовлений проектом: webmastermix.ru

Пропонуємо Вам ознайомитися:

подробиці

Оновлено: 04 Вересень 2013

Створено 01 Лютий 2010

IRC-сервер - Irc.Online.com.ua

Створення таблиць в HTML - фон таблиці - рамка таблиці - об'єднання осередків