Таблиці на веб-сторінках зустрічаються дуже часто, завдяки їм можна впорядкувати текст в певній послідовності. Навіть якщо на сайті немає видимих кордонів між осередками, це не означає, що таблиця відсутня. Межі часто приховують, щоб не заграмождать контент і привернути увагу до тексту.
Верстка таблиці в HTML досить складна і трудомістка, що вимагає уваги і навичок. Але для початку слід розібратися з тегами і атрибутами, за допомогою яких створюється таблиця.
Початок будь-якої таблиці завжди починається з тега-контейнера table. який в кінці завжди повинен бути закритий. В цьому контейнері завжди розташовуються рядка - тег tr і стовпці (осередки), які задаються тегом td. У тегах
розташовуються стовпчики
| між якими вписується текст, що відображається в елементах таблиці. Спробуйте за прикладом створити свою таблицю:
перша осередок |
друга осередок |
ще один осередок |
Зовнішній вигляд таблиці
Отриману таблицю можна преукрасить, додавши квітів:
- для зміни фону всієї таблиці| - для зміни фону комірки
Крім того, фон можна змінити за допомогою атрибута background:
У разі зазначення зображення, як в прикладі, картинка повинна розташовуватися там же де і html-файл.
Для додавання рамки таблиці або комірки застосовують атрибут border. колір якого можна міняти за допомогою атрибута bordercolor.
- межа таблиці відсутня
- колір кордону зміниться на вказаний і її розмір буде 2px
Вирівнювання тексту та осередків
Текст в осередку можна вирівнювати по горизонталі і вертикалі:
- вирівнювання тексту по центру горизонталі, також можна по лівому (left) і правого (right) краях
| - вирівнювання по центру вертикалі, крім того можна по верху (top) і по низу (bottom)
Для того, щоб призначити відступ від країв всередині осередків, застосовують атрибут cellpadding:
Щоб змінити відступ між осередками в тезі table вказується спеціальний атрибут:
- якщо вказати значення 0, відступу НЕ буде
Для осередку, як і для всієї таблиці, можна вказати висоту (height) і ширину (width). Якщо в рядку кілька осередків, то висоту досить вказати тільки для першої, інші будуть тієї ж висоти.
або |
Якщо вказується в процентах, то сума ширини осередків повинна бути 100%.
об'єднання осередків
У разі, якщо потрібно об'єднати осередки по горизонталі або вертикалі, застосовують спеціальні атрибути - colspan і rowspan, значеннями яких є кількість об'єднуються осередків.
горизонталь |
верхня осередок |
вертикаль |
ячеечка |
ячейчечка |
ячееченьчік |
Схожі статті
| | |
