Ще якихось років 10 тому таблиця була інструментом верстки всього сайту, зараз зустріти табличную версту можна тільки в шаблонах e-mail розсилки. Ми ж з вами розглянемо HTML таблиці, як інструмент представлення табличних даних.
Суть всієї серії міні-уроків по HTML - це надати мінімально необхідну інформацію, яка буде корисна на практиці. Позбавити від зайвого, наприклад: вивчення непотрібних атрибутів. Навчити користуватися html елементами. Підготувати до якнайшвидшого вивчення CSS.
Таблиці - це той елемент, який містить масу непотрібних атрибутів (які замінюються властивостями CSS), по-цьому, щоб вивчення таблиці було легким, розглянемо цей html елемент на простому прикладі.
Таблиці складається з рядів і осередків, побудуємо таблицю 3х3 в осередках, якій будуть номер рядка і осередка в цьому рядку, зазначені через точку. (Наприклад: 1.1, 1.2, 1.3, 2.1, 2.2 і т.д.)
<Table> <tr> <td> 1.1 </ td> <td> 1.2 </ td> <td> 1.3 </ td> </ tr> <tr> <td> 2.1 </ td> <td> 2.2 < / td> <td> 2.3 </ td> </ tr> <tr> <td> 3.1 </ td> <td> 3.2 </ td> <td> 3.3 </ td> </ tr> </ table>
В створення простої таблиці бере участь три html тега:
- table - батьківський (головний) тег таблиці, має парну структуру, всередині його записуються рядки (tr) і осередки (td).
- tr - тег ряду таблиці, має парну структуру, всередині складається з ячейок (td).
- td - тег комірки, має парну структуру, всередині себе містить інформацію (Наприклад: текст, картинку, список, таблицю і т.д.)
Проста HTML таблиця
У демо-прикладі присутні атрибути:
border - задає ширину межі (рамки), вказувати в реальному верстці не потрібно, замінюється CSS властивістю.
width, height - задає ширину і висоту таблиці, вказувати в реальному верстці не потрібно, замінюється CSS властивістю.
HTML таблиці. Атрибути colspan і rowspan
Два атрибути, гідні уваги:
colspan, прописується в осередку, об'єднує сусідні осередки по горизонталі (колонки) починаючи від тієї в якій був прописаний даний атрибут. Як значення вказують число осередків, яке необхідно об'єднати.
rowspan, те ж саме, що і colspan, тільки об'єднання осередків відбувається за вертикаль (ряди).
Приклад таблиці з colspan
<Table border = "1" width = "300" height = "300"> <tr> <td colspan = "2"> 1.1 - 1.2 </ td> <td> 1.3 </ td> </ tr> <tr > <td> 2.1 </ td> <td> 2.2 </ td> <td> 2.3 </ td> </ tr> <tr> <td colspan = "3"> 3.1 - 3.3 </ td> </ tr > </ table> 
Проста HTML таблиця з colspan
Зверніть увагу, якщо ми вказуємо атрибут colspan = "2", то це означає, що ця група займе 2 колонки, відповідно одну пару тегів TD з цього ряду ми видаляємо!
Приклад таблиці з rowspan
<Table border = "1" width = "300" height = "300"> <tr> <td rowspan = "3"> 1.1 - 3.1 </ td> <td> 1.2 </ td> <td> 1.3 </ td> </ tr> <tr> <td> 2.2 </ td> <td rowspan = "2"> 2.3 - 3.3 </ td> </ tr> <tr> <td> 3.2 </ td> </ tr > </ table> 
Приклад HTML таблиці. Атрибут rowspan
Зверніть увагу, якщо ми вказуємо атрибут rowspan = "3", то це означає, що ця група займе 3 осередки в одній колонці, відповідно дві пари тегів TD з лав під цією осередком ми видаляємо!
