Alinierea Orizontală
Pentru a alinia pe orizontală conținutul unui <th> sau <td>, setează text-align la left, right sau center.
Notă: Fără nicio stilizare, conținutul <td> este aliniat la stânga, iar conținutul <th> este centrat.
CSS text-align: center
text-align: center plasează conținutul elementelor <td> în centru.
Exemplu
Aici, conținutul elementelor <td> este centrat.
Prompt
O pagină HTML care aliniază la centru conținutul celulelor tabelului.
Într-un bloc intern
<style>, dați table/th/td un bordur solid de 1px unit și setați td text-align la center. 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;
}
td {
text-align: center;
}
</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>
CSS text-align: left
Conținutul elementelor <th> se mută la stânga după ce aceste elemente primesc text-align: left.
Exemplu
În loc să fie centrat, conținutul <th> stă la stânga.
Prompt
O pagină HTML care aliniază la stânga conținutul antetului tabelului.
Într-un bloc intern
<style>, dați table/th/td un bordur solid de 1px unit și setați th text-align la left (anteturile sunt aliniate la centru implicit). 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 {
text-align: left;
}
</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>
Alinierea Verticală
Pentru a alinia conținutul pe verticală într-un <th> sau <td>, de exemplu sus, jos sau la mijloc, folosește vertical-align.
Notă: Atât <th>, cât și <td> își aliniază implicit conținutul la mijloc.
Exemplu
Cu o înălțime setată pe elementele <td>, conținutul lor poate sta în partea de jos.
Prompt
O pagină HTML care aliniază vertical la partea de jos conținutul celulelor.
Într-un bloc intern
<style>, dați table/th/td un bordur solid de 1px unit și dați td o înălțime de 50px cu vertical-align bottom. 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;
}
td {
height: 50px;
vertical-align: bottom;
}
</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>