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 - лінія відображається між групами, які утворюються тегами

Атрибути і властивості

1. Властивість align \u003d "параметр" - задає вирівнювання окремої комірки таблиці. Може приймати наступні значення:

• left - вирівнювання по лівому краю
• center - вирівнювання по центру
• right - вирівнювання по правому краю

2. Властивість background \u003d "URL" - задає фонове зображення осередки. Замість URL повинен бути написана адреса фонового зображення.

3. Властивість bgcolor \u003d "колір" - задає колір фону комірки.

4. Властивість bordercolor \u003d "колір" - задає колір рамки осередку.

5. Властивість char \u003d "буква" - задає букву, від якої потрібно зробити вирівнювання. Значення атрибута align має бути встановлено як char.

6. Властивість colspan \u003d "число" - задає число поєднуваних горизонтальних осередків.

7. Властивість height \u003d "число" - задає висоту таблиці: або в пікселях, або у відсотках%.

8. Властивість width \u003d "число" - задає ширину таблиці: або в пікселях, або у відсотках%.

9. Властивість rowspan \u003d "число" - задає число поєднуваних вертикальних осередків.

10. Властивість valign \u003d "параметр" - вирівнювання вмісту комірки по вертикалі.

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

для тега

Як зробити, щоб кордони осередків в таблиці не склеювалися

У разі використання border (межа осередків) і нульових відступів між осередками, вони все одно склеюються і виходить подвоєний border. Щоб це уникнути потрібно прописати в стилях таблиці border-collapse: collapse:

...

Шановний читач, тепер Ви дізналися набагато більше про html тезі table. Тепер раджу перейти до наступного уроку.

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

Для створення таблиці в HTML-документі використовується тег

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

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

, Кожен рядок, в свою чергу, складається з осередків. тег може містити в собі тільки теги для створення осередків.

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

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

Ну а всередині

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

дозволяє створювати заголовки таблиці. За замовчуванням заголовки центруються і розміщуються або над (<САРТION АLIGN=top>), Або під таблицею (<САРТION ALIGN=bottom>). Тема може складатися з будь-якого тексту і зображень. Текст буде розбитий на рядки, що відповідають ширині таблиці. іноді тег<САРТION> використовується для підпису під малюнком. Для цього досить описати таблицю без кордонів.

Тема над таблицею

Текст або дані

Текст або дані

Текст або дані

Текст або дані

Тема під таблицею

Текст або дані

Текст або дані

Текст або дані

Атрибут NOWRAP

Зазвичай будь-який текст, що не міститься в один рядок осередку таблиці, переходить на наступний рядок. Однак при використанні атрибута NOWRAP з тегами<ТН> або<ТD> довжина осередку розширюється настільки, щоб укладений в ній текст помістився в один рядок.

Атрибут СОLSPAN

