Початківцям вебмайстрам доводиться стикатися зібезліччю проблем. Здавалося б, сьогодні вже можна використовувати для створення своїх сайтів шаблони, але от лихо, далеко не завжди вони мають потрібними властивостями, і тоді доводиться або створювати дизайн сайту з чистого аркуша, або ж вносити зміни у вже наявний код. Тут-то і знадобиться знання HTML-коду і мінімальні уявлення про те, як поставити фон і колір сторінки, вставити малюнок або відео, зробити таблицю в HTML.
Початок роботи над таблицею
Одна з найбільш складних речей в розмітціHTML-сторінки - таблиці. І проблема не в складності тегів, які, по суті, не так вже й важко запам'ятати, а в тому, що при написанні коду можна легко допустити помилки - забути прописати зайву рядок або елемент, вписати текст не туди, куди треба, і інші дрібниці . Причому чим більше таблиця, тим більше шанс помилитися.
Тому, приступаючи до створення таблиці в HTML, рекомендуємо максимально зосередитися і не відволікатися.
В першу чергу слід накреслити майбутню таблицю на аркуші паперу, помітивши, що і в якій комірці у вас буде перебувати, а також зазначивши для себе основні параметри того чи іншого елемента.
Далі слід підрахувати кількість рядків утаблиці, а також кількість осередків у кожному рядку. Також рекомендуємо зазначити такі пункти, як наявність картинок в таблиці, колір фону, меж, тексту. Тільки після цього можна починати створювати в HTML таблицю, використовуючи записану інформацію.
редактор
Отже, ви створили макет таблиці.Тепер належить вибрати відповідний редактор для її створення. Можна вибрати спеціальні конструктори сайтів і робити таблицю в них. Використовуючи дане програмне забезпечення, створити таблицю не складніше, ніж в документі Word. Можна вибрати таку програму, як FrontPage. Незважаючи на те що програма досить стара, з її допомогою можна створювати непогані сайти, до того ж по ній можна знайти не один самовчитель.
Якщо ви хочете створити в HTML таблицю за допомогоюспеціального коду, можна використовувати для цих цілей і звичайний блокнот або звичайний документ Word. Правда, тут вам доведеться попрацювати, так як писати код доведеться довго.
Можна скористатися редактором, вбудованим всам движок сайту. Так, при створенні запису в багатьох двигунах передбачена можливість додавання різних елементів, в тому числі і таблиць. Навіть якщо базові можливості редактора вас не задовольнять, внести зміни в код буде легше, ніж написати його з нуля.
Теги
Незалежно від того, яким редактором вибудете користуватися, перед тим як ви почнете створювати в html таблицю, вам слід запам'ятати основні теги. Всього їх три -
,
і
. Відзначимо, що всі теги є парними. Перший тег позначає таблицю в цілому, другий задає рядок, третій - осередок всередині рядка.
Трохи докладніше про кожен з тегів.Таблиця завжди починається з тега
і закінчується . Для будь-якого браузера це умовне позначення того, що перед ним знаходиться саме таблиця. Далі прописуються рядки, які відкриває
і закінчує тег . У кожному рядку за допомогою тегів
і прописується кількість осередків.
Таким чином, код таблиці 2х2 буде виглядати таким чином:
Вставити таблицю в HTML-код сторінки можна, скопіювавши його з обраного редактора.
Параметри таблиць, рядків і осередків
Отже, базовий код ми розібрали.Тепер поговоримо про те, як поліпшити таблицю, зробити його яскравішим і привабливішим. Для цього потрібно знати основні параметри тегів. Вони прописуються всередині відкриває тега, при цьому після кожного параметра ставиться знак рівності, а потім прописується його значення, взяте в лапки. Наприклад, фон в таблиці HTML задається так:
.
Перерахуємо кілька основних параметрів, які будуть найбільш корисні для вас. Почнемо з самої таблиці.
Так, задати ширину кордону допоможе параметр border, який може приймати будь-яке числове значення. Колір кордону задає bordercolor. Загальний фон задає bgcolor.
Якщо ж ви хочете зробити фоном таблиці малюнок, використовуйте background, при цьому вам слід прописати URL малюнка.
Вирівняти вміст сторінки навколо таблиці допоможе параметр align, який може приймати значення left, center і right.
Задати заголовок допоможе парний тег
, який прописується відразу після відкриває тега
.
Трохи про параметри рядка.Колір осередків в рядку задається за допомогою bgcolor. Вирівнювання тексту по горизонталі можна зробити за допомогою параметра align (left, center або ж right), по вертикалі - valign (приймає значення top, middle або bottom).
Відносно осередку можна відзначити, що колір фону і фоновий малюнок задається для неї за допомогою тих же параметрів, що і для всієї таблиці. Вирівняти текст можна за допомогою параметрів align і valign.
Є й особливі параметри - colspan і rowspan.За допомогою першого можна задати кількість стовпців, на які буде сягати осередок. Другий же задає кількість рядків, на які ця група може сягати.
Ось і все найбільш корисні параметри.
Таблиця кольорів
Скажімо кілька слів про таку корисну річ, яктаблиця кольорів. З її допомогою задається фон сторінки, колір тексту, посилань і інших елементів. Таблиця кольорів містить близько 216 кольорів і відтінків. Кожен з них має свій шістнадцятковий код.
Сам код починається зі знака решітки і міститьтри пари цифр або букв. Наприклад, зелений колір в таблиці має код # 007F0. Кожна пара позначає інтенсивність одного з трьох основних кольорів - червоного, зеленого і синього. Використовуючи таблицю, можна вибрати потрібний вам колір і задати його за допомогою коду.
У разі якщо у вас немає можливості скористатися таблицею, можна задати колір за допомогою його назви англійською мовою.
вміст
Кілька слів про сам вмісті.Звичайно ж, найбільш часто ми можемо побачити текст у таблиці HTML, але це не означає, що тільки його ми і можемо туди помістити. Осередки і рядки можуть містити також малюнки, аудіо та відеофайли, посилання.
Для того щоб помістити текст або будь-яку іншу інформацію в клітинку (рядок), слід прописати її між двома тегами. Наприклад:
ім'я . В осередку відобразиться «Ім'я».
Помістити графічну інформацію і медіафайли можна за допомогою спеціальних тегів - ,
Поради
Наостанок дамо кілька корисних порад, які допоможуть вам швидко створити в HTML таблицю будь-якої складності.
При написанні таблиці радимо спочатку прописатисамі теги таблиці і основні її параметри. Потім пропишіть теги рядків. Кожну пару починайте з нового рядка. Так ви будете бачити, скільки рядків у вашій таблиці. Також пропишіть параметри рядка або рядків, якщо вони відрізняються від основних. Потім радимо починати прописувати кожну клітинку, також з нового рядка. Причому бажано робити один або два відступу Tab від краю. Таким чином, ви будете досить чітко бачити структуру коду.
Вміст осередків і рядків радимо прописувати вже в самому кінці, коли каркас таблиці готовий.
