Padding-ul Tabelului CSS
Pentru a adăuga spațiu între bordurile celulelor și conținut, folosiți proprietatea padding pe elementele <td> și <th>.
Exemplu
Fiecare celulă primește 10px de padding și text aliniat la stânga.
Prompt
O pagină HTML care adaugă padding și aliniere la stânga celulelor tabelului.
Într-un bloc intern
<style>, uniți bordurile tabelului, faceți-l pe toată lățimea și dați th și td 10px de padding cu text aliniat la stânga. Adăugați un tabel cu coloanele Prenume, Nume, Economii și câteva rânduri.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 10px;
text-align: left;
}
</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>
Separatoare Orizontale CSS
Pentru a adăuga linii de separare orizontale între rânduri, adăugați un border-bottom la elementele <th> și <td>.
Exemplu
Un bordur inferior pe fiecare celulă creează separatoare de rânduri.
Prompt
O pagină HTML care adaugă linii de separare orizontale între rândurile tabelului.
Într-un bloc intern
<style>, uniți bordurile tabelului, faceți-l pe toată lățimea, dați th și td padding și adăugați un bordur inferior (1px solid #ddd) la th și td, astfel încât fiecare rând să aibă o linie de separare. Adăugați un tabel cu coloanele Prenume, Nume, Economii și câteva rânduri.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</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>
Tabel CSS cu Efect la Trecerea Mouse-ului
Folosiți selectorul :hover pe <tr> pentru a evidenția un rând atunci când mouse-ul trece peste el.
Exemplu
Fiecare rând devine coral atunci când treceți mouse-ul peste el.
Prompt
O pagină HTML care evidențiază un rând de tabel atunci când mouse-ul trece peste el.
Într-un bloc intern
<style>, uniți bordurile tabelului, faceți-l pe toată lățimea, dați th și td padding și separatoare inferioare și adăugați o regulă tr:hover care setează un fundal coral. Adăugați un tabel cu coloanele Prenume, Nume, Economii și câteva rânduri.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: coral;
}
</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>
Tabel CSS Dungat Tip Zebră
Pentru dungi tip zebră, folosiți selectorul nth-child() și dați fiecărui rând par (sau impar) o culoare de fundal.
Exemplu
Fiecare rând par primește un fundal gri deschis.
Prompt
O pagină HTML cu un tabel dungat tip zebră.
Într-un bloc intern
<style>, uniți bordurile tabelului, faceți-l pe toată lățimea, dați th și td padding și aliniere la stânga și umbriți fiecare rând par cu un fundal gri deschis folosind tr:nth-child(even). Adăugați un tabel cu coloanele Prenume, Nume, Economii și câteva rânduri.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</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>
Culoarea Tabelului CSS
Puteți seta o culoare de fundal și o culoare de text pentru tabel, de exemplu pe elementele <th>.
Exemplu
Celulele de antet primesc un fundal verde și text alb.
Prompt
O pagină HTML cu un antet de tabel colorat.
Într-un bloc intern
<style>, uniți bordurile tabelului, faceți-l pe toată lățimea, dați th și td padding și aliniere la stânga, și dați elementelor th un fundal verde (#04AA6D) cu text alb. Adăugați un tabel cu coloanele Prenume, Nume, Economii și câteva rânduri.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #04AA6D;
color: white;
}
</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>