Ако сте начинаещ уеб дизайнер, може да имате въпроси относно това как да центрирате текста в клетката на таблицата. С това ръководство владейте тази техника само за няколко минути. Това е лесно - дори ако никога не сте се опитвали преди това.
Приготвяме се да започнем
Центрирането на текст в клетката е най-добре направено с CSS, точно както ще центрирате текста в друг елемент на вашата уеб страница. Преди да започнете обаче, трябва да решите какво точно искате да бъдете центрирано. С масата имате няколко опции, включително всяка клетка в таблицата; всяка клетка на заглавката в таблицата на всяка клетка в главата на таблицата, тялото на таблицата или стъпалото на таблицата. Можете също да центрирате конкретна клетка или набор от клетки в таблицата.
Освен това, трябва да създадете вътрешен лист с стилове в главата на документа или приложен към документа като външен лист с стилове . Ще сложите стиловете, за да центрирате клетките си в таблицата със стилове.
Как да центрирате всяка клетка в таблицата
Добавете следните линии към стиловия лист:
td, th {текст-подравняване: център; }Как да центрирате всяка клетка за заглавия в таблицата
Добавете следните линии към стиловия лист:
ти {текст-подравняване: център; }Центриране на всяка клетка в главата, тялото или краката на таблицата
За да центрирате тези клетки, трябва да добавите таблични маркери, които не винаги се използват, като ,
и . След това ще обградите клетките на масата с тези маркери, за да идентифицирате главата, тялото и стъпалата на масата. След това ще добавите следното към вашия стилов лист: thead th, thead, td {text-align: center; } tbody th, tbody td {текст-подравняване: център; } tfoot th, tfoot td {текст-подравняване: център; }Премахнете стиловете за зоните, които не искате да бъдат центрирани.
Как да центрирате конкретна клетка или клетки в таблица
За да направите това, трябва да зададете клас на клетките, които искате да бъдат центрирани.
Добавете следния атрибут към клетките на таблицата, които искате да бъдат центрирани:
След това добавете следното към листа стил:
.centered-cell {text-align: center; }Можете да добавите този клас към всяка клетка в таблицата си.
Обобщавайки
Не се колебайте да използвате тези стилове на която и да е от вашите таблични клетки. Можете да ги използвате в обединени клетки или в отделни клетки, а текстът в тях ще бъде центриран.