Як зробити таблицю в html: докладний опис

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

вибираємо редактор

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

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

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

Алгоритм створення таблиці

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

Почнемо з підготовчих дій.

1. Малюємо на аркуші паперу схематичне зображення таблиці.

2. Підраховуємо кількість рядків і осередків. Якщо кількість останніх різний - вважаємо для кожного рядочки окремо.

3. Визначаємо в рядку кількість осередків-заголовків (наприклад, осередки «№», «Ім`я» і т. Д.).

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

Далі переходимо безпосередньо до створення таблиці:

1. Вставляємо теги таблиці.

2. Вставляємо теги рядків виходячи з тієї кількості, яка вам потрібно.

3. У рядках вставляємо теги осередків (звичайних і великих), також виходячи з тієї кількості, яка записана у вас на папері.

4. Задаємо параметри для таблиці в цілому.

5. При потребі задаємо показники для окремих осередків.

6. Заповнюємо наші осередки текстом.

створюємо таблицю

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

), Є парним, тобто починається наша конструкція з даного тега, а закінчується .

Відео: Таблиці html. Як створити і налаштувати осередки

Вставивши теги таблиці, переходимо до створення рядків і осередків.

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

Для великих осередків слід використовувати парний елемент .

Як вже говорилося, в першу чергу слід оформити рядки, потім в них прописувати вже осередки. Для того щоб не заплутатися, радимо робити або відступи між кожним блоком в одну-дві строчки, або ж прописувати новий блок елементів, використовуючи клавішу "Tab".

Як це може виглядати? Приблизно так:

• ;
• ;
• № п / п ;
• Прізвище ;
• ;
• ;
• 1;
• Іванов;
• ;
• .

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

Ми з вами розібрали створення таблиці в HTML, тепер можемо переходити до параметрів як самої матриці, так і її рядків і осередків.

Відео: HTML5 для початківців | # 10 Створення HTML-таблиць

параметри таблиці

Коли код написаний, слід звернути увагу на наступні пункти: вирівнювання в таблиці HTML, колір кордонів, фону, тексту і інше.

Параметри таблиці задаються в тезі

. До них відносяться:

1. Border - ширина кордонів. Здається цілим числом. За замовчуванням кордону будь-якої таблиці дорівнюють нулю.

2. Bordercolor - колір кордону. Може здаватися як шістнадцятковим кодом кольору (# 00008B), так і його назвою на англійкого (DarkBlue). За замовчуванням він завжди сірий.

3. Bgcolor - колір фону. Також задається за допомогою коду або назви.

4. Align - вирівнювання тексту за таблицею. За замовчуванням - по лівому краю. Є такі варіанти даного параметра:

• left - обтікання справа;
• right -обтеканіе зліва;
• center - висновок таблиці по центру без обтікання.

5. Width і height - ширина і висота таблиці. Може здаватися як в пікселях, так і у відсотках (щодо розміру браузера вікна).

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

Що стосується кольору тексту, то його оформляють так само, як і звичайний текст у форматі HTML.

Приклад оформлення таблиці:

• ;
• ;
• № п / п;
• Прізвище;
• ;
• ;
• 1;
• Іванов;
• ;
• .

параметри рядків

Отже, ми вже розібралися, як зробити таблицю в HTML і прописати основні її параметри. Але що, якщо нам потрібно виділити рядок? Оформити її не так, як основний текст таблиці?

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

1. Вже відомі вам border, bordercolor і bgcolor.

2. Align - вирівнювання тексту в рядку. Може приймати значення left, center і right.

3. Valign - даний тег вирівнює текст по вертикалі. Набуває таких значень:

Відео: Таблиці [HTML - Урок 6]

• top - текст вирівнюється по верхній межі;
• middle - по центру;
• bottom - по нижній межі.

Приклад оформлення рядки:

• ;
• № п / п;
• Прізвище;
• .

параметри осередків

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

1. Colspan - даний параметр вказує кількість стовпців, на які може сягати осередок.

2. Rowspan - вказує вже кількість рядків, яке займає ця група.

Відео: Як у Ворді об`єднати таблиці?

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

висновки

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

Що стосується того, як вставити таблицю в HTML, то її шифр досить скопіювати і вставити саме в те місце вашої сторінки, в якому вона, на вашу думку, повинна розташовуватися.

Не бійтеся експериментувати, і незабаром ви досконало опануєте технікою створення таблиць. Успіхів!

Увага, тільки СЬОГОДНІ!