HTML Розмір таблиці

HTML-таблиці можуть мати різні розміри для кожного стовпця, рядка або всієї таблиці.

Використовуйте атрибут style з властивостями width або height, щоб вказати розмір таблиці, рядка або стовпця.

HTML Ширина таблиці

приклад

Встановіть ширину таблиці на 100%:

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

HTML Ширина стовпців таблиці

приклад

Встановіть ширину першого стовпця на 70%:

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

Щоб встановити висоту певного рядка, додайте атрибут style до елемента рядка таблиці:

приклад

Встановіть висоту другого рядка на 200 пікселів:

HTML Вправи

ПАЛІТРА КОЛЬОРІВ

ПРИЄДНУЙТЕСЯ!

Зв'язок з адміном

Якщо ви хочете повідомити про помилку, а також внести пропозицію про роботу сайту, додати оголошення або рекламу на сайт, не соромтеся надіслати адміну електронного листа на email:

Топ Підручники

Топ Довідники

Топ Приклади

Веб Сертифікати

Цей сайт оптимізовано для навчання та тестування. Приклади можуть бути спрощені для покращення читання та базового розуміння. Навчальні посібники, посилання та приклади постійно переглядаються, щоб уникнути помилок, але ми не можемо гарантувати повну правильність та працездатність всього контенту. Використовуючи цей сайт, ви погоджуєтесь з тим, що прочитали та прийняли умови використання, cookie та політику конфіденційності.
Також ви можете абсолютно безкоштовно скачати офлайн версію сайту W3Schools російською архівом з GitHub та користуватися локально на своєму комп'ютері.
Також доступна версія сайту W3Schools українською мовою.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт працює на фреймворку W3.CSS.

HTML таблиці основи

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

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

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

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

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

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

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

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

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

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

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

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

Примітка: Перегляньте також таблицю personal_pronouns із застосованим до неї стилем, щоб отримати уявлення про те, як вона виглядає.

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

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

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

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

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

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

1. Перш за все, створіть локальну копію blank-template.html та minimal-table.css у новій папці на вашому комп'ютері.
2. Вміст будь-якої таблиці полягає між двома тегами: . Додайте їх у тіло HTML.
3. Найменшим контейнером у таблиці є комірка, вона створюється елементом ('td' - скорочення від 'table data').Введіть усередині тегів table наступне:

Hi, I'm your first cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

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

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

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

Примітка: Цей приклад можна знайти на GitHub під назвою simple-table.html (see it live also).

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

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

 
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

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

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

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

Спробуємо покращити цю таблицю.

Примітка: Закінчений приклад можна знайти на dogs-table-fixed.html в GitHub (дивіться живий приклад).

Навіщо потрібні заголовки?

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

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

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

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

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

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

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. Збережіть код і відкрийте його у браузері, щоб побачити покращення.

Примітка: Закінчений приклад можна переглянути в animals-table-fixed.html на GitHub (живий приклад).

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

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

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

Data 1
Data 2

Calcutta
Orange

Robots
Jazz

Data 1
Data 2

Calcutta
Orange

Robots
Jazz

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

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

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

Вправа: colgroup та col

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

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

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

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

Підсумок

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

Як зробити обведення таблиці в html

Таблиця в HTML - це спосіб вивести на екран дані, упорядкувавши їх у колонки та рядки. Кожен елемент таблиці є складовою і рядки, і колонки.

У осередках HTML таблиці можуть зберігатися такі елементи як: заголовки, списки, текст, зображення, елементи форм, і навіть інші таблиці.

Таблиці в HTML: Відео

У цьому уроці ми розглянемо такі питання:

І так про все по порядку.

Як створити таблицю в HTML

Для того, щоб додати таблицю на веб-сторінку, потрібно використовувати тег . А для того, щоб додати рядки та комірки – теги та .

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

Збережіть створений файл із розширенням .html (Наприклад: index.html).

Ось ми і створили свою першу просту таблицю з одним рядком та двома осередками.

Давайте детальніше розглянемо вищезгаданий код.

Поділ таблиці на логічні частини

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

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

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

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

Що дає нам розподіл таблиці на логічні частини?

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

Приклад, як розділити таблицю на логічні частини:

Як створити комірку заголовка стовпця таблиці в HTML

Приклад як створити комірку заголовка стовпця таблиці в HTML:

Як створити рядки та комірки таблиці в HTML

Для створення рядка таблиці HTML використовують елемент. А для створення осередку - тег.

Наприклад, наступним кодом ми додали ще один рядок з двома осередками в тіло нашої таблиці (у розділі ):

Як зробити заголовок таблиці в HTML

Приклад як зробити заголовок таблиці в HTML:

Як зробити межі таблиці в HTML

Щоб зробити межу таблиці в HTML використовується атрибут border. Якщо заданий атрибут border="0"то таблиця буде без рамки. Якщо ж border="1", то ширина кордону дорівнюватиме 1px. Якщо border="10" - то 10px.

Приклад як зробити межі таблиці в HTML:

Як зробити відступ у таблиці HTML

