Поточний час:
Сьогодні 25 вересня, понеділок 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 9 місяців 6 днів

Ваш ip адрес:54.162.181.75

Добрий вечір!
Ви обновили сторінку в 21 : 53
Статистика

Кількість публікацій на блозі: 365
Кількість коментарів на блозі: 100
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Post_116Привіт всім на Zura-Blog, продовжую публікувати пости які в першу чергу будуть корисні тим веб–майстрам, які лише починають робити свої перші кроки в веб–дизайні.

Сьогодні мова піде про те як додати фон до таблиці,  і взагалі створити красиву таблицю з кольоровими ячейками.

Красива, мається на увазі сам вигляд таблиці, який має бути оформлений  красиво в кольорах.

В цій публікації я для прикладу візьму таблиці які уже створені на Zura-Blog, передивляючись свої попередні сторінки, в мене виникла їдея додати до таблиць фон кольору. А також мова в статті піде і про те,  як створити таблицю на HTML–сторінці.

Для cms WordPress  існують  спеціальні плагіни для створення таблиць, обовязково ще протестую один з плагінів, а також напишу публікацію про такий плагін, але коли вже присутнє якесь поняття в html, php і т д,  тоді для того щоб впоратись з таким завданням як додати фон до таблиць, можна обійтись і без плагінів. Не має сенсу встановлювати лишні плагіни, кожен погодиться чим плагінів менше тим краще для ресурсу.

Розпочну з таблиць які вже створенні на Zura-Blog, щойно перейшовши на сторінку “HTML” в мене виникла ідея надати таблицям кольоровий фон, і взагалі якомога красивіше їх оформити. Для цього потрібно зробити зміни в коді, і мати при собі деякі інструменти.

Точніше один інструмент, це програма яка повинна визначати код кольору, про таку програму присутні матеріали на блозі в публікації “Визначаємо код кольору в програмі HTML Colors 2000”. Програма називається HTML Colors 2000, можливо вона має трошки меншу функціональність від своїх скажем так програм конкурентів, але основну потрібну мені функцію вона виконує, це визначити HTML–код кольору.  

Отже як зробити фон для таблиці,  в редакторі cms WordPress відкриваємо сторінку або публікацію на якій присутня таблиця. В панелі вибираємо режим “Текст”, там нам потрібні коди які визначають таблицю. 

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

Наприклад

<table style=”height: 356px;” width=”561″ >

до розмірів додається атрибут який визначає колір фрну “bgcolor” а в лапках потрібно вказати код кольору.

Получиться

<table style=”height: 356px;” width=”561″ bgcolor=”#BBE3F2″>

Як підібрати колір в програмі  HTML Colors 2000?

Потрібно клацнути на кнопку “scrin” і навести на любий колір який вам подобається на моніторі, клацнути лівою клавшою миші, код кольору відобразиться в панелі, скопіювати код і вставити в місце рядка де знаходиться артибут bgcolor, в лапках вставляємо код кольору, після чого на таблиці появиться фон.

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

А тепер перейдем до другого питання цієї публікації, як створити таблицю, як додати фон до таблиці, і взагалі як зробити вид таблиці красивим.

Для початку потрібно вибрати місце на HTML–сторінці, таблицю слід розмістити між парними тегами “body”, а не в “head”, і не в футері. Коли ви місце вибрали далі будуть потрібні коди, вони знаходяться на Zura-Blog в публікації “Таблиці в HTML”, а також на сторінці “HTML” в головному меню можна знайти потрібні атрибути, перйти можна клацнувши кнопку сторінки з  назвою “HTML”, клацаємо на кнопку в головному меню, і переходимо на сторінку, там розміщені “Основні елементи HTML” серед яких шукаемо розділ  “Елементи для списків і таблиць”

Таблиця починається з  тегу <table>, це тег парний, отже він повинен закриватись </table>. Потім між цими тегами потрібно вставити інші спеціальними теги і атрибути, які потрібні для побудови таблиці.

Що нам на початку потрібно це виставити  розмір  таблиці, тут головне щоб ширина таблиці не перевищувала ширину тіла сторінки, для цього  розміри потрібно мати під рукою, або знати їх, або мати інструмент який визначає розміри в пікселях. Далі відкриваємо  HTML–редактори adobe dreamveawear або notepad++, цього разу я попрацюю з notepad++.

Першим ділом прописуємо габарити таблиці

<table border=”10″ bgcolor=”#00ff00″ align=”center” height=”120″ width=”100″>

border=”10″ — товщина рамки “10” може бути значно менша.

bgcolor=”#00ff00″ — це колір фону таблиці, завдяки йому колір нашої таблиці “Зелений”

align=”center” — атрибут який вказує що таблиця на сторінці повинна відображатись в “Центрі” а не зліва чи справа, якщо зліва то вказуємо “left” замість “center” якщо справа то вказуємо “right” замість “center”

height=”120″ width=”100″ — це розміри таблиці довжина і ширина.

<tr><th>Сайт</th><th>Тіц</th><th>Ранк</th><th>Посилання</th><th>Зареєструвався</th><th>Коментарі</th></tr>

<tr></tr>— ці теги означають рядок для таблиці,  між ними будуть розміщені теги <th></th> це кількість стовбців. Слова “Сайт” “Тіц” “Ранк” “Посилання” “Зареєструвався”, для них створим фон, щоб було видно що це заголовки, фон рядка створюємо в тезі <tr>

<tr bgcolor= “#FFFFFF″>— звернули мабуть увагу що фон у нас вийшов не білого кольору чому питання, тому що ми в основному тезі “table” прописали уже фон bgcolor=”#00ff00″ (зелений) і фон змішався з кольором рядка  bgcolor= “#FFFFFF″ і став світло голубий, щоб фон став білим потрібно видалити фон в тегу “table” видалити фон bgcolor=”#00ff00″.

tabl6

фон у нас вийшов не білого кольору

Якщо у вас таблиця має бути з різними кольорами рядків, а також деякі ячейки мають відрізнятись в кольорах, тоді звісно колір в основному тезі не прописуєте. Власне щоб виділити основний рядок можна залишити попередню комбінацію, тоді в нас фон буде зеленого кольору, а основні значення світлосинього, а можна видалити фон основного кольору  в тегу  “table” а втегу “tr” прописати колір. <tr bgcolor= “#FFFFFF″>

Зараз для прикладу я пропишу шість рядків, рядки прописуються тегами <tr></tr>, отже потрібно по вертикалі прописати шість тегів <tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

Тепер між цими тегами потрібно прописати теги ячейок, вони бувають двох видів

Теги <th></th> — текст виділений жирним шрифтом, в основному застосовують для заголовку таблиці, в даний момент вони в нас вже прописані.  Також застосовують якщо виникає необхідність виділити дані в якийсь ячейці жирним шрифтом.

Теги <td></td>— в ній текст виділений звичайним, не жирним шрифтом, також призначений для збереження даних ячейки таблиці. Оскільки заголовок в нас присутній, всі дані прописувати жирним шрифтом не потрібно, тому тепер прписуємо ці теги, оскільки в нас є шість заголовків  “Сайт” “Тіц” “Ранк” “Посилання” “Зареєструвався” “Коментарі” тому прописуємо шість тегів <td></td> по горизонталі.

<tr><td></td><td></td><td></td><td></td><td></td></tr>

В нас появиться шість чистих ячейок які потрібно заповнити даними.

Давайте заповняти перше поле “Сайт” вказуємо “Zura-Blog” між першими тегами прописуємо слово  <td>Zura-Blog</td>, і в нас відобразиться назва сайту в першій ячейі. Правда вигляд не ахті так як текст не вміщується в ячейку, тому зараз заберемо ширину в тегу “table” і в нас всі значення автоматично будуть вміщуватись в ячейку (розтягуючи ячейку)

tabl1

⇑текст не вміщується в ячейку

⇓тому зараз заберемо ширину в тегу “table”

tabl2

Тепер друге поле “Тіц” на моему блозі він 10 тому зробимо щоб ця ячейка відрізнялась від інших, щоб виділялась потрібно зробити символ жирним, для цього поміняємо теги <td></td> на <th></th> в ячейці, це один з прикладу де застосовують теги “th”, застосували чудово 10–ка тепер виділяється жирною, далі потрібно надати ячейці фон, наприклад червоний.  В тегу “th” прописуємо атрибут bgcolor= “” який має відповідати за колір фону, в лапках вказуємо код кольору.

tabl3

надати ячейці фон червоний

Далі ті самі дії, заповнюємо даними третє поле, четверте, пяте, шосте.   “Ранк” “Посилання” “Зареєструвався” “Коментарі”. Потім наступний рядок з тегів “tr” і з ячейок теги “td” і для якоїсь особливої ячейки на котрій ви хочити розмістити жирний текст тег “th” 

<tr><td>Zura-Blog</td><th bgcolor= “#FF3300”>10</th><td>0</td><td>http://ruszura.in.ua</td><td>Es</td><td>Recomendation</td></tr>

tabl4

Получилось але потрібно ще  зробити як слід, це значення “0” і “Es” розмістити  в центрі ячейки. Як це зробити, в тегах в яких розміщені ці значення прописати атрибут align=”center”<td align=”center”>Es</td> <td align=”center”>0</td> Ось і отримали результат.

tabl5

отримали результат

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

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

До зустрічі. 

Leave a Reply

Your email address will not be published. Required fields are marked *