1. Що таке таблиця?
2. Як працює таблиця?
3. оформлення таблиць
4. Коли не треба використовувати таблиці HTML?
5. Вправи: Ваша перша таблиця
6. Додавання заголовків за допомогою елементів <th>
7. Вправа: заголовки
8. Для чого потрібні заголовки?
9. Злиття кількох рядків або стовпців
10. стилізація стовпців
11. Вправа: colgroup і col
12. підсумок

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

Що таке таблиця?

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

Люди постійно використовують таблиці, причому вже давно, як показує документ за переписом в США, що відноситься до 1800 року:

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

Як працює таблиця?

Сенс таблиці в тому, що вона жорстка. Інформацію легко інтерпретувати, візуально зіставляючи заголовки рядків і стовпців. Наприклад, подивіться на наведену нижче таблицю і знайдіть єдине (Singular) особовий займенник, що використовується в третій особі ( "3rd Person"), з підлогою (gender) ♀, яка виступає в якості об'єкта (object) в реченні. Відповідь можна знайти, зіставивши відповідні заголовки стовпців і рядків.

Personal pronouns Subject Object Singular 1st Person I me 2nd Person you you 3rd Person ♂ he him ♀ she her o it it Plural 1st Person we us 2nd Person you you 3rd Person they them

Якщо правильно уявити таблицю HTML, інтерпретувати її дані зможуть навіть люди, які мають проблеми зі зраніем.

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

Вихідний код HTML (HTML source code) вищенаведеної таблиці є в GitHub; подивіться його і живий приклад (look at the live example) ! Ви помітите, що таблиця там виглядає інакше - це тому, що на сайті MDN до цих даних була застосована таблиця стилів, а наведений в GitHub приклад інформації про стилі не має.

Не живіть помилкових ілюзій - щоб ефективно представляти таблиці в веб, необхідно надати їм хорошу структуру в HTML і застосувати до них таблиці стилів ( CSS ). В даному розділі ми сфокусуємось на HTML, щоб дізнатися про те, що стосується CSS, вам треба звернутися до статті Styling tables .

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

Коли не треба використовувати таблиці HTML?

HTML-таблиці слід використовувати для табличних даних - це те, для чого вони призначені. На жаль, багато хто використовує таблиці HTML для офорленія веб-сторінок, наприклад, один рядок для заголовка, одна для вмісту, одна для виносок, тощо. Поднобнее про це можна дізнатися в Page Layouts на Accessibility Learning Module . Це відбувалося через погану підтримки CSS в різних браузерах; в наш час таке зустрічається набагато рідше, але іноді все ж трапляється.

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

1. Таблиці, що використовуються для оформлення, заважають адаптації сторінок для людей, що мають проблеми із зором: Скрінрідери (Screenreaders ), Які вживали, інтерпретують HTML-теги і читають вміст користувачеві. Оскільки таблиці не є засобом для представлення структури таблиці, і розмітка виходить складніше, ніж при використанні методів CSS, скрінрідери вводять користувачів в оману.
2. Таблиці створюють плутанину тегів: Як уже згадувалося, оформлення сторінок за допомогою таблиць дає більш складну структуру розмітки, ніж спеціально призначені для цього методи. Відповідно, такий код важче писати, підтримувати і налагоджувати.
3. Таблиці не реагують автоматично на тип пристрою: У належних контейнерів (наприклад, <Header> , <Section> , <Article> , або <Div> ) Ширина за замовчуванням дорівнює 100% від їх батьківського елемента. У таблиць же розмір за замовчуванням підлаштовується під їх вміст, так що щоб вони однаково добре працювали на різних типах пристроїв необходими вживати додаткових заходів.

Вправи: Ваша перша таблиця

Отже, ми вже досить говорили про теорію, тепер візьмемо конкретний приклад і побудуємо таблицю.

1. Перш за все, створіть локальну копію blank-template.html і minimal-table.css в новій папці на вашому комп'ютері.
2. Вміст будь-якої таблиці укладається між двома тегами: <table> </ table> . Додайте їх в тіло HTML.
3. Найменшим контейнером в таблиці є осередок, вона створюється елементом <td> ( 'Td' - скорочення від 'table data'). Введіть всередині тегів table наступне: <td> Hi, I'm your first cell. </ Td>
4. Щоб отримати рядок з чотирьох осередків, необхідно скопіювати ці теги три рази. Оновлення вміст таблиці так, щоб вона виглядала наступним чином: <td> Hi, I'm your first cell. </ Td> <td> I'm your second cell. </ Td> <td> I'm your third cell . </ td> <td> I'm your fourth cell. </ td>

Як бачите, вічка не розташовуються одна під інший, насправді вони автоматично вирівнюються по відношенню до інших осередків тієї ж рядки. Кожен елемент <td> створює окрему клітинку, а всі разом вони створюють перший рядок. Кожна додана осередок подовжує цей рядок.