Атрибут cellpadding визначає відстань між кордоном комірки та її вмістом. Він додає порожній простір до комірки і цим збільшує її розміри. Без сполучника текст у таблиці погано сприймається, оскільки він накладається на межу осередків (за умови, що межа таблиці не дорівнює 0). А з cellpadding навколо тексту утворюється вільний простір і завдяки цьому такий текст зручніше читати.

Атрибут cellspacing задає відстань між зовнішніми межами осередків. Якщо встановлено атрибут border, то товщина кордону враховується.

Приклад як зробити відступ у таблиці HTML:

Як об'єднати осередки таблиці в HTML

Для поєднання двох і більше осередків в одну використовуються атрибути colspan і rowspan тега.

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

Атрибут rowspan встановлює кількість осередків, які мають бути об'єднані по вертикалі.

Приклад як об'єднати осередки таблиці в HTML за вертикаллю:

Приклад як поєднати осередки таблиці в HTML по горизонталі:

Як зробити фон таблиці в HTML

Атрибут bgcolor встановлює колір фону комірки.

Приклад як зробити фон таблиці в HTML:

Як задати розмір таблиці в HTML

Атрибут width визначає ширину елемента, атрибут height — його висоту.Таким чином, створюючи таблицю в HTML, можна вказати її ширину або висоту (за потреби).

Для цього нам достатньо прописати для елемента table атрибут width="значення", або height="значення". Значення може бути зазначено як у пікселях, і у відсотках.

Приклад як встановити ширину таблиці в HTML:

Групування рядків та стовпців таблиці

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

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

Тег також визначає ширину та інші характеристики однієї або декількох колонок таблиці.

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

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

Приклад: Проста HTML-таблиця

Кордон таблиці

Ми вже знаємо, що за замовчуванням таблиці не відображаються.Для додавання рамки навколо таблиці потрібно вказати кілька простих правил таблиць стилів. Властивість border керує відображенням ліній сітки таблиці, а також задає товщину рамки навколо таблиці пікселів. Рамка відображається навколо таблиці та між осередками. Додамо до вже створеної таблиці рамку завтовшки один піксель, встановивши властивість border всіх елементів таблиці, наприклад, ось так:

Приклад: Застосування властивості border

Одинарна рамка для таблиці

приклад: Застосування властивості border-collapse

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

За замовчуванням розмір осередків таблиці підлаштовується під вміст, але іноді буває необхідно залишити навколо табличних даних трохи простору (padding). Оскільки інтервали та поля відносяться до елементів представлення даних, цей простір налаштовується за допомогою стильових таблиць CSS. Поле комірки (padding) - це відстань між вмістом комірки та її кордоном (border). Щоб додати його, застосуйте властивість padding до елемента або . Інтервал осередків (border-spacing) - це відстань між ними (або ). Спочатку надайте значення separate властивості border-collapse елемента, а потім встановіть відстань між комірками, змінивши значення параметра border-spacing. Раніше за поля та інтервал осередків відповідали атрибути cellpadding та cellspacing елемента, але у специфікації HTML5 вони були визнані застарілими.

Приклад використання padding та border-spacing:

Приклад: Застосування властивостей padding та border-spacing

Ширина таблиці

Ширину, яку займає таблиця у вікні браузера, можна вказати за допомогою властивості width CSS, у пікселях або відсотках. Вказівка ​​ширини таблиці в пікселях дозволяє визначити її точну ширину. Відсоткове співвідношення дозволяє зробити таблицю гнучкою, тобто. вона "розтягуватиметься" або "стискатиметься" залежно від того, які ще елементи знаходяться на сторінці і які розміри вікна браузера.
Ось приклад використання властивості width:

Приклад: Застосування властивості width

Об'єднання осередків (colspan та rowspan)

Однією з основних особливостей структури таблиці є об'єднання осередків, що має на увазі розтягування осередку та охоплення нею кількох рядків або стовпців. Це дозволяє створювати складні табличні структури: заголовки або комірки поєднуються за допомогою додавання атрибутів colspan або rowspan. Атрибут colspan визначає кількість осередків, на які простягається цей осередок по горизонталі, а rowspan - по вертикалі.

Об'єднання стовпців

Об'єднання стовпців досягається за допомогою атрибуту colspan в елементах або - осередок розтягується вправо, охоплюючи наступні стовпці. У наступному прикладі значення атрибуту colspan дорівнює 2, а це означає, що осередок повинен займати два стовпці.

Приклад: Застосування атрибуту colspan

Об'єднання рядків

Рядки, об'єднані за допомогою атрибуту rowspan, поводяться точно так, як об'єднані стовпці, з тією різницею, що діапазон осередків задається зверху вниз і охоплює кілька рядків.
У цьому прикладі перший осередок таблиці розтягується на два рядки вниз:

Приклад: Застосування атрибуту rowspan

Заголовок таблиці

Для створення заголовка чи підпису таблиці використовується парний тег (від англ. caption – підпис). Елемент призначений для організації заголовка таблиці. Розташовується відразу після тега , але поза описом рядка або комірки.

Приклад: Застосування тега

Теги групування елементів таблиць

Приклад: Теги , та

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

Завдання

Об'єднання стовпців

