Центриране на таблица с CSS

Понякога таблиците използвани в web страниците имат нужда от центриране в самите страници. Старият начин да се направи това беше:

 <table align="center"> </table>

Но атрибута “align” вече е премахнат от новите стандарти за HTML.

Ако се опитате да центрирате таблицата чрез използването на CSS “text-align: center;” както в случая:

 <table style="text-align:center;">

или пък чрез:

 <div style="text-align:center;"> <table> </table> </div>

няма да имате успех, таблицата ще продължава да е центрирана от ляво на страницата, единствено нейното съдържание ще бъде центрирано спрямо нея.

Ако се питате защо се получава така, ами много просто: защото свойството “text-align” оказва въздействие на вътрешното съдържание на елемента за който е зададено, а не за самият елемент спрямо неговия родител.

Ето един начин да направите центрирана таблица в CSS кода.
 table.center{
margin-left:auto;
margin-right:auto;
}

Разбира се Вашия HTML трябва да изглежда така:

 <table class="center"> </table>

Ако се използва този случай браузъри като  Mozilla и Opera ще центрират таблицата, но за съжаление Internet Explorer версиите от 5.5 и нагоре, ще се нуждаят от допълнителен CSS код:

 body {text-align:center;}
Има и друг начин да направите центрирането на таблицата.

Това става чрез използването на проценти и на CSS свойството “width”

 table.center { 
width:70%;
margin-left:15%;
margin-right:15%;
}
Може да използвате и друг CSS трик

Ако искате Вашата таблица да бъде с точно фиксиране дължина (100px) , използвайте следния CSS код:

 div.container{
width:98%;
margin:1%;
}
table.center{
text-align:center;
margin-left:auto;
margin-right:auto;
width:100px;
}
tr,td{
text-align:left;
}

“text-align: center” се използва специално за Internet Explorer, който няма да работи правилно без това свойство. За съжаление в този случай “text-align: center” ще центрира съдържанието на всички клетки в таблицата, но ние предотвратяваме това като настройваме елементите “tr” и “td” да бъдат подравнени в ляво.

Вашия HTML трябва да бъде като този:

 <div class="container">
<table class="center">
</table>
</div>

Надявам се да съм бил полезен при центрирането на Вашите таблици.

2 thoughts on “Центриране на таблица с CSS

Leave a Reply

Your email address will not be published. Required fields are marked *