Ultimele tutoriale de dezvoltare web
 

CSS Mese

❮ precedent Capitolul următor ❯

Aspectul unui tabel HTML poate fi mult îmbunătățită cu CSS:

Companie a lua legatura Țară
Alfreds Futterkiste Maria Anders Germania
Berglunds snabbkop Christina Berglund Suedia
Centro Comercial Moctezuma Francisco Chang Mexic
Ernst Handel Roland Mendel Austria
Insula Trading Helen Bennett Regatul Unit
Koniglich Essen Philip Cramer Germania
Râzând Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italia

Tabelul frontiere

Pentru a specifica chenarele tabelului în CSS, utilizați border proprietate.

Exemplul de mai jos specifica un chenar negru pentru <table> , <th> si <td> elemente:

Exemplu

table, th, td {
   border: 1px solid black;
}
Încearcă - l singur »

Observați că tabelul din exemplul de mai sus are granițe duble. Acest lucru se datorează faptului că atât masa și <th> si <td> elemente au granițe separate.

Collapse Tabelul Frontiere

De border-collapse proprietatea stabilește dacă frontierele de masă ar trebui sa prăbușit într - o singură frontieră:

Exemplu

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
Încearcă - l singur »

Dacă doriți doar un chenar în jurul mesei, să specifice numai de border de proprietate pentru <table> :

Exemplu

table {
    border: 1px solid black;
}
Încearcă - l singur »

Tabelul Lățime și Înălțime

Lățimea și înălțimea unui tabel sunt definite de width și height proprietăți.

Exemplul de mai jos stabilește lățimea mesei la 100%, iar înălțimea <th> elemente 50px:

Exemplu

table {
    width: 100%;
}

th {
    height: 50px;
}
Încearcă - l singur »

Aliniere orizontala

text-align proprietate setează alinierea orizontală (like left, right, or center) la <th> <td> (like left, right, or center) a conținutului în <th> sau <td> .

În mod implicit, conținutul <th> elemente centru-aliniate și conținutul <td> elemente sunt aliniate la stânga.

Următorul exemplu de stânga aliniază textul în <th> elemente:

Exemplu

th {
    text-align: left;
}
Încearcă - l singur »

Aliniere verticală

vertical-align proprietate setează alinierea verticală (like top, bottom, or middle) de <th> <td> (like top, bottom, or middle) de (like top, bottom, or middle) din (like top, bottom, or middle) a conținutului în <th> sau <td> .

Implicit, alinierea verticală a conținutului într - un tabel este de mijloc (pentru ambele <th> si <td> elemente).

Exemplul următor stabilește alinierea textului vertical în jos pentru <td> elemente:

Exemplu

td {
    height: 50px;
    vertical-align: bottom;
}
Încearcă - l singur »

Tabelul Padding

Pentru a controla spațiul dintre frontieră și conținutul într - un tabel, utilizați padding proprietatea pe <td> si <th> elemente:

Exemplu

th, td {
    padding: 15px;
    text-align: left;
}
Încearcă - l singur »

Divizoare orizontale

Nume Numele de familie economie
Petru Grifon $ de 100
Lois Grifon $ 150 de
Joe Swanson $ 300 de

Adăugați border-bottom proprietatea de a <th> si <td> pentru separatoare orizontale:

Exemplu

th, td {
    border-bottom: 1px solid #ddd;
}
Încearcă - l singur »

Tabelul Hoverable

Utilizați :hover selectorul pe <tr> pentru a evidenția rânduri de masă pe mouse - ul peste:

Nume Numele de familie economie
Petru Grifon $ de 100
Lois Grifon $ 150 de
Joe Swanson $ 300 de

Exemplu

tr:hover {background-color: #f5f5f5}
Încearcă - l singur »

tabelele Striped

Nume Numele de familie economie
Petru Grifon $ de 100
Lois Grifon $ 150 de
Joe Swanson $ 300 de

Pentru tabele cu dungi-zebră, folosiți nth- child() selectorul și se adaugă o background-color de (or odd) background-color pentru toate chiar (or odd) rânduri de masă:

Exemplu

tr:nth-child(even) {background-color: #f2f2f2}
Încearcă - l singur »

Tabelul de culoare

Exemplul de mai jos specifica culoarea de fundal și culoarea textului <th> elemente:

Nume Numele de familie economie
Petru Grifon $ de 100
Lois Grifon $ 150 de
Joe Swanson $ 300 de

Exemplu

th {
    background-color: #4CAF50;
    color: white;
}
Încearcă - l singur »

Tabelul Sensibilă

Un tabel receptiv va afișa o bară de defilare orizontală în cazul în care ecranul este prea mic pentru a afișa întregul conținut:

Nume Numele de familie puncte puncte puncte puncte puncte puncte puncte puncte puncte puncte puncte puncte
Jill fierar 50 50 50 50 50 50 50 50 50 50 50 50
ajun Jackson 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67

Adăugați un element container (like <div> ) cu overflow-x:auto în jurul <table> elementul pentru a face receptiv:

Exemplu

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Încearcă - l singur »
Exemple

Mai multe exemple

Asigurați - un tabel de fantezie
Acest exemplu demonstrează modul de a crea un tabel de fantezie.

Setați poziția legenda tabel
Acest exemplu demonstrează modul în care să poziționeze titlul de masă.

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»

Proprietăți CSS Tabelul

Proprietate Descriere
border Setează toate proprietățile de frontieră într-o singură declarație
border-collapse Specifică dacă este sau nu frontierele de masă ar trebui sa prăbușit
border-spacing Specifică distanța dintre marginile celulelor adiacente
caption-side Specifică plasarea unui tabel de legendă
empty-cells Specifică dacă se afișează sau nu frontiere și de fundal pe celulele goale într-un tabel
table-layout Setează algoritmul de aspect care urmează să fie utilizat pentru un tabel

❮ precedent Capitolul următor ❯