Початківцям вебмайстрам доводиться стикатися з безліччю проблем. Здавалося б, сьогодні вже можна використовувати для створення своїх сайтів шаблони, але от біда, далеко не завжди вони володіють потрібними властивостями, і тоді доводиться або створювати дизайн сайту з чистого аркуша, або ж вносити зміни у вже наявний код. Тут-то і знадобиться знання 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 від краю. Таким чином, ви будете досить чітко бачити структуру коду.
Вміст комірок і рядків радимо прописувати вже в самому кінці, коли каркас таблиці готовий.
При оформленні html-документа не слід забувати про такий важливий понятті, як форматування тексту. Завдяки йому текст буде виглядати акуратно і ефектно. Звичайно, завжди можна залишити форматування за замовчуванням. Але в такому випадку може вийти,…
Зведені таблиці є інтерактивним відображенням інформації, яка дозволяє користувачам аналізувати групи і великі обсяги даних в стислій, табличній формі для більш легкої звітності та аналізу. Однією з переваг зазначеної функції в Excel є те, що вона…
Wordpad - це програма обробки тексту, встановлена за замовчуванням на всіх версіях операційної системи Windows. У порівнянні з іншими редакторами зразок Word це дуже просте додаток без широкого розмаїття способів форматування і варіантів дизайну.…
Таблиці - одні з найбільш важливих, але в теж час складних елементів, які повинні бути присутніми на веб-сторінках. З їх допомогою зручно подавати важливу і корисну інформацію в досить стислій формі. Звичайно, більшість редакторів в шаблонах, що…
Оформляючи сайт, особливо розробляючи його дизайн з нуля, багато стикаються з такою проблемою, як розфарбовування сторінки сайту, таблиць, тексту. У багатьох конструкторах сайтів є спеціальні модулі і кнопки, за допомогою яких і задаються дані…
Напевно ви стикалися з таким поняттям як HTML-код. Чули від знайомих, бачили в меню свого браузера і т. П. Але що ж це таке? Давайте спробуємо з'ясувати, що це за код і з яких елементів він складається.Основні відомостіПочнемо з визначення. HTML-код…
Користувачі комп'ютера мають можливість полегшувати свою роботу за допомогою різних програм. Одні можуть використовуватися досить часто, другі - набагато рідше, але є програми, знання яких необхідно будь-якій освіченій людині. До таких програм можна…
Сторінки веб-сайтів складаються з багатьох елементів - таблиць, картинок, посилань, медіафайлів, списків. Одним з найбільш затребуваних елементів є як раз-таки список. З його допомогою можна упорядкувати інформацію, подати її в більш стислому і…
Часто у користувачів додатків Microsoft Office виникає необхідність перенесення широкоформатного таблиці з числовими даними, створеної в електронній таблиці MS Excel, в документ редактора текстових файлів MS Word. Наприклад, ви готуєте в ворде…
При оформленні тих чи інших текстів чи навіть таблиць веб-майстрам доводиться стикатися з такою проблемою, як оформлення червоних рядків, відступів в тексті. Здавалося б, все досить просто - скопіювати текст в потрібне поле, і відступи будуть…
Текстовий редактор від Microsoft став настільки звичним для російського користувача, що саме ім'я «Ворд» тепер носить мало не номінальною характер. В офісах, студентських бібліотеках, домашніх комп'ютерах обов'язково встановлений стандартний…
Текстовий редактор від Microsoft - зручний і багатофункціональний інструмент. Жодна інша програма не завоювала такої популярності, як Word. Ним користуються службовці, студенти і школярі. Саме вони без праці набирають текст, форматують його, малюють…
Якщо ви працюєте з редактором, який входить в загальний пакет Microsoft Office, тоді вам обов'язково потрібно знати, як в таблиці Excel додати рядок, так як це дія дуже часто потрібно при проведенні деяких операцій при редагуванні документа.…
Форматування тексту у форматі html
Як у «Ексель» зробити таблицю зведеного типу
Як зробити таблицю в Wordpad різними способами
Як зробити таблицю в HTML: докладний опис
Що таке таблиця кольорів HTML, і для чого вона потрібна?
HTML-код. Коди квітів HTML
Як вирівняти текст в "Ворді". Як вирівняти текст по вертикалі, ширині і по краях
Як зробити список в списку. HTML-посібник для початківців
Про те, як таблицю перенести з екселя в ворд
Червона строка.Оформляем відступ в HTML
Як зробити таблицю в "Ворді"? Просте питання, проста відповідь
Як у «Ворді» намалювати таблицю? Відповідь підкаже сама програма
Як в таблиці Excel додати рядок: докладна інструкція