Щоб цей рядок перестала рости, а нові осередки перейшли на другий рядок, необхідно використовувати елемент <tr> ( 'Tr' - скорочення від 'table row'). Спробуємо, як це вийде.

1. Помістіть чотири вже створених осередки між тегами <tr> як тут показано: <tr> <td> Hi, I'm your first cell. </ Td> <td> I'm your second cell. </ Td> <td> I'm your third cell. </ td> <td> I'm your fourth cell. </ td> </ tr>
2. Тепер, коли один рядок вже є, додамо ще - кожен рядок треба вкласти в додатковий елемент <tr>, а кожна клітинка повинна бути всередині елемента <td>.

В результаті вийде таблиця, яка буде виглядати приблизно так:

Hi, I'm your first cell. I'm your second cell. I'm your third cell. I'm your fourth cell. Second row, first cell. Cell 2. Cell 3. Cell 4.

Додавання заголовків за допомогою елементів <th>

Тепер звернемося до табличних заголовкам - особливим осередкам, які йдуть спочатку рядки або стовпці і визначають тип даних, які містить цей рядок або стовпець (як "Person" і "Age" в першому прикладі цієї статті). Щоб показати, для чого вони потрібні, візьмемо такий приклад. Спочатку вихідний код:

<Table> <tr> <td> & nbsp; </ td> <td> Knocky </ td> <td> Flor </ td> <td> Ella </ td> <td> Juan </ td> </ tr > <tr> <td> Breed </ td> <td> Jack Russell </ td> <td> Poodle </ td> <td> Streetdog </ td> <td> Cocker Spaniel </ td> </ tr> <tr> <td> Age </ td> <td> 16 </ td> <td> 9 </ td> <td> 10 </ td> <td> 5 </ td> </ tr> <tr> <td> Owner </ td> <td> Mother-in-law </ td> <td> Me </ td> <td> Me </ td> <td> Sister-in-law </ td> </ tr> <tr> <td> Eating Habits </ td> <td> Eats everyone's leftovers </ td> <td> Nibbles at food </ td> <td> Hearty eater </ td> <td> Will eat till he explodes </ td> </ tr> </ table>

Тепер як виглядає таблиця:

Knocky Flor Ella Juan Breed Jack Russell Poodle Streetdog Cocker Spaniel Age 16 9 10 5 Owner Mother-in-law Me Me Sister-in-law Eating Habits Eats everyone's leftovers Nibbles at food Hearty eater Will eat till he explodes

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

Вправа: заголовки

Спробуємо поліпшити цю таблицю.

1. Спочатку створіть локальну копію dogs-table.html і minimal-table.css в новій папці на вашому комп'ютері. HTML містить приклад Dogs, який ви вже бачили вище.
2. Щоб пізнавати заголовки таблиці в якості заголовків, візуально і семантично, можна використовувати елемент <th> ( 'Th' скорочення від 'table header'). Він працює в точності як <td>, за винятком того, що позначає заголовок, а не звичайну осередок. Замініть у своєму HTML всі елементи <td>, що містять заголовки, на елементи <th>.
3. Збережіть HTML і завантажте його в браузер, і ви побачите, що заголовки тепер виглядають як заголовки.

Для чого потрібні заголовки?

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

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

Заголовки дають додаткову перевагу - разом з атрибутом scope (який ми будемо вивчати в наступній статті) вони допомагають поліпшити зв'язок кожного заголовка з усіма даними рядка або стовпця одночасно, що досить корисно

Злиття кількох рядків або стовпців

Іноді потрібно буває, щоб осередки распротраняется на кілька рядків або стовпців. Візьмемо простий приклад, в якому наведено імена тварин. Іноді буває потрібно вивести імена людей поруч з іменами тварин. А іноді це не потрібно, і тоді ми хочемо, щоб ім'я тварини займало всю ширину.

Вихідна розмітка виглядає так:

<Table> <tr> <th> Animals </ th> </ tr> <tr> <th> Hippopotamus </ th> </ tr> <tr> <th> Horse </ th> <td> Mare </ td> </ tr> <tr> <td> Stallion </ td> </ tr> <tr> <th> Crocodile </ th> </ tr> <tr> <th> Chicken </ th> <td> Cock </ td> </ tr> <tr> <td> Rooster </ td> </ tr> </ table>

Але результат не такий, як хотілося б:

Animals Hippopotamus Horse Mare Stallion Crocodile Chicken Cock Rooster

Потрібно, щоб "Animals", "Hippopotamus" і "Crocodile" поширювалися на два стовпці, а "Horse" і "Chicken" - на два рядки. На щастя, табличні заголовки і осередки мають атрибути colspan і rowspan, які дозволяють це зробити. Обидва беруть безрозмірне числове значення, яке дорівнює кількості рядків або стовпців, на які повинні поширюватися осередки. Наприклад, colspan = "2" поширює осередок на два стовпці.

