Padding și Spacing Tabel HTML
Tabelele HTML pot ajusta padding-ul din interiorul fiecărei celule și spațiul dintre celule.
Tabel HTML - Padding pentru Celule
Padding-ul celulei este spațiul dintre marginile unei celule și conținutul ei. Implicit este 0. Adăugați padding cu proprietatea CSS padding. Puteți seta și fiecare parte separat cu padding-top, padding-bottom, padding-left și padding-right.
Toate părțile
15 pixeli de padding pe fiecare parte a celulelor.
Prompt
Un tabel cu borduri cu 15px de padding în interiorul tuturor celulelor folosind proprietatea CSS padding pe th și td, cu un tabel exemplu de companie.
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;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Prenume</th>
<th>Nume</th>
<th>Vârstă</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Fiecare parte
Padding diferit sus, jos, stânga și dreapta.
Prompt
Un tabel cu borduri care setează padding individual pe fiecare latură a celulelor: 10px sus, 20px jos, 30px stânga, 40px dreapta, cu un tabel exemplu.
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;
}
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Prenume</th>
<th>Nume</th>
<th>Vârstă</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Tabel HTML - Spațiere între Celule
Spațierea între celule este spațiul dintre celule. Implicit este 2 pixeli. Schimbați-o cu proprietatea CSS border-spacing pe elementul table.
Exemplu
30 de pixeli de spațiu între celule.
Prompt
Un tabel cu borduri cu 30px de spațiu între celule folosind proprietatea CSS border-spacing pe elementul table, cu un tabel exemplu.
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;
}
table {
border-spacing: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Prenume</th>
<th>Nume</th>
<th>Vârstă</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>