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

category Комп'ютери

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

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

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

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

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

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

Редактор

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

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

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

Теги

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

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

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

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

фон в таблиці html

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

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

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

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

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

.

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

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

вставити таблицю в html

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

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

Задати заголовок допоможе парний тег

, який прописується відразу після відкриваючого тега .

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

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

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

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

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

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

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

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

Вміст

текст в таблиці html

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

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

. В осередку відобразиться «Ім'я».

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

Поради

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

зробити таблицю в html

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

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

Related Posts
About
HTML-код. Коди квітів HTML

Напевно ви стикалися з таким поняттям як HTML-код. Чули від знайомих, бачили в меню свого браузера і т. П. Але що ж це таке? Давайте спробуємо з'ясувати, що це за код і з яких елементів він складається.Основні відомостіПочнемо з визначення. HTML-код…

Про те, як таблицю перенести з екселя в ворд

Часто у користувачів додатків Microsoft Office виникає необхідність перенесення широкоформатного таблиці з числовими даними, створеної в електронній таблиці MS Excel, в документ редактора текстових файлів MS Word. Наприклад, ви готуєте в ворде…

Як у «Ворді» намалювати таблицю? Відповідь підкаже сама програма

Текстовий редактор від Microsoft - зручний і багатофункціональний інструмент. Жодна інша програма не завоювала такої популярності, як Word. Ним користуються службовці, студенти і школярі. Саме вони без праці набирають текст, форматують його, малюють…


» » Як зробити в HTML таблицю. Таблиця кольорів
ім'я