Теги<ТD> і<ТН> модифікуються за допомогою атрибута СОLSPAN (Column Span, з'єднання стовпців). Якщо ви хочете зробити якусь осередок ширше, ніж верхня або нижня, можна скористатися атрибутом СОLSPAN, щоб розтягнути її над будь-якою кількістю звичайних осередків.

Якщо ви хочете зробити якусь осередок ширше, ніж верхня або нижня,	можна скористатися атрибутом СОLSPAN \u003d 2,
щоб розтягнути її над будь-якою кількістю звичайних осередків.

Атрибут ROWSPAN

Атрибут ROWSPAN, який використовується в тегах<ТD> і<ТН>, Подібний до атрибуту СОLSPAN \u003d, тільки він задає число рядків, на які розтягується осередок. Якщо ви вказали в атрибуті ROWSPAN \u003d s число, більше одиниці, то відповідну кількість рядків має перебувати під розтягується осередком. Внизу таблиці її помістити не можна.

Атрибут WIDТН

Атрибут WIDТН застосовується в двох випадках. Можна помістити його в тег<ТАВLЕ>, Щоб дати ширину всієї таблиці, а можна використовувати в тегах<ТD> або<ТН>, Щоб задати ширину осередку або групи осередків. Ширину можна вказувати в пікселях або у відсотках. Наприклад, якщо ви задали в тезі<ТАВLЕ> WIDTH \u003d 250, ви отримаєте таблицю шириною 250 пікселів незалежно від розміру сторінки на моніторі. При завданні WIDТН \u003d 50% в тезі<ТАВLЕ> таблиця буде займати половину ширини сторінки при будь-якому розмірі зображення на екрані. Так що, вказуючи ширину таблиці у відсотках, майте на увазі, що якщо у користувача вузька область перегляду, ваша сторінка може виглядати дещо дивно. Якщо ви користуєтеся пікселями, і таблиця виявляється ширше області перегляду, внизу з'явиться смуга прокрутки для переміщення вправо і вліво по сторінці. Залежно від поставлених завдань і той, і інший спосіб завдання ширини таблиці може виявитися корисним.

Текст або дані - ширина 100%

або

Текст або дані - ширина 50%

або

Текст або дані - ширина 200 пікселів

або

Текст або дані - ширина 100 пікселів

Застосування порожніх клітинок

Якщо осередок не містить даних, вона не матиме меж. Якщо потрібно, щоб у осередку були кордону, але не було вмісту, необхідно помістити в неї щось, що не буде видно при перегляді. Можна скористатися символом нового рядка<ВR>. Можна навіть поставити порожні стовпці, визначивши їх ширину в пікселах або відносних одиницях і не ввівши в отримані осередки ніяких даних. Цей засіб може виявитися корисним при розміщенні на сторінці тексту і графіки.

Атрибут СЕLLРАDDING

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

Текст або дані	Текст або дані	Текст або дані
Текст або дані	Текст або дані	Текст або дані

Текст або дані	Текст або дані	Текст або дані
Текст або дані	Текст або дані	Текст або дані

Атрибути АLIGN і VALIGN

Теги<ТR>, <ТD> і<ТН> можна модифікувати за допомогою атрибутів ALIGN і VALIGN. Атрибут АLIGN визначає вирівнювання тексту і графіки по горизонталі, тобто по лівому або правому краю, або по центру. Горизонтальне вирівнювання може бути задано декількома способами:

ALIGN \u003d blееdleft притискає вміст комірки впритул до лівого краю.

ALIGN \u003d left вирівнює вміст комірки по лівому краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.

АLIGN \u003d сеnter має вміст комірки по центру.

АLIGN \u003d right вирівнює вміст комірки по правому краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.

Текст або дані	Текст або дані	Текст або дані
Текст або дані	Текст або дані	Текст або дані
Текст або дані	Текст або дані	Текст або дані
Текст або дані	Текст або дані	Текст або дані
Текст або дані	Текст або дані	Текст або дані

Атрибут VALIGN здійснює вирівнювання тексту і графіки усередині осередку по вертикалі. Вертикальне вирівнювання може бути задано декількома способами:

VALIGN \u003d top вирівнює вміст комірки по її верхній межі.

VALIGN \u003d middle центрує вміст комірки по вертикалі.

VALIGN \u003d bottom вирівнює вміст комірки по її нижній межі.

Атрибут VALIGN здійснює вирівнювання тексту і графіки усередині осередку по вертикалі.	верх,	середина,	низ.
VALIGN \u003d top Вирівнює вміст осередку по її верхній межі.	верх,	верх,	верх.
VALIGN \u003d middle Центрує вміст комірки по вертикалі.	середина,	середина,	середина.
VALIGN \u003d bottom Вирівнює вміст осередку по її нижній межі.	низ,	низ,	низ.

Атрибут BORDER

У тезі<ТАВLЕ> часто визначають, як будуть виглядати рамки, тобто лінії, що оточують осередки таблиці і саму таблицю. Якщо ви не поставите рамку, то отримаєте таблицю без ліній, але простір під них буде відведено. Того ж результату можна домогтися, задавши<ТАВLЕ ВОRDER=0>. Іноді хочеться зробити кордон товстіший, щоб вона краще виділялася. Можна для залучення уваги до малюнка або тексту задати виключно жирні кордону. При створенні вкладених таблиць доводиться робити для різних таблиць кордону різної товщини, щоб їх легше було розрізняти.

Атрибут CELLSPACING

Атрибут СЕLLSPACING визначає ширину проміжків між осередками в пікселах. Якщо цей атрибут не вказаний, за замовчуванням задається величина, рівна двом пикселам. За допомогою атрибута СЕLLSPACING \u003d можна розміщувати текст і графіку там, де вам потрібно. Якщо ви хочете залишити порожнє місце, можна вписати в осередок пробіл.

Текст або дані	Текст або дані	Текст або дані
Текст або дані	Текст або дані	Текст або дані

Текст або дані	Текст або дані	Текст або дані
Текст або дані	Текст або дані	Текст або дані

Текст або дані	Текст або дані	Текст або дані
Текст або дані		Текст або дані

Атрибут BGCOLOR

Даний атрибут дозволяє встановити колір фону. Залежно від того, з яким тегом (TABLE, TR, TD) він застосовується, колір фону може бути встановлений для всієї таблиці, для рядка чи для окремої комірки. Значенням даного атрибута є RGB-код або стандартну назву кольору.

Текст або дані	Текст або дані	Текст або дані
Текст або дані	Текст або дані	Текст або дані

Атрибут BACKGROUND

Даний атрибут задає фонове зображення для таблиць. Застосуємо до тегам TABLE і TD. Його значенням є URL файлу з фоновим зображенням. Застосування цього атрибута розглядається нижче.

Використання таблиць в дизайні сторінки

Таблиці хороші тим, що при бажанні можна зробити їх межі невидимими. Це дозволяє за допомогою тега<ТАВLЕ> красиво розміщувати на сторінці текст і графіку. поки тег<ТАВLЕ> залишається єдиним потужним засобом форматування в HTML. Дизайнери Web-сторінок зараз мають практично той же свободою щодо використання "порожнього простору", що і творці друкованих сторінок. Таблиці найкраще допомагають відійти від ієрархічного розміщення тексту на Web-сторінках.

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

Уральський державний педагогічний університет Ласкаво просимо! Навчальний курс "Основи WEB-мастерингу"

Створення різнобарвних таблиць

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

Кольорові кордону в Netscape Navigator. Ви не тільки можете оточити таблицю красивою рамкою, але ще і задати для неї колір, відмінний від кольорів тексту та фону. Створіть простий сірий GIF (або будь-який GIF, який ви хотіли б мати в якості фону) і визначте його в тезі<ВODY> як фон сторінки. Потім задайте колір фону сторінки. В результаті ваш тег<ВОDY> буде виглядати приблизно так:

Ви створили подвійний фон - GIF і заданий колір. В результаті фоновий колір буде видно на всіх кордонах таблиць і горизонтальних лініях (<НR>). Незалежно від того, є ваш фоновий GIF сірим чи ні, кольорові лінії і кордону таблиць будуть помітно виділятися. Якщо фоновий GIF влаштований не дуже складно, час завантаження сторінки зросте лише трохи.

Доброго всім часу доби, мої дорогі друзі. Як літо проходить? Я сподіваюся, що у всіх все добре. Ну а сьогодні ми продовжимо вивчати основи html і сьогодні буде напевно останній урок на цю тему, тому що далі ми зануримося вже в CSS. Так ось, говорячи про html, я не можу не розповісти про таблиці, так як вони теж є досить значущою темою.

Взяти хоча б той же вордпресс. За замовчуванням в цьому движку можна створити таблицю. Потрібен або спеціальне доповнення (плагін), або спеціальний програмний код (скрипт). Але можна просто зробити те, що ми хочемо за допомогою простих тегів. Загалом сьогодні я вам розповім як створити таблицю в html, так як це дійсно може дуже вас виручити.

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

Що ще добре, так це те, що вам навіть не доведеться нічого креслити. Все робиться в звичайному блокноті (ну або іншому, типу Notepad ++), причому досить легко. Загалом давайте налаштовуватися на роботу.

Теги

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

Будь-яка таблиця завжди полягає в парний тег

. Тобто ці знаки дають команду, що тут буде розташовуватися таблиця.

Усередині table ставиться парний тег

, Він створює звичайні комірки з даними. За замовчуванням, вміст тегів	вирівнюється по лівому краю. Другий тег для створення осередків - це тег	, Він дозволяє визначати осередки, які містять заголовки для стовпців або рядків, вміст таких осередків відображається жирним текстом і вирівнюється по центру. Теги	і	можуть включати в себе будь-які HTML-елементи, які доступні для використання в тілі документа. перший заголовок другий заголовок рядок 1, осередок 1 рядок 1, осередок 2 рядок 2, осередок 1 рядок 2, осередок 2 спробувати зараз » Таблиця всередині таблиці У HTML є можливість створення вкладених таблиць, тобто таких таблиць, які розташовані всередині інших таблиць. Щоб зробити вкладену таблицю треба код таблиці, яку потрібно зробити вкладеної, помістити всередину будь-якого тега	. Для прикладу, візьмемо вже створену раніше нами таблицю і помістимо цей код в другий осередок другого рядка: перший заголовок другий заголовок рядок 1, осередок 1 рядок 1, осередок 2 рядок 2, осередок 1 рядок 2, осередок 2 перший заголовок другий заголовок рядок 1, осередок 1 рядок 1, осередок 2 рядок 2, осередок 1 рядок 2, осередок 2 У цій лекції докладно розглядаються принципи застосування таблиць в HTML-розмітці. Це і таблична організація тексту, і таблична координатна сітка, і організована в таблиці графіка. Засоби опису таблиць в HTML У міру розвитку WWW стало ясно, що коштів, які закладені в НТМ, недостатньо для якісного відображення різного типу документів. Недоліком НТМ була відсутність в його складі засобів відображення таблиць. Для цієї мети зазвичай використовувався предформатірованний текст (тег ), В якому таблиця вимальовувалася символами АSСII. Але така форма подання таблиць була недостатньо високої якості і вибивалася із загального стилю документа. Після введення таблиць в HTML у Web-майстрів з'явився не просто інструмент для розміщення текстових і числових даних, а потужний засіб дизайну для розміщення в потрібному місці екрану графічних образів і тексту. Створення таблиць в HTML Для опису таблиць використовується тег<ТАВLЕ>. тег<ТАВLЕ>, Як і багато інших, автоматично переводить рядок до і після таблиці. Створення рядка таблиці - тег<ТR> тег<ТR> (Таble Row, рядок таблиці) створює рядок таблиці. Весь текст, інші теги і атрибути, які потрібно помістити в один рядок, повинні розміщуватися між тегами lt; ТR\u003e. Визначення елементів таблиці - тег<ТD> Усередині рядка таблиці зазвичай розміщуються осередки з даними. Кожна клітинка, яка містить текст або зображення, повинна бути оточена тегами<ТD>. число тегів<ТD> в рядку визначає число осередків Таблиця Якщо в таблиці два тега TR, то в ній два рядки. Якщо в рядку три тега TD, то в ній три стовпці. Заголовки стовпців таблиці - тег<ТН> Заголовки для стовпців і рядків таблиці задаються за допомогою тега заголовка<ТН> (Таblе Неаder, заголовок таблиці). Ці теги подібні<ТD>. Відмінність полягає в тому, що текст, укладений між тегами<ТН>, Автоматично записується жирним шрифтом і за замовчуванням розташовується посередині комірки. Центрування можна скасувати і вирівняти текст по лівому або правому краю. якщо скористатися<ТD> з тегом<В> і атрибутом<АLIGN=center>, Текст теж буде виглядати як заголовок. Однак слід мати на увазі, що не всі браузери підтримують в таблицях жирний шрифт, тому краще ставити заголовки таблиць за допомогою<ТН>. Тема центрирован за замовчуванням Тема може об'єднувати стовпці Тема може бути розташований перед стовпцями Текст або дані Текст або дані Тема може об'єднувати рядки Текст або дані Текст або дані Текст або дані Текст або дані Текст або дані Текст або дані Використання заголовків таблиці - тег<САРТIОN> тег

	Математика	Російська мова	Історія
Медведєв	3	5	5
Смирнов	5	5	5
Соколов	3	2	3

Що ми тут зробили? А зробили ми чотири рядки (tr), в кожній з яких міститься по чотири таблиці (td). У першому блоці tr ми написали назву навчальних дисциплін, при цьому залишивши перший стовпець порожнім, щоб не порушити таблицю.

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

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

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