Lățimea Tabelului CSS
Proprietatea width setează lățimea unui tabel. Poate fi un procent (%), o lungime fixă (px) sau cuvântul cheie auto.
Lățimea Tabelului CSS în Procent
Pentru a face un tabel să ocupe toată lățimea, folosiți width: 100%. Pentru a-l face să ocupe jumătate din pagină, folosiți width: 50%.
Lățime completă
Tabelul ocupă întreaga lățime a paginii.
Prompt
O pagină HTML cu un tabel de lățime completă.
Într-un bloc intern
<style>, dați table/th/td un bordur solid de 1px unit și setați lățimea tabelului la 100%. 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, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: 100%;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</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>
Jumătate de lățime
Tabelul ocupă jumătate din lățimea paginii.
Prompt
O pagină HTML cu un tabel de jumătate de lățime.
Într-un bloc intern
<style>, dați table/th/td un bordur solid de 1px unit și setați lățimea tabelului la 50%. 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, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: 50%;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</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>
Lățimea Tabelului CSS cu o Lățime Fixă
Pentru a face un tabel de o lățime fixă, folosiți o lungime precum width: 500px.
Exemplu
Tabelul are o lățime fixă de 500px.
Prompt
O pagină HTML cu un tabel de lățime fixă.
Într-un bloc intern
<style>, dați table/th/td un bordur solid de 1px unit și setați lățimea tabelului la 500px. 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, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: 500px;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</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>
Lățimea Tabelului CSS Folosind auto
Folosiți width: auto pentru a lăsa browserul să dimensioneze tabelul după conținutul său.
Exemplu
Lățimea tabelului este setată la auto.
Prompt
O pagină HTML cu un tabel a cărui lățime este setată la auto.
Într-un bloc intern
<style>, dați table/th/td un bordur solid de 1px unit și setați lățimea tabelului la auto, astfel încât browserul să îl dimensioneze după conținut. 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, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: auto;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</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>
Înălțimea Tabelului CSS
Proprietatea height setează înălțimea unui tabel. Poate fi un procent (%), o lungime fixă (px) sau cuvântul cheie auto.
Exemplu
Anteturilor tabelului li se dă o înălțime fixă de 70px.
Prompt
O pagină HTML care setează o înălțime fixă pentru anteturile tabelului.
Într-un bloc intern
<style>, dați table/th/td un bordur solid de 1px unit și setați înălțimea <th> la 70px. 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, th, td {
border: 1px solid;
border-collapse: collapse;
}
th {
height: 70px;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</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>