Як зробити в html таблицю. Таблиця кольорів

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

Початок роботи над таблицею

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

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

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

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

редактор

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

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

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

Теги

Незалежно від того, яким редактором ви будете користуватися, перед тим як ви почнете створювати в html таблицю, вам слід запам`ятати основні теги. Всього їх три -

, і

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

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

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

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

Таким чином, код таблиці 2х2 буде виглядати таким чином:

Вставити таблицю в HTML-код сторінки можна, скопіювавши його з обраного редактора.

Параметри таблиць, рядків і осередків

Отже, базовий код ми розібрали. Тепер поговоримо про те, як поліпшити таблицю, зробити його яскравішим і привабливішим. Для цього потрібно знати основні параметри тегів. Вони прописуються всередині відкриває тега, при цьому після кожного параметра ставиться знак рівності, а потім прописується його значення, взяте в лапки. Наприклад, фон в таблиці HTML задається так:

.

Відео: HTML для початківців - # 4 - Таблиці

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

Так, задати ширину кордону допоможе параметр border, який може приймати будь-яке числове значення. Колір кордону задає bordercolor. Загальний фон задає bgcolor.

Якщо ж ви хочете зробити фоном таблиці малюнок, використовуйте background, при цьому вам слід прописати URL малюнка.

Вирівняти вміст сторінки навколо таблиці допоможе параметр align, який може приймати значення left, center і right.

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

.

Відео: HTML таблиці - тег table

Трохи про параметри рядка. Колір осередків в рядку задається за допомогою bgcolor. Вирівнювання тексту по горизонталі можна зробити за допомогою параметра align (left, center або ж right), по вертикалі - valign (приймає значення top, middle або bottom).

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

Є й особливі параметри - colspan і rowspan. За допомогою першого можна задати кількість стовпців, на які буде сягати осередок. Другий же задає кількість рядків, на які ця група може сягати.

Ось і все найбільш корисні параметри.

Таблиця кольорів

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

Відео: HTML Basics »Part 8 | Creating Tables

Сам код починається зі знака решітки і містить три пари цифр або букв. Наприклад, зелений колір в таблиці має код # 007F0. Кожна пара позначає інтенсивність одного з трьох основних кольорів - червоного, зеленого і синього. Використовуючи таблицю, можна вибрати потрібний вам колір і задати його за допомогою коду.

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

вміст

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

Для того щоб помістити текст або будь-яку іншу інформацію в клітинку (рядок), слід прописати її між двома тегами. наприклад: ім`я . В осередку відобразиться «Ім`я».

Помістити графічну інформацію і медіафайли можна за допомогою спеціальних тегів - ,

Поради

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

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

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

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