Predmetová komisia ELT a INF

Učebnica CSS - Tabuľky

CSS - Basic - Table

« Predchádzajúca Ďalšia kapitola »

Pozrite sa na tabuľku v HTML ktorá je výrazne lepšia s pomocou CSS:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark

Orámovanie tabuľky

Ak chcete určiť orámovanie tabuľky v CSS, použite vlastnosť ohraničenia.

Nižšie uvedený príklad robí čierny okraj pre tabuľkové th, td prvky

Príklad

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

Vyskúšajte si to »

Všimnite si, že v tabuľke vo vyššie uvedenom príklade má dvojité orámovanie. Dôvodom je, že obe tabuľky, ročník a td elementy majú oddelené ohraničenia.

Ak chcete zobraziť jedino ohraničenie pre tabuľku, použite border - collapse ".

Border - collapse vlastnosť určuje, či orámovanie tabuľky sa spojí do jedného ohraničenia alebo bude oddelené

Príklad

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

Vyskúšajte si to »

Šírka a výška tabuľky

Šírka a výška tabuľky je definovaná v šírke a výške vlastnosti.

Nižšie uvedený príklad nastaví šírku tabuľky na 100 % a výšku th prvky na 50px

Príklad

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

Vyskúšajte si to »

Tabuľka Zarovnanie textu

Text v tabuľke je v súlade s hodnotou text - align a vlastnosťou vertical - align.

Text - align vlastnosť nastavuje horizontálne zarovnanie rovnako ako vľavo, vpravo, alebo na stred:

Príklad

td
{
text-align:right;
}

Vyskúšajte si to »

Vertical - align vlastnosť nastavuje vertikálne zarovnanie rovnako ako hore, dole, alebo do stredu:

Príklad

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

Vyskúšajte si to »

Tabuľka Odsadenie

Ak chcete ovládať priestor medzi hranicou a obsahom v tabuľke, použite obsah vlastnosti na td a th prvky:

Príklad

td
{
padding:15px;
}

Vyskúšajte si to »

Tabuľka farby

Nižšie uvedený príklad určuje farbu orámovania, a textu a farbu pozadia th prvkov:

Príklad

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

Vyskúšajte si to »

Ďalšie príklady

Vytvorenie efektnej tabuľky
Tento príklad ukazuje, ako vytvoriť efektné tabuľky.

Nastaviť pozíciu titulku v tabuľke
Tento príklad ukazuje, ako v tabuľke nadefinovať nadpis.

« Predchádzajúca Ďalšia kapitola »