Chenare Tabel HTML
Tabelele HTML pot avea chenare de stiluri și forme diferite.
Cum Se Adaugă Un Chenar
Pentru a adăuga un chenar, folosiți proprietatea CSS border pe elementele table, th și td.
Exemplu
Un tabel cu chenar negru pe tabel și pe celule.
Prompt
Un tabel stilizat cu CSS astfel încât table, th și td au fiecare o bordură neagră solidă de 1px, cu un tabel exemplu cu companii.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Companie</th>
<th>Contact</th>
<th>Țară</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germania</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexic</td>
</tr>
</table>
</body>
</html>
Chenare de Tabel Îmbinate
Pentru a evita chenarele duble, setați proprietatea CSS border-collapse la collapse. Aceasta îmbină chenarele într-o singură linie.
Exemplu
Un tabel cu chenare îmbinate, cu o singură linie.
Prompt
Un tabel cu borduri negre solide de 1px și border-collapse setat la collapse, astfel încât bordurile duble se îmbină în linii simple.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Companie</th>
<th>Contact</th>
<th>Țară</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germania</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexic</td>
</tr>
</table>
</body>
</html>
Stilizarea Chenarelor de Tabel
Dacă dați fiecărei celule o culoare de fundal și faceți chenarul de aceeași culoare cu fundalul paginii, chenarele par invizibile.
Exemplu
Celule cu un fundal colorat și chenare albe potrivite.
Prompt
Un tabel unde bordurile sunt albe (asortate cu fundalul paginii) și fiecare celulă are un fundal colorat (#96D4D4), oferind aspectul unor borduri invizibile. Se folosește border-collapse collapse.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>
<body>
<table>
<tr>
<th>Companie</th>
<th>Contact</th>
<th>Țară</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germania</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexic</td>
</tr>
</table>
</body>
</html>
Chenare de Tabel Rotunjite
Proprietatea border-radius dă colțuri rotunjite chenarelor. Omiteți table din selector pentru a sări peste chenarul din jurul întregului tabel.
Tabel și celule rotunjite
Colțuri rotunjite pe tabel și pe celule.
Prompt
Un tabel cu borduri negre solide de 1px și colțuri rotunjite folosind border-radius 10px pe table, th și td.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Companie</th>
<th>Contact</th>
<th>Țară</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germania</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexic</td>
</tr>
</table>
</body>
</html>
Doar celule rotunjite
Colțuri rotunjite doar pe celule, fără chenar exterior pe tabel.
Prompt
Un tabel unde doar celulele (th și td) au borduri negre rotunjite de 1px, omițând elementul table astfel încât bordura exterioară a tabelului este omisă.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Companie</th>
<th>Contact</th>
<th>Țară</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germania</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexic</td>
</tr>
</table>
</body>
</html>
Chenare de Tabel Punctate
Proprietatea border-style setează cum arată chenarul. Valorile permise sunt: dotted, dashed, solid, double, groove, ridge, inset, outset, none și hidden.
Exemplu
Celule cu chenar punctat.
Prompt
Un tabel ale cărui celule folosesc o bordură punctată prin proprietatea border-style setată la dotted pe th și td.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
th, td {
border-style: dotted;
}
</style>
</head>
<body>
<table>
<tr>
<th>Companie</th>
<th>Contact</th>
<th>Țară</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germania</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexic</td>
</tr>
</table>
</body>
</html>
Culoarea Chenarului
Proprietatea border-color setează culoarea chenarului.
Exemplu
Celule cu chenare colorate.
Prompt
Un tabel ale cărui borduri de celule sunt colorate în #96D4D4 folosind proprietatea border-color pe th și td.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
th, td {
border-color: #96D4D4;
}
</style>
</head>
<body>
<table>
<tr>
<th>Companie</th>
<th>Contact</th>
<th>Țară</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germania</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexic</td>
</tr>
</table>
</body>
</html>