Як зробити таблицю в HTML: докладний опис
Таблиці - одні з найбільш важливих, але в теж час складних елементів, які повинні бути присутніми на веб-сторінках. З їх допомогою зручно подавати важливу і корисну інформацію в досить стислій формі. Звичайно, більшість редакторів в шаблонах, що працюють на різних движках, дозволяють автоматично вставляти таблицю на сторінку сайту або окремої публікації, але що, якщо дизайн веб-ресурсу, його сторінки створюються з нуля? Тоді перед початківцям майстром може встати проблема: як зробити таблицю в HTML. Давайте розберемося, як же правильно і швидко створити даний елемент.
як зробити таблицю в html
Вибираємо редактор
В першу чергу, приступаючи до створення таблиці, слід визначитися з редактором, в якому ви будете працювати. Звичайно, найпростіше вибрати ту програму, в якій ви створюєте основний код сайту. Але найкраще використовувати для цих цілей старий добрий блокнот.
Ви можете запитати, для чого ускладнювати собі життя, адже якщо робити все відразу в редакторі, то і результат можна побачити теж відразу, ще й підказки програми використовувати.
Так, це дійсно так, але, створюючи таблицю з чистого аркуша, ви не тільки зможете досконально вивчити сам принцип її створення, але й не допустити прикрих помилок і помилок в основному коді. Іноді трапляється так, що курсор випадково переміщується вниз, і в процесі написання в код закрадається помилка, яку деколи складно знайти. Створивши таблицю в блокноті, ви зможете скопіювати її шифр і вставити в потрібне вам місце.
Алгоритм створення таблиці
Для початку складемо короткий алгоритм, як зробити таблицю в HTML. Це потрібно для того, щоб ви розуміли послідовність кожного кроку. Потім розберемо, як саме виконувати кожен з пунктів.
Почнемо з підготовчих дій.
1. Малюємо на аркуші паперу схематичне зображення таблиці.
2. Підраховуємо кількість рядків і осередків. Якщо кількість останніх різне - вважаємо для кожного рядочком окремо.
3. Визначаємо в рядку кількість осередків-заголовків (наприклад, осередки «№», «Ім'я» і т. Д.).
4. Записуємо основні параметри таблиці - колір, висоту і ширину, вирівнювання тексту - загалом, все, що вам здасться потрібним.
Далі переходимо безпосередньо до створення таблиці:
1. Вставляємо теги таблиці.
2. Вставляємо теги рядків виходячи з тієї кількості, яка вам потрібно.
3. У рядках вставляємо теги осередків (звичайних і великих), також виходячи з тієї кількості, яка записано у вас на папері.
4. Задаємо параметри для таблиці в цілому.
5. При потребі задаємо показники для окремих осередків.
6. Заповнюємо наші осередки текстом.
як вставити таблицю в html
Створюємо таблицю
Отже, ви вибрали редактор, тепер давайте розберемося, як створити таблицю в HTML. Тег, за допомогою якого в код сторінки вставляється таблиця (
), Є парним, тобто починається наша конструкція з даного тега, а закінчуєтьсяВставивши теги таблиці, переходимо до створення рядків і осередків.
Відразу відзначимо, що дані елементи також є парними. Тег
задає рядки, а ;;;| - осередки. Для заголовних осередків слід використовувати парний елемент | . Як вже говорилося, першим ділом слід оформити рядки, потім в них прописувати вже осередки. Для того щоб не заплутатися, радимо робити або відступи між кожним блоком в одну-дві строчки, або ж прописувати новий блок елементів, використовуючи клавішу "Tab". Як це може виглядати? Приблизно так:
Як бачите, нічого складного в цьому немає. Головне - не заплутатися в кількості рядків і осередків. Інакше таблицю може перекосити. Ми з вами розібрали створення таблиці в HTML, тепер можемо переходити до параметрів як самої матриці, так і її рядків і осередків. як вставити таблицю в html Параметри таблиціКоли код написаний, слід звернути увагу на наступні пункти: вирівнювання в таблиці HTML, колір кордонів, фону, тексту та інше. Параметри таблиці задаються в тегу . До них відносяться:1. Border - ширина кордонів. Здається цілим числом. За замовчуванням кордону будь-якої таблиці дорівнюють нулю. 2. Bordercolor - колір кордону. Може здаватися як шістнадцятковим кодом кольору (# 00008B), так і його назвою на англійкого (DarkBlue). За замовчуванням він завжди сірий. 3. Bgcolor - колір фону. Також задається за допомогою коду або назви. 4. Align - вирівнювання тексту за таблицею. За замовчуванням - по лівому краю. Є такі варіанти даного параметра:
5. Width і height - ширина і висота таблиці. Може здаватися як в пікселях, так і у відсотках (щодо розміру браузера вікна). Прописуючи той чи інший показник, слід звернути особливу увагу на оформлення. Після вказівки параметра повинен йти знак "дорівнює", після якого в лапках вказується задане значення. Що стосується кольору тексту, то його оформляють так само, як і звичайний текст у форматі HTML. Приклад оформлення таблиці:
як створити таблицю в html Параметри рядківОтже, ми вже розібралися, як зробити таблицю в HTML і прописати основні її параметри. Але що, якщо нам потрібно виділити рядок? Оформити її не так, як основний текст таблиці? Параметри рядки прописуються в тегу точно так само, як і дані таблиці. Для рядки можуть задаватися наступні змінні:1. Вже відомі вам border, bordercolor і bgcolor. 2. Align - вирівнювання тексту в рядку. Може приймати значення left, center і right. 3. Valign - даний тег вирівнює текст по вертикалі. Приймає наступні значення:
Приклад оформлення рядки:
Параметри осередківІ останнє, на що варто звернути увагу тим, хто бажає знати, як зробити таблицю в HTML - параметри окремих осередків, як звичайних, так і заголовних. По суті, все робиться точно так само, як і для таблиці або рядка. Єдине, додається ще два важливі елементи: 1. Colspan - даний параметр вказує кількість стовпців, на які може сягати осередок. 2. Rowspan - вказує вже кількість рядків, яке займає дана осередок. Так як оформлення нічим не відрізняється від прописування рядки, то не будемо наводити приклад коду. вирівнювання в таблиці html ВисновкиЗробити таблицю не так складно, як може здатися на перший погляд. Головне при написанні її коду - посидючість і увагу. Що стосується того, як вставити таблицю в HTML, то її шифр достатньо скопіювати і вставити саме в те місце вашої сторінки, в якому вона, на вашу думку, повинна розташовуватися. Не бійтеся експериментувати, і незабаром ви досконало опануєте технікою створення таблиць. Успіхів!
|
|---|
