Tabulas centrēšanai izmanto 2 pamatmetodes: ar tega <TABLE> parametra align palīdzību vai ar stilu izmantošanu. Sākumā apskatīsim metodi, balstītu tikai uz HTML. Tā būtība ir vienkārša — tegam <TABLE> pievienojam parametru align ar vērtību center, kā redzams zīmējumā.
Piemērs 1. HTML izmantošana
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tabula pārlūka loga centrā</title>
</head>
<body>
<table align="center" width="300" border="1">
<tr>
<td>Балбес</td>
<td>Бывалый</td>
</tr>
<tr>
<td>Трус</td>
<td>Шурик</td>
</tr>
</table>
</body>
</html>
Piemēra rezultāts
Pievērsiet uzmanību, ka tiek izmantots pārejas DOCTYPE variants, pretējā gadījumā kods nebūs valīds.
Tomēr ērtāks ir tabulas centrēšanas veids, kas balstīts uz stiliem. Šajā gadījumā selektoram TABLE jāuzstāda atribūts margin ar vērtību 0 auto. Arguments nozīmē, ka vertikālās atkāpes ir līdzvērtīgas nullei, bet abās malās tiek izskaitļotas automātiski. Konkrētajā gadījumā tas noved pie tabulas centrēšanas.
Piemērs 2. CSS izmantošana
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tabula pārlūka loga centrā</title>
<style type="text/css">
TABLE {
width: 300px; /* Tabulas platums */
border: 1px solid green; /* Rāmis ap tabulu */
margin: 0 auto; /* Izlīdzinām tabulu loga centrā */
}
TD {
text-align: center; /* Izlīdzinām tekstu šūnas centrā */
}
</style>
</head>
<body>
<table>
<tr>
<td>Балбес</td>
<td>Бывалый</td>
</tr>
<tr>
<td>Трус</td>
<td>Шурик</td>
</tr>
</table>
</body>
</html>
Piemēra rezultāts.
