Colspan și Rowspan Tabel HTML
Celulele de tabel se pot întinde pe mai mult de un rând și/sau o coloană.
Tabel HTML - Colspan
Pentru a face o celulă să se întindă pe mai multe coloane, folosiți atributul colspan.
Notă: Valoarea lui colspan este numărul de coloane pe care se întinde.
Exemplu
O celulă de antet care se întinde pe două coloane.
Prompt
Un tabel în care un antet Name se întinde pe două coloane folosind colspan=2, plus un antet Age, urmat de două rânduri de date (Jill Smith 43, Eve Jackson 57).
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colspan</title>
</head>
<body>
<table>
<tr>
<th colspan="2">Nume</th>
<th>Vârstă</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
</body>
</html>
Tabel HTML - Rowspan
Pentru a face o celulă să se întindă pe mai multe rânduri, folosiți atributul rowspan.
Notă: Valoarea lui rowspan este numărul de rânduri pe care se întinde.
Exemplu
O celulă care se întinde pe două rânduri.
Prompt
Un tabel în care un antet Phone se întinde pe două rânduri folosind rowspan=2, cu un rând Name (Jill) și două numere de telefon (555-1234 și 555-8745).
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rowspan</title>
</head>
<body>
<table>
<tr>
<th>Nume</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Telefon</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
</body>
</html>