CSS+-+Табели


 * Претходно: ** CSS - Листи ** Почеток: ** CSS Туторијал **Следно:** CSS - Користена литература

Изгледот на HTML табела може да биде значително подобрен со CSS:

Ивици на табелата
За дефинирање на ивиците во CSS, користете со својството border. Примерот подолу дефинира црна ивица за табелата, th и td елементите:

table, th, td

{ border: 1px solid black; }

Забележете дека табелата во прмерот погоре има дупли ивици. Ова е затоа што и двата и табелата и th/td елементите имаат одделни ивици. За прикажување на една ивица за табелата, користете го border-collapse својството.

**Криење не ивиците**

Ова својство дефинира дали ивиците на табелата ќе бидат прикажани како една ивица или одделни:

table {

border-collapse:collapse; } table,th, td { border: 1px solid black; }

Ширина и висина на табелата
Ширината и висината на табелата е дефинирано со својството width (ширина)и height (висина). Примерот подолу дефинира ширина на табелата до 100%, и висината на th елементите до 50px:

table

{ width:100%; } th { height:50px; }

Позиција на текстот во табелата
Текстот во табелата е позициониран со text-algin и vertical-algin својствата. Својството за позиционирање на текстот ја дефинира хоризонталната позиција, како лево, десно или центрирано:

td

{ text-align:right; }

Својството за вертикално позиционирање ја дефинира вертикалната позиција, како горна, долна или средна:

td

{ height:50px; vertical-align:bottom; }

Поставување на табелата
За контролирање на местото помеѓу ивицата и содржината во табелата, користете го padding својството на td и th елементите:

td { padding:15px; }



Боја на табелата
Примерот подолу ја дефинира бојата на ивиците, бојата на текстот и бојата на позадината на th елементите:

table, td, th

{ border:1px solid green; } th { background-color:green; color:white; }


 * Претходно: ** CSS - Листи ** Почеток: ** CSS Туторијал **Следно:** CSS - Користена литература