Použití tabulek při navrhování webových stránek je vzrušující úkol. Ve výchozím nastavení je zarovnání tabulky směrem doleva, ale pomocí okraj vlastnost v CSS , můžeme ji zarovnat na střed.

Pokud nastavíme hodnotu okraj-levý a okraj-pravý na auto , pak prohlížeče zobrazí tabulku vycentrovanou. Můžeme použít těsnopisnou vlastnost okraj a nastavte jej na auto pro zarovnání stolu na střed místo použití okraj-levý a okraj-pravý vlastnictví.

0,04 jako zlomek

Namísto zarovnání tabulky na střed, text-align: center; vlastnost pouze vycentruje obsah tabulky, jako je text uvnitř tabulky.

Pojďme to pochopit pomocí ilustrace.

Příklad

V tomto příkladu používáme text-align: center; vlastnost k vystředění obsahu uvnitř tabulky a okraj-levý: auto; a pravý okraj: auto; pro vycentrování stolu.

tabulka římských číslic 1 100

 table, th, td { border: 1px solid black; margin-left: auto; margin-right: auto; border-collapse: collapse; width: 500px; text-align: center; font-size: 20px; } <table class="table"> <tr> <th>First_Name</th> <th>Last_Name</th> <th>Subject</th> <th>Marks</th> </tr> <tr> <td>James</td><td>Gosling</td><td>Maths</td><td>92</td> </tr> <tr> <td>Alan</td><td>Rickman</td><td>Maths</td><td>89</td> </tr> <tr> <td>Sam</td><td>Mendes</td><td>Maths</td><td>82</td> </tr> </table> 

Výstup