Жіночі теревеньки - сайт для кожної жінки
7-01-2019, 20:10

Використання HTML у таблиці

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

Раніше практично всі веб-майстри використовували таблиці саме для верстки сайтів. Спочатку таблиці для цього не придумувалися. Тому для розмітки сайту потрібно використовувати блоковий елемент div.

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

Як зробити таблицю HTML?

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

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

Приклад таблиці 2 на 2.

текст першої клітинки першого рядкатекст другої комірки першого рядка
текст першої комірки другого рядкатекст другої комірки другого рядка

Теги

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

Головне правило: кількість осередків у кожному рядку повинно бути однаковим. Адже це таблиця.

html в таблице

Але, як і в редакторі Word і Excel, комірки можна об'єднувати між собою.

Як об'єднати комірки в таблиці?

Для об'єднання використовують атрибути Colspan і Rowspan. Span перекладається як "охоплювати" або "перекривати". Дослівний зміст - охопити/перекрити осередку/рядка.

Как объединять ячейки в таблице

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

теги html таблица

У даному прикладі у першому рядку об'єднали 3 клітинки за допомогою атрибуту colspan="3". Потім першу клітинку другий рядки розтягнули на чотири рядки. Запам'ятайте, що розтягуємо/об'єднуємо тільки в першій клітинці. Її властивість поширюватися далі. Все, що йде раніше, порушено не буде.

Якщо у вас є 5 клітинок і ви бажаєте об'єднати з 2 по 4, то потрібно саме у комірки під номером 2 вказати атрибут colspan="3".

Зверніть увагу на комірку під номером 9 на малюнку вище. Там об'єднали відразу і осередки і рядки. Такі дії не забороняються.

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

Объединение строк html

Оформлення таблиць

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

теги html таблица

Результат коду буде наступним.

таблица в html

Як бачите, ніяких ефектів немає. Можна додати рамку, вказати ширину і висоту.

атрибуты таблицы html

Також можна пограти з вирівнюванням. Можна вирівнювати як по висоті, так і по ширині.

выравнивание в таблице

Align для вирівнювання по горизонталі, а valign - по вертикалі. Ось такий результат.

пример создания таблиц в html

Атрибути align і valign можна застосовувати до всієї рядку. Тоді всі комірки, які знаходяться в ній, будуть підкорятися цим атрибутам.

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

Як підключати стилі до таблиці?

Як і будь-які теги HTML, таблиця може перетворюватися за допомогою стилів. Вам потрібно вказати файл стилів в області head або готовий стиль (вказується також head).

...

table

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #000000;

.my_class

color: #666666;

...

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

Зверніть увагу, що класи можна використовувати як для тега table, так і для конкретної комірки або рядка.

текст першої клітинки першого рядка текст другої комірки першого рядка
текст першої комірки другого рядкатекст другої комірки другого рядка

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

Додаткові атрибути таблиць

Які атрибути можна писати в класах стилів? Існує дуже багато атрибутів, які застосовуються саме до таблиць. Розглянемо основні, які вам знадобляться.

align

Вирівнювання по горизонталі

valign

Вирівнювання по вертикалі

background

Фонове зображення у клітинці/таблиці

bgcolor

Колір фону у клітинці

bordercolor

Колір рамки таблиці/комірки

height

Висота комірки

nowrap

Заборона перенесення тексту в рядку.

width

Ширина комірки/таблиці

Як бачите, використовувати HTML в таблиці можна величезною кількістю "інструментів".примеры таблиц html

Красиві створені за допомогою HTML таблиці. Приклади

Завдяки стилів можна створювати різні красиві таблиці. Все залежить від того, що і як вам подобається. html таблицы примерыЦе як в приготуванні страв. Інгредієнти ті ж, а варіантів рецептів безліч.

как сделать таблицу html

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


Обов'язково для перегляду