Latest web development tutorials

Tabela CSS (tabela)

Zastosowanie CSS może znacznie poprawić wygląd tabel HTML.

spółka kontakt kraj
Alfreds Futterkiste Maria Anders Niemcy
Berglunds snabbkop Christina Berglund Szwecja
Centro Comercial Montezumy Francisco Chang Meksyk
Ernst Handel Roland Mendel Austria
Wyspa Trading Helen Bennett UK
Koniglich Essen Philip Cramer Niemcy
Śmiejąc Bacchus Winecellars Yoshi Tannamuri Kanada
Magazzini Alimentari Riuniti Giovanni Rovelli Włochy
Północ / Południe Simon Crowther UK
SPECIALITES Paryż Marie Bertrand Francja
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Dania

Tabela Granicznej

Określa granice tabeli CSS, użyj właściwości obramowania.

Poniższy przykład określa tabelę Th oraz pierwiastków TD czarną obwódką:

Przykłady

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

Spróbuj »

Zauważ, że w powyższym przykładzie, tabela ma podwójne obramowanie. To dlatego, że tabela i th / td elementy mają oddzielne granice.

Aby wyświetlić pojedynczą klatkę z tabeli, należy użyć właściwości border-collapse.

Składana rama

atrybut border-collapse określić, czy granice tabeli są zwinięte w jednej granicy lub rozdzielone:

Przykłady

stół
{
border-collapse: collapse;
}
stół, th, td
{
border: 1px solid black;
}

Spróbuj »


Szerokość stołu i wysokość

Szerokość i wysokość atrybuty określają szerokość i wysokość stołu.

Poniższy przykład jest ustawiona na 100% szerokości stołu wysokość 50 pikseli th element:

Przykłady

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

Spróbuj »


wyrównanie tekstu Formularz

Tabela wyrównanie tekstu i pionowe właściwości wyrównania.

Właściwość text-align jest ustawiony poziomo, jak wyrównanie lewej, prawej lub centrum:

Przykłady

td
{
text-align:right;
}

Spróbuj »

Vertical-align własności pionowe wyrównanie ustawienia, takie jak góra, dół, lub w środku:

Przykłady

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

Spróbuj »


wypełnienie formularza

Jeżeli przestrzeń pomiędzy kontroli granicznej w spisie treści, należy użyć atrybutu wypełnienia i td elementy th:

Przykłady

td
{
padding:15px;
}

Spróbuj »


tabela kolorów

Poniższy przykład określa kolor obramowania, i Th elementy tekstu i kolor tła:

Przykłady

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

Spróbuj »


Przykłady

Więcej przykładów

Zrób formę spersonalizowaną
Ten przykład pokazuje, jak utworzyć formę spersonalizowaną.

Ustaw pozycję napisów stołowego
Ten przykład pokazuje jak ustawić nagłówek tabeli.