Скористаємося colspan і rowspan щоб поліпшити таблицю.

1. Спочатку створіть локальну копію animals-table.html і minimal-table.css в новій папці на вашому комп'ютері. Код HTML містить приклад з тваринами, який ви вже бачили вище.
2. Потім використовуйте атрибут colspan щоб поширити "Animals", "Hippopotamus" і "Crocodile" на два стовпці.
3. Нарешті, використовуйте атрибут rowspan щоб поширити "Horse" і "Chicken" на два рядки.
4. Збережіть код та відкрийте його в браузері, щоб побачити поліпшення.

стилізація стовпців

І остання можливість, про яку розповідається в даній статті. HTML дозволяє вказати, який стиль потрібно застосовувати до цілого колонки даних відразу - для цього застосовують елементи <col> і <colgroup> . Їх ввели, оскільки задавати стиль для кожної комірки окремо або використовувати складний селектор на кшталт : Nth-child () було б занадто утомливо.

Візьмемо простий приклад:

<Table> <tr> <th> Data 1 </ th> <th style = "background-color: yellow"> Data 2 </ th> </ tr> <tr> <td> Calcutta </ ​​td> <td style = "background-color: yellow"> Orange </ td> </ tr> <tr> <td> Robots </ td> <td style = "background-color: yellow"> Jazz </ td> </ tr > </ table>

Що дає нам:

Data 1 Data 2 Calcutta Orange Robots Jazz

Він не ідеальний, оскільки нам довелося повторити інформацію про стилі для всіх стріх осередків в стовпці (в реальному проекті, можливо, доведеться вводити class на всіх трьох і вводить правило в таблиці стилів). Замість цього, ми можемо поставити інформацію один раз, в елементі <col>. Елемент <col> задається в контейнері <colgroup> відразу ж за відкриває тегом <table>. Ефект, який ми бачили вище, можна задати так:

<Table> <colgroup> <col> <col style = "background-color: yellow"> </ colgroup> <tr> <th> Data 1 </ th> <th> Data 2 </ th> </ tr> <tr> <td> Calcutta </ ​​td> <td> Orange </ td> </ tr> <tr> <td> Robots </ td> <td> Jazz </ td> </ tr> </ table>

Ми визначаємо два "стилізує стовпчика". Ми не застосовуємо стиль до на одну, але порожній елемент <col> ввести необхідно - інакше до на одну не буде застосовано стиль.

Якби ми хотіли застосувати інформацію про стилі до обох стовпчиках, ми могли б просто ввести один елемент <col> з атрибутом span, таким чином:

<Colgroup> <col style = "background-color: yellow" span = "2"> </ colgroup>

Подібно colspan і rowspan, span приймає безрозмірне числове значення, яке вказує, до якого кількості стовпців потрібно застосувати даний стиль.

Вправа: colgroup і col

Тепер спробуйте самі.

Нижче наведена таблиця уроків по мовам. У п'ятницю (Friday) новий клас цілий день вивчає голландський (Dutch), крім того, у вівторок (Tuesday) і четвер (Thursdays) є заняття з німецької (German). Вчителька хоче виділити стовпці, що відповідають дням, коли вона викладає.

Mon Tues Wed Thurs Fri Sat Sun 1st period English German Dutch 2nd period English English German Dutch 3rd period German German Dutch 4th period English English Dutch

Заново створіть таблицю, виконавши такі дії.

1. Спочатку створіть локальну копію файлу timetable.html в новій папці на вашому копьютеров. Код HTML містить таблицю, яку ви вже бачили вище, але без інформації про стилі.
2. Додайте елемент <colgroup> у верхній частині сторінки, відразу ж під тегом <table>, куди ви зможете вставляти елементи <col>.
3. Перші два стовпці треба залишити без стилю ..
4. Додайте колір фону для третього стовпців. Значенням атрибута style буде background-color: # 97DB9A;
5. Задайте ширину для четвертого стовпчика. Значенням атрибута style буде width: 42px;
6. Додайте колір фону для п'ятого стовпчика. Значенням атрибута style буде background-color: # 97DB9A;
7. Додайте інший колір фону і кордон для шостого стовпця, щоб показати, що це особливий день і вона веде новий клас. Значеннями атрибута style будуть: background-color: # DCC48E; border: 4px solid # C1437A;
8. Останні два дні вихідні; значенням атрибута style буде width: 42px;

Подивіться, що у вас вийшло. Якщо застрягнете, або захочете себе перевірити, можете подивитися нашу версію в timetable-fixed.html ( подивіться живий приклад ).

підсумок

Тут наведено практично всі базові відомості про таблиці HTML. У наступній статті ви отримаєте більш просунуті відомості на цю тему.