HTML CSS Windows Photoshop
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header

haber

-

Uçak bileti

-  Avtor: -primož-    06.12.09
Tabele in CSS               
CSS vodiči

css_tabele_thumb
S CSSjem je urejanje Tabel in HTML elementom nasploh veliko bolj enostavneje, kot s HTML atributi, zato sem spisal vodič, ki vam predstavi CSS kode, s katerimi lahko dodobra uredite tabelo. Obdelali bomo barvo besedila, obrobo, odmike, ozadje, postavitev besedila itd. itd.

 

 

 

Urejanje tabel s CSSjem



HTML postavitev tabele


Tabela je sestavljena iz 4 različnih značk.
<table> in </table> definirata tabelo.
<tr> in </tr> definirata vrstico.
<td> in </td> definirata stolpec.
<th> in </th> definirata naslov stolpca.


HTML koda:

<html>
<head></head>
<body>

<table>
<tr>
<th>Ime</th>
<th>Priimek</th>
</tr>
<tr>
<td>Janez</td>
<td>Novak</td>
</tr>
<tr>
<td>France</td>
<td>Krajnc</td>
</tr>
</table>

</body>
</html>

PRIKAZ HTML tabele


Kot lahko vidite sta besedi "Ime" in "Priimek" avtomatsko odebeljeni in postavljeni na sredino, saj predstavljata naslova vrstic.


Širina in višina tabele


Širino tabele nadziramo z width: , višino tabele pa s height: .


HTML in CSS koda:

<html>
<head>

<style type="text/css">

table{
width: 300px;
height: 300px;
}

</style>

</head>
<body>

<table>
<tr>
<th>Ime</th>
<th>Priimek</th>
</tr>
<tr>
<td>Janez</td>
<td>Novak</td>
</tr>
<tr>
<td>France</td>
<td>Krajnc</td>
</tr>
</table>

</body>
</html>

PRIKAZ tabele z določeno širino in višino


Obroba tabele


Obrobo določimo tabeli z border: velikost vrsta barva; . Obrobo lahko določimo celotni tabeli, posameznim celicam, vsem celicam, posamezni vrstici ...

HTML in CSS koda:

<html>
<head>

<style type="text/css">

table{
border: 1px solid #3399ff;
}

th{
border: 2px dotted #ff9900;
}

td{
border: 1px solid #3399ff;
}

</style>

</head><body>

<table><tr>
<th>Ime</th>
<th>Priimek</th>
</tr><tr>
<td>Janez</td>
<td>Novak</td>
</tr><tr>
<td>France</td>
<td>Krajnc</td>
</tr></table>

</body></html>

PRIKAZ tabele z obrobami

Katere stile obrob lahko uporabite si lahko ogledate na seznamu obrob.


Kot lahko opazite je med obrobami razmik. Tega razmika se znebite, če tabeli določite border-collapse: collapse; , kar pomeni, da se obroba prelevi v enojno obrobo.


HTML in CSS koda:

<html>
<head>

<style type="text/css">

table{
border-collapse: collapse;
}

th{
border: 1px dotted #ff9900;
}

td{
border: 1px solid #3399ff;
}

</style>

</head><body>

<table><tr>
<th>Ime</th>
<th>Priimek</th>
</tr><tr>
<td>Janez</td>
<td>Novak</td>
</tr><tr>
<td>France</td>
<td>Krajnc</td>
</tr></table>

</body></html>

PRIKAZ tabele z enojno obrobo


Posamezni celici lahko določite obrobo s pomočjo razredov (določite class="").


HTML in CSS koda:

<html>
<head>

<style type="text/css">

td.obroba{
border: 1px solid #3399ff;
}

</style>

</head><body>

<table><tr>
<th>Ime</th>
<th>Priimek</th>
</tr><tr>
<td>Janez</td>
<td>Novak</td>
</tr><tr>
<td class="obroba">France</td>
<td>Krajnc</td>
</tr></table>

</body></html>

PRIKAZ obrobljene celice


Barva besedila v tabeli


Barvo besedila določimo s color: barva;