Напишіть розмітку таблиці, зображеної на рис.1.

Завдання HTML:

Об'єднання рядків

Напишіть розмітку таблиці, зображеної на рис.1.

Завдання HTML:

Прибрати подвійну рамку таблиці

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

Завдання HTML:

Широка таблиця

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

Завдання HTML:

Заголовок таблиці

Змініть наведений код так, щоб над таблицею з'явився основний заголовок (підпис), як показано на рис.1.

Завдання HTML:

Поле всередині осередків

Змініть наведений код так, щоб між текстом усередині осередків та їх межею з'явився зазор (поле) шириною 25px, як показано на рис.1.

Завдання HTML:

Об'єднання рядків

У розглянутому вище прикладі таблиці та її осередках були відсутні кордону. Кордон таблиці створюється за допомогою атрибуту border елемента TABLE. Ширина межі таблиці вказується у пікселах.Якщо атрибут border не вказано, таблиця виводиться без видимої рамки. Завдяки атрибуту bordercolor можна встановити колір межі таблиці, вказавши код кольору. Додамо до вже створеної таблиці чорну межу шириною чотири пікселі.

Для цього змінимо рядок

Кордон таблиці (та інші елементи сайту) у вікні кожного браузера відображається по-різному. На рис. 3.5 показано, як створена таблиця відображається у вікні стандартного браузера Internet Explorer, а на мал. 3.6 ця ж таблиця зображена у браузері Opera. Досвідчені веб-програмісти намагаються переглядати створену сторінку під різними типами браузерів, щоб усюди виглядало однаково. У кожного браузера свої примхи, так що створити сайт, щоб все виглядало однаково в будь-якому браузері, завдання непросте.

Мал. 3.5. Відображення таблиці у вікні Internet Explorer

Мал. 3.6. Відображення таблиці у вікні Opera

З рис. 3.5 видно, що між кордонами осередків та зовнішнім кордоном таблиці існує вільний простір. Цей простір легко регулюється атрибутами cellspacing і cellpadding елемента TABLE. Атрибут cellspacing визначає відстань між комірками таблиці в пікселах, а атрибут cellpadding - між вмістом комірки та її кордоном.

У лістингу 3.2 наведено приклад таблиці, яка має відстань між вмістом осередків і кордоном дорівнює 10 пікселів, а відстань між осередками дорівнює нулю (рис. 3.7).

Лістинг 3.2. Код HTML-таблиці з нестандартними відстанями між осередками та кордоном

У цьому уроці ми з вами навчимося працювати з таблицями HTML.

Для створення будь-якої таблиці в HTML потрібно лише 3 теги. Тег створює саму таблицю. Тег створює один рядок усередині таблиці. Тег створює одну комірку всередині рядка.

Давайте створимо найпростішу таблицю на новій сторінці table.html:

У браузері результат виглядатиме так:

Як зробити межі таблиці в HTML

За промовчанням межі таблиці не відображаються. Щоб зробити це додамо на сторінку стилі:

CSS-властивість border дозволяє задати стиль самої межі, а властивість border-collapse: collapse дозволяє "схлопнути" межі між осередками. Якщо цього не зробити, табличка матиме досить криповий вигляд - спробуйте і переконайтеся самі.

Щоб додати відступи всередині осередків додамо до них властивість padding:

Об'єднання осередків у HTML

Найчастіше кілька осередків потрібно об'єднати в одну. Поєднувати їх можна як у рядках, так і в стовпах.

Об'єднання осередків по горизонталі

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

Спробуємо створити таку таблицю:

Для цього додаємо в першому рядку один простий осередок, потім другий з атрибутом colspan = "2", щоб він зайняв 2 осередки. А після цього переходимо на наступний рядок і додаємо 3 простих комірки:

Об'єднання осередків по вертикалі

Щоб об'єднати осередки по вертикалі, потрібно скористатися атрибутом rowspan. Працює аналогічно до атрибуту colspan.

Додаємо на першому рядку комірку, розширену вниз на ще одну комірку. Потім на цьому ж рядку додаємо ще пару простих осередків. Переходимо на наступний рядок. Тут місце першого осередку у нас уже зайняте осередком з першого рядка. Тому просто додаємо два простих осередки.

Одночасне об'єднання по вертикалі та горизонталі в одній таблиці

У реальних ситуаціях таблиці такого типу трапляються дуже часто. Спробуйте самостійно створити таку таблицю:

Що? Читаєте далі, навіть не спробувавши? А ну давайте спробуйте!

Якщо все ж таки не вийшло, то ось відповідь:

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

Найчастіше потрібно вирівняти таблицю по центру, хоча спочатку вона притиснута до лівого боку сторінки. Для того, щоб цього досягти, потрібно задати їй властивість margin зі значенням auto.

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

Як змінити розмір таблиці в HTML

Щоб задати ширину та висоту таблиці, можна скористатися CSS-властивостями width і height відповідно. Ними можна встановити як абсолютні значення в пікселях, так і відносні у відсотках (щодо розмірів вікна браузера). Ці ж властивості можна застосувати окремо до кожної комірки/стовпця/рядка.