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

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

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

Ваш ip адрес:54.224.18.114

Доброго дня!
Ви обновили сторінку в 18 : 26
Статистика

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

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

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

Це може бути наприклад “База трастових сайтів”, де потрібно вказувати сайт, біля сайту його позицію, скажімо ТИЦ и пейдж ранк.

Раніше, коли ще не існувало СSS, всі сайти створювали каркас, на основі таблиць

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

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

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

Для того щоб вивести рамку, потрібно добавити атрибут border= “”  а в лапках цифрою вказати товщину рамки. Далі можна додавати ще  атрибути, які визначають:

колір рамки таблиці

колір фону таблиці

вирівнювання таблиці

висоту і ширину таблиці

Для того щоб таблиця була в рамці додаємо атрибут border

<table border= “1” ></table>— для того щоб таблиця була в рамці, без рамки дані будуть просто виведені  без таблиці. число 1– визначає ширину рамки таблиці. (можна 2 або 3 і т.д.), чим більше число тим більша ширина рамки.

Визначає колір рамки таблиці атрибут  bordercolor

<table border= “1” bordercolor= “#00ff00” ></table>визначає колір рамки таблиці

Визначає колір фону таблиці атрибут  bgcolor

<table border= “10” bgcolor= “#00ff00” ></table>— визначає колір фону таблиці

Вирівнювання таблиці визначає атрибут align

<table border= “10” bgcolor= “#00ff00”  align= “center” >— визначає вирівнювання таблиці. (по замовчуванню таблиця по лівому краю)

Висоту і ширину таблиці визначають height і width

<table border= “10”  align= “center”  height= “120” width=  “220”  >— визначає висоту і ширину таблиці. (числа можуть бути іншими).

60а

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

До речі кому не зрозуміло значення “Артибут” можна прочитати в публікації “Поняття атрибути в HTML” за посиланням 

Наприклад таблиця  6х9.

Отже 6-рядків і 9-стовпців. Рядки створюються з тегу <tr></tr>. Записуємо шість тегів для того щоб у нас появилось шість рядків.

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

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

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

Атрибут COLSPAN призначений для обєднання ячейок по горизонталі. Наприклад нам потрібно помістити три значення в одну ячейку.

Для цього записуємо в ячейку атирбути COLSPAN= “3” , і в лапках значення три, (можна два або чотири залежно скільки значень потрібно прописати в ячейці).

Нижче наведений на картинці приклад розташування трьох значень colorschemer.com, gravatar  і saite в ячейках.

обєднання ячейок по горизонталі використовуємо атрибут colspan

<table border= “6” bordercolor= “#ff0000” >
<tr><th>GOOGLE</th><th>yandex</th><th>ahawks</th><th>seo-mayak</th><th>intensedebate</th><th> colspan= “3” >colorschemer.com gravatar saiter</th></tr></table>

61a

⇑по горизонталі

Атрибут ROWSPAN— призначений для обєднання ячейок по вертикалі. Наприклад нам потрібно помістити три значення в одну ячейку по вертикалі.

Для цього записуємо в ячейку атирбути ROWSPAN = “3” , і в лапках значення три, (можна більше, або менше все  залежить від того  скільки значень потрібно прописати в ячейці).

обєднання ячейок по вертикалі використовуємо атрибут  rowspan

<tr><td rowspan= “3”>100 150 282</td></tr>— 100 150 282 значення обєднанні в одну ячейку

62а

⇑по вертикалі

 колір фону ячейки

<tr><td rowspan= “3” bgcolor=”#00ff00“>100 150 282</td></tr>— колір фону ячейки

 

вирівняє всі значення ячейки по центру

<tr align= “center” ></tr>— вирівняє всі значення ячейки по центру.

Всі інші атрибути і теги для створення таблиці можна передивитись перейшовши за цим посиланням  http://ruszura.in.ua/html.html

Leave a Reply

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