HTML in CSS koda:

<html>
<head>

<style type="text/css">

table{
color: #ff0000;
}

</style>

</head><body>

<table><tr>
<th>Ime</th>
<th>Priimek</th>
</tr><tr>
<td>Janez</td>
<td>Novak</td>
</tr><tr>
<td>France</td>
<td>Krajnc</td>
</tr></table>

</body></html>

PRIKAZ tabele z rdečim besedilom


Postavitev besedila v tebeli


Besedilo lahko v celici orientiramo glede na horizontalo in vertikalo. Horizontalno postavitev nadziramo s text-align: ; , vertikalno postavitev pa z vertical-align: ; .

Za text-align: lahko uporabimo left, right, center in justify.

Za vertical-aling: lahko uporabimo top, bottom, middle (in še nekaj drugih).



HTML in CSS koda:

*obroba je dodana, za lepšo ponazoritev.

<html>
<head>

<style type="text/css">

table{
width: 200px;
height: 300px;
}

td{
text-align: center;
vertical-align: bottom;
border: 1px solid #3399ff;
}

</style>

</head><body>

<table><tr>
<th>Ime</th>
<th>Priimek</th>
</tr><tr>
<td>Janez</td>
<td>Novak</td>
</tr><tr>
<td>France</td>
<td>Krajnc</td>
</tr></table>

</body></html>

PRIKAZ postavitve besedila


Padding in margin


Tukaj vam bom prikazal kodo za padding v celicah, se pravi odmik česarkoli znotraj celice od robov celice. Margin koda pa bo prikazala odmik celotne tabele od česarkoli, okoli te tabele, v mojem primeru zgornji in levi rob brskalnika.

Podrobneje o Paddingu in Marginu si lahko preberete v vodiču CSS kode!

<html>
<head>

<style type="text/css">

table{
margin: 100px;
}

td{
padding-left: 100px;
border: 1px solid #3399ff;
}

</style>

</head><body>

<table><tr>
<th>Ime</th>
<th>Priimek</th>
</tr><tr>
<td>Janez</td>
<td>Novak</td>
</tr><tr>
<td>France</td>
<td>Krajnc</td>
</tr></table>

</body></html>

PRIKAZ odmikov v tabeli in okoli tabele


Ozadje


Za ozadje lahko določimo sliko ali barvo in sicer z backgroud: barva; ali background: PotDoSlike;


HTML in CSS koda:

<html>
<head>

<style type="text/css">

table{
background: #3399ff;
}

</style>

</head><body>

<table><tr>
<th>Ime</th>
<th>Priimek</th>
</tr><tr>
<td>Janez</td>
<td>Novak</td>
</tr><tr>
<td>France</td>
<td>Krajnc</td>
</tr></table>

</body></html>

PRIKAZ barvnega ozadja tabele


HTML in CSS koda:


<html>
<head>

<style type="text/css">

table{
background: url(ozadje.gif);
}

</style>

</head><body>

<table><tr>
<th>Ime</th>
<th>Priimek</th>
</tr><tr>
<td>Janez</td>
<td>Novak</td>
</tr><tr>
<td>France</td>
<td>Krajnc</td>
</tr></table>

</body></html>


PRIKAZ slikovnega ozadja tabele


Več o slikah v ozadju.


S CSSjem veliko hitreje urejamo tabelo in njene celice, poleg tega pa s HTML atributi ne moremo tako lahko dobiti takih obrob, kot jih dobimo s CSSjem. S HTMLjem ne moremo tako dobro nadzirati vseh odmikov, kot to lahko storimo s CSSjem, poleg tega pa HTML koda izgleda veliko lepša in preglednejša, kakor bi bila, če bi vsebovala vse tiste atribute za barvo besedila, odmike, ozadje itd. itd.

 

Uporabljajte CSS!


Komentiraj:
Ime
E-mail
Spletna stran

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."
 
Sorodni vodiči

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

 

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé, Čokolada

Follow us on Twitter
Follow us on Twitter
Follow us on Twitter

Oglasi