Användningen av tabeller i utformningen av en webbplats är en spännande uppgift. Som standard är justeringen av en tabell åt vänster, men genom att använda marginal egendom i CSS, vi kan anpassa den i centrum.

Om vi ​​sätter värdet på marginal-vänster och marginal-höger till bil , sedan visar webbläsarna tabellen centrerad. Vi kan använda stenografiegenskapen marginal och ställ in den på bil för att rikta bordet i mitten istället för att använda marginal-vänster och marginal-höger fast egendom.

lyssna port

Istället för att rikta bordet till mitten, text-align: center; egenskapen centrerar bara tabellinnehållet, till exempel texten i tabellen.

Låt oss förstå detta genom att använda en illustration.

Exempel

I det här exemplet använder vi text-align: center; egenskap för att centrera innehållet i tabellen och marginal-vänster: auto; och margin-right: auto; för att centrera bordet.

js settimeout

 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> 

Produktion