Faq по створенню таблиці

Всі параметри записуємо виключно в тег
параметри:
align - вирівнювання в осередку по горизонталі.
- left (по лівому краю).
- right (по правому краю).
- center (по центру).
- justify (по ширині).

valign - вирівнювання в осередку по вертикалі.
- top (по верхньому краю).
- baseline (по лінії шрифту).
- baseline (по нижньому краю).

height - висота.
width - ширина.
bordercolor - колір кордону осередки.
bgcolor - колір фону комірки.
background - фон картинкою.

Тепер спробуємо створити просту таблицю, яка буде мати ось такий вигляд:

Отже, пишемо основний тег


Потім прописуємо два рядки:




А потім прописуємо в кожен рядок однакову кількість стовпців.
Отже тепер у нас весь код повинен виглядати ось так:

Для наочного прикладу, давайте в кожній клітинці зробимо що-небудь по іншому.
Отже, в першій ми поставимо фон іншого кольору.
Прописуємо в перший наш стовпець ось таке bgcolor = "# 008000"
І видем що фон у верхній лівій клітинці став зеленим.

Давайте в другому вирівняємо текст по верхньому правому краю: align = "right" valign = "top"
Пишемо будь-якої текст, і він у нас буде виравніватся по правому краю вгорі.

У наступній давайте змінимо ширину осередку (ВАЖЛИВО! Якщо міняєте ширину верхньої, також варто змінити параметри і тієї яка знаходиться під нашою осередком).
Тобто, пишемо в 3 тег верхнього рядка width = "400" і теж саме пишемо в 3 тег нижнього рядка.

Тепер давайте змінимо колір меж осередку.
Вибираємо якусь комірку, яку ми ще не калечелі :)
І пишемо туди bordercolor = "# FFFF00".
Тепер межа нашого осередку перефарбувалася в жовтий колір.

Отже, код нашої оздоблених таблиці буде виглядати приблизно ось так:












 рас рас 
   

Також можемо зробити так, щоб наприклад в таблиці було 2 рядки, але в одному з рядків був осередок в якій ще кілька рядків або стовпців.
Беремо всю тугіше нашу таблицю.
Припустимо, що в середньому осередку ми хочемо сдлеать ще 3 рядки, тоді в клітинку яка знаходиться зліва і праворуч від неї пишемо rowspan = "3".
Де 3 буде кількість додаткових рядків.
Якщо хочемо щоб були додаткові стовпці, тоді в осередку над нею, і під нею пишемо colspan = "2".
Де 2 буде кількість додаткових стовпців.

Отже, тепер код всього цього буде виглядати ось так:

Ну і останнє. Можемо порабоать над усією таблицею.
Тобто тепер всі будемо вставляти тільки сюди

.
Поставимо картинкою фон для всіх осередків де не вказані параметри фону.
Пишемо bgcolor = "# FF0000" і колір фону всієї таблиці змінився на червоний.

І останнє. Якщо ми хочемо зовсім прибрати кордони таблиці то пишемо ось таке border = "0" cellspacing = "0" cellpadding = "0".

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

Схожі статті