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

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

3. Визначаємо кількість заголовків (наприклад, комірки "№", "Ім 'я" тощо) у рядку.

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


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

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

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

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

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

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


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

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

Отже, ви вибрали редактор, тепер давайте розберемося, як створити таблицю в HTML. Тег, за допомогою якого у код сторінки вставляється таблиця (< table >), є парним, тобто починається наша конструкція з даного тегу, а закінчується </table >.

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

Відразу відзначимо, що дані елементи також є парними. Теґ < tr > визначає рядки, а < td > - комірки.

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

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

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


  • <table>;
  • <tr>;
  • < ^ > № п/п </ >;
  • < ^ > Прізвище </ >;
  • </tr>;
  • <tr>;
  • <td>1<td>;
  • < td > Іванов </td >;
  • </tr>;
  • </table>.

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

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

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

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

Параметри таблиці визначаються у тезі < table >. До них належать:

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


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

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

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

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

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

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


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

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

  • <table border =”2” bordercolor = “#00008B” bgcolor = “#FFFFFF” align = “center” width = “800” height = “800” >;
  • <tr>;
  • < ^ > № п/п </ >;
  • < ^ > Прізвище </ >;
  • </tr>;
  • <tr>;
  • <td>1<td>;
  • < td > Іванов </td >;
  • </tr>;
  • </table>.

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

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

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

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


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

3. Valign - даний тег вирівнює текст по вертикалі. Приймає такі значення:

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

Приклад вигляду рядка:

  • <tr border = “3”, bordercolor = “#00007F” bgcolor = “#FFFFE0” align = “center” valign = “middle” >;
  • < ^ > № п/п </ >;
  • < ^ > Прізвище </ >;
  • </tr>.

Параметри комірок

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

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

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

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

Висновки

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

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

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