Tabele CSS
Tabelele HTML pot fi îmbunătățite considerabil cu CSS.
Exemplu
Un tabel stilizat cu borduri unite, padding, rânduri alternante și un antet colorat.
<style>, uniți bordurile tabelului, faceți-l lat cât toată pagina, dați th/td borduri deschise la culoare și padding cu text aliniat la stânga, umbriți rândurile pare cu gri deschis și dați rândului de antet un fundal verde cu text alb. Adăugați un tabel cu coloanele Companie, Contact, Țară și câteva rânduri.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<table>
<tr><th>Company</th><th>Contact</th><th>Country</th></tr>
<tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr>
<tr><td>Berglunds snabbkop</td><td>Christina Berglund</td><td>Sweden</td></tr>
<tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr>
<tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr>
</table>
</body>
</html>
Bordurile Tabelului CSS
Proprietatea border setează lățimea, stilul și culoarea bordurilor tabelului.
Este o prescurtare pentru border-width, border-style (obligatoriu) și border-color.
Exemplu
Un bordur solid de 1px este setat pe elementele <table>, <th> și <td>.
<style>, dați elementelor <table>, <th> și <td> un bordur solid de 1px. Adăugați un tabel mic cu un rând de antet și două rânduri de date.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
Culoarea Bordurii Tabelului CSS
Puteți seta și culoarea bordurilor tabelului.
Exemplu
Un bordur verde solid de 1px este setat pe elementele table, th și td.
<style>, dați elementelor <table>, <th> și <td> un bordur verde solid de 1px. Adăugați un tabel mic cu un rând de antet și două rânduri de date.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid green;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
De Ce Borduri Duble?
În exemplele de mai sus, tabelele au borduri duble. Acest lucru se întâmplă deoarece elementele <table>, <th> și <td> au fiecare propriile borduri separate. Exemplul următor arată cum să le eliminați.
Unirea Bordurilor Tabelului CSS
Proprietatea border-collapse setează dacă bordurile tabelului se unesc într-un singur bordur sau rămân separate, ca în HTML standard.
Poate lua aceste valori:
separate— valoarea implicită. Fiecare celulă își afișează propriile borduri.collapse— bordurile se unesc într-un singur bordur acolo unde este posibil.
Exemplu
Setarea border-collapse: collapse elimină bordurile duble.
<style>, dați table, th și td un bordur solid de 1px și setați border-collapse al tabelului la collapse, astfel încât bordurile duble să se unească într-una singură. Adăugați un tabel mic.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
Padding-ul Tabelului CSS
Pentru a controla spațiul dintre bordur și conținutul celulelor, utilizați proprietatea padding pe elementele <td> și <th>.
Exemplu
Fiecare celulă primește 10px de padding.
<style>, dați table/th/td un bordur solid de 1px cu borduri unite, iar th și td 10px de padding. Adăugați un tabel cu coloanele Prenume, Nume și Economii și câteva rânduri.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
Spațierea Bordurilor CSS
Proprietatea border-spacing setează distanța dintre bordurile celulelor vecine.
Notă: Aceasta funcționează doar când border-collapse este setat la separate.
Exemplu
Celulele sunt spațiate la 15px distanță.
<style>, dați table/th/td un bordur solid de 1px, iar pe tabel setați border-collapse la separate și border-spacing la 15px. Adăugați un tabel mic.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
}
table {
border-collapse: separate;
border-spacing: 15px;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
Bordura Exterioară a Tabelului CSS
Dacă doriți doar un bordur în jurul tabelului și nu în interiorul lui, setați proprietatea border doar pe elementul <table>.
Exemplu
Doar tabelul are un bordur; celulele nu.
<style>, dați doar elementului <table> un bordur solid de 1px (fără bordur pe th sau td). Adăugați un tabel mic.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border: 1px solid;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>