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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• ;
  ;
  ;
  ;
  ;
  ;
  ;
  ;

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

  .

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

Ми з вами розібрали створення таблиці в 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 - даний тег вирівнює текст по вертикалі. Приймає наступні значення:

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

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

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

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

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

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

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

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

Висновки

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

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

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