Атрибути тега TABLE, бордюри, розміри та інші. Атрибути тега TABLE, бордюри, розміри та інші Для створення рядків таблиці використовується тег

Результат:

Значення задаються у пікселях (px) або у відсотках (%)

○ Вирівнювання вмісту в таблиці HTML

Щоб вирівняти вміст у таблиці HTML, використовують тег атрибут "align"і "valign" :

ALIGN– горизонтальне вирівнювання вмісту у таблиці.
Значення:

• left - притиснути вміст до лівої частини (за замовчуванням);
• center – встановити по центру;
• right - притиснути вміст до правої частини

VALIGN– вертикальне вирівнювання вмісту таблиці.
Значення:

• top – притиснути вміст до верху;
• bottom – притиснути вміст донизу;
• middle – встановити вміст посередині

Результат:

○ Як вирівняти таблиці HTML по центру

Щоб вирівняти таблицю по центру, потрібно охопити таблицю тегом

Додаткові та основні теги до таблиці

Результат:

От і закінчили із таблицями. Ви зможете самостійно створити таблицю будь-якої складності. Закріпіть цей урок. Спробуйте самостійно створити будь-яку таблицю.
Чекаю на вас у наступному уроці. Підписуйтесь на оновлення мого блогу.

Попередній запис
Наступний запис

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

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

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

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

Результат:

Як бачите, вийшло не дуже красиво, прикрашатимемо.

Параметри html таблиць: відступ, ширина, колір тла, рамка

Для цього у тега

• width- Вказує ширину таблиці (у пікселах або % від ширини екрана),
• bgcolor- задає колір фону осередків таблиці,
• background- заливає фон таблиці малюнком,
• border- задає рамку вказаної ширини (у пікселах) навколо таблиці,
• cellpadding- Задає відступ у пікселях між кордоном клітини та її вмістом.

Результат:

Вже краще, але наша таблиця притиснута до лівого краю вікна, як і текст у ній. Виправимо це, додавши ще три параметри:

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

Результат:

Зверніть увагу, межі таблиці подвійні. Якщо вказати cellspacing="0", то межі набудуть звичного вигляду:

Взагалі, за межі відповідають два параметри:

• frame- задає вигляд рамки навколо таблиці та може набувати наступних значень:
  • void- рамки немає,
  • above- Тільки верхня рамка,
  • below- Тільки нижня рамка,
  • hsides- тільки верхня та нижня рамки,
  • vsides- тільки ліва та права рамки,
  • lhs- Тільки ліва рамка,
  • rhs- тільки права рамка,
  • box- Усі чотири частини рамки.
• rules- задає вигляд внутрішніх кордонів таблиці та може набувати таких значень:
  • none- між осередками немає меж,
  • groups- межі лише між групами рядків та групами стовпців (будуть розглянуті трохи пізніше),
  • rows- межі лише між рядками,
  • cols- межі тільки між стовпцями,
  • all- відображати усі межі.

Результат:

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

HTML теги tr і td

Таблиці формуються рядково. Тому задані в рядку (tr) параметри поширюють свою дію на всі осередки (td) рядки. У рядків можна використовувати три параметри:

• align- вирівнює текст у осередках по горизонталі, може приймати значення: зліва (right), праворуч (left), по центру (center),
• valign- вирівнює текст у осередках по вертикалі, може приймати значення: вгору (top), вниз (bottom), по центру (middle),
• bgcolor- Задає колір рядка.

• width- Задає ширину стовпця (у пікселах або у відсотковому співвідношенні, де за 100% приймається ширина таблиці),
• height- задає висоту осередку, причому всі осередки в цьому ж рядку стануть висоти.

Результат:

Слід зазначити, якщо не задавати ширину та висоту, то таблиця буде формуватися за вмістом (так було в попередніх прикладах).

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

Осередок-заголовок або - звичайний осередок у кожному рядку.

Таблиця, створена тегом