Dimensiuni Tabel HTML
Tabelele HTML pot avea dimensiuni diferite pentru fiecare coloană, fiecare rând sau întregul tabel. Folosiți atributul style cu proprietățile width sau height pentru a seta dimensiunea unui tabel, rând sau coloană.
Lățimea Tabelului HTML
Pentru a seta lățimea unui tabel, adăugați atributul style la elementul <table>.
Notă: O lățime dată ca procent este relativă la elementul părinte, care aici este <body>.
Exemplu
Un tabel setat la lățime de 100%.
Prompt
Un tabel setat la 100% lățime folosind atributul style pe elementul table, cu un rând de antet Firstname/Lastname/Age și două rânduri de date (Jill Smith 50, Eve Jackson 94).
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>Lățime Tabel</title>
</head>
<body>
<table style="width:100%">
<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>
Lățimea Coloanei Tabelului HTML
Pentru a seta lățimea unei singure coloane, adăugați atributul style la un <th> sau <td> din acea coloană.
Exemplu
Prima coloană setată la lățime de 70%.
Prompt
Un tabel lat de 100% în care prima coloană este setată la 70% lățime folosind atributul style pe primul th, cu aceleași date Firstname/Lastname/Age.
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>Lățime Coloană</title>
</head>
<body>
<table style="width:100%">
<tr>
<th style="width:70%">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>
Înălțimea Rândului Tabelului HTML
Pentru a seta înălțimea unui singur rând, adăugați atributul style la acel element <tr>.
Exemplu
Al doilea rând setat la o înălțime de 200 de pixeli.
Prompt
Un tabel lat de 100% în care al doilea rând este setat la o înălțime de 200 de pixeli folosind atributul style pe acel tr, cu aceleași date Firstname/Lastname/Age.
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>Înălțime Rând</title>
</head>
<body>
<table style="width:100%">
<tr>
<th>Prenume</th>
<th>Nume</th>
<th>Vârstă</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>