<table align=\"center\"><\/code><\/pre>\nJednak wyr\u00f3wnywanie tabel w ten spos\u00f3b nie jest ju\u017c poprawne i zosta\u0142o wycofane w HTML5. Dzieje si\u0119 tak dlatego, \u017ce wsp\u00f3\u0142czesne standardy sieciowe dyktuj\u0105 rozdzia\u0142 struktury (HTML) i stylu (CSS), a powy\u017csza metoda narusza t\u0119 zasad\u0119.<\/p>\n
HTML nigdy nie powinien by\u0107 u\u017cywany do ustawiania sposobu wy\u015bwietlania elementu; to jest teraz zadanie CSS. Jaki jest wi\u0119c w\u0142a\u015bciwy spos\u00f3b wy\u015brodkowania tabeli w CSS?<\/a> W tym artykule naszego zespo\u0142u wpDataTables zajmiemy si\u0119 tym pytaniem i poka\u017cemy kilka wskaz\u00f3wek, jak prawid\u0142owo wyr\u00f3wna\u0107 tabele.<\/p>\nWiemy co nieco o sto\u0142ach, bior\u0105c pod uwag\u0119, \u017ce stworzyli\u015bmy niesamowit\u0105 wtyczk\u0119 do WordPressa<\/a>, wi\u0119c zag\u0142\u0119bimy si\u0119 w szczeg\u00f3\u0142y.<\/p>\nJak mog\u0119 u\u017cy\u0107 CSS do wy\u015brodkowania tabeli?<\/h3>\n
CSS okre\u015bla wygl\u0105d strony, umo\u017cliwiaj\u0105c kontrol\u0119 wygl\u0105du i po\u0142o\u017cenia ka\u017cdego elementu, w tym elementu tabeli i wszystkich jego element\u00f3w podrz\u0119dnych, takich jak th, tr i td.<\/p>\n
Po pierwsze, przejd\u017amy do \u201ew\u0142a\u015bciwego" sposobu wy\u015brodkowania tabeli za pomoc\u0105 CSS. Je\u015bli prawy i lewy margines maj\u0105 tak\u0105 sam\u0105 warto\u015b\u0107, nowoczesne przegl\u0105darki powinny wy\u015bwietla\u0107 tabel\u0119 wy\u015brodkowan\u0105. Prostym sposobem na osi\u0105gni\u0119cie tego jest ustawienie obu margines\u00f3w na auto.<\/p>\n
Przyk\u0142ad, jak to napisa\u0107 w CSS, znajduje si\u0119 poni\u017cej:<\/p>\n
table<\/code><\/pre>\nPami\u0119taj, \u017ce nie mo\u017cesz po prostu wy\u015brodkowa\u0107 tabeli w taki sam spos\u00f3b, jak w przypadku tekstu \u2014 np. za pomoc\u0105 \u201etext-align: center”. Dzieje si\u0119 tak, poniewa\u017c element tabeli jest elementem blokowym, a nie elementem \u015br\u00f3dliniowym. -align: center” wy\u015brodkuje tylko zawarto\u015b\u0107 liniow\u0105, tak\u0105 jak tekst w tabeli, a nie sam\u0105 tabel\u0119.<\/p>\n
Jednak w starszych wersjach Internet Explorera wyst\u0119puje b\u0142\u0105d, w kt\u00f3rym elementy blokowe s\u0105 traktowane jako elementy wbudowane. Dlatego jedynym sposobem na wy\u015brodkowanie tabeli do pracy z niekt\u00f3rymi wersjami IE jest jawne ustawienie \u201etext-align: center” na elemencie nadrz\u0119dnym tabeli (np. elemencie body, jak pokazano poni\u017cej):<\/p>\n
body {<\/code><\/pre>\nMo\u017cesz przetestowa\u0107, jak r\u00f3\u017cne przegl\u0105darki b\u0119d\u0105 si\u0119 zachowywa\u0107 w r\u00f3\u017cnych stylach, u\u017cywaj\u0105c opcji \u201emargin-left: auto; margines do prawej: auto” lub \u201etext-align: center”.<\/p>\n
Om\u00f3wimy, jak wy\u015brodkowa\u0107 tabel\u0119 zar\u00f3wno w nowoczesnych, jak i starszych przegl\u0105darkach, aby wygl\u0105da\u0142a dobrze.<\/p>\n
Przyk\u0142ady b\u0119d\u0105 mia\u0142y nast\u0119puj\u0105cy og\u00f3lny format:<\/p>\n
<div>\n\n<table>\n\n<\/table>\n\n<\/div><\/code><\/pre>\nStyle s\u0105 stosowane do obu<\/p>\n
,<\/p>\n
a czasem jedno i drugie.<\/p>\n
Sekcja arkusza styl\u00f3w, z kt\u00f3r\u0105 b\u0119dziemy si\u0119 bawi\u0107, aby ustawi\u0107 marginesy, to:<\/p>\n
.center1<\/code><\/pre>\nTen przyk\u0142ad b\u0119dzie dzia\u0142a\u0142 dobrze w nowszych przegl\u0105darkach. B\u0119dzie r\u00f3wnie\u017c dzia\u0142a\u0107 na wi\u0119kszo\u015bci starszych przegl\u0105darek. Po u\u017cyciu tej metody otw\u00f3rz j\u0105 w r\u00f3\u017cnych przegl\u0105darkach, aby sprawdzi\u0107, jak wygl\u0105da.<\/p>\n
CSS dla starszych i nowszych przegl\u0105darek razem:<\/p>\n
.centertbl<\/code><\/pre>\nJak to dzia\u0142a? Pierwsza cz\u0119\u015b\u0107 trafia do<\/p>\n
. Spowoduje to wy\u015brodkowanie tabeli w Internet Explorer 5 i Netscape 4. Druga cz\u0119\u015b\u0107 zostanie zastosowana do<\/p>\n
w granicach<\/p>\n
.<\/p>\n
Ustawienia margines\u00f3w pozwol\u0105 Ci wy\u015brodkowa\u0107 tabel\u0119 w przegl\u0105darkach, kt\u00f3re dobrze wsp\u00f3\u0142pracuj\u0105 z CSS. Nast\u0119pnie tekst w wierszu zostanie przywr\u00f3cony do domy\u015blnego wyr\u00f3wnania do lewej, zast\u0119puj\u0105c pocz\u0105tkowe \u201etext-align: center” dla obs\u0142ugi starszych przegl\u0105darek.<\/p>\n
Jak centrowa\u0107 z marginesem<\/h3>\n
Jednym z najcz\u0119stszych sposob\u00f3w wy\u015brodkowania tabeli jest ustawienie margines\u00f3w dolnego i g\u00f3rnego na 0, a lewego i prawego na auto.<\/p>\n
Oto powszechnie stosowana metoda:<\/p>\n
table {<\/code><\/pre>\nLub mo\u017cesz to zrobi\u0107 w ten spos\u00f3b:<\/p>\n
table {<\/code><\/pre>\nJe\u015bli szukasz tabeli o dok\u0142adnej szeroko\u015bci, mo\u017cesz to zrobi\u0107 tak, jak zwykle, a automatyczny margines podzieli pozosta\u0142\u0105 przestrze\u0144.<\/p>\n
table {<\/code><\/pre>\nInnym sposobem na to jest u\u017cycie procent\u00f3w do zdefiniowania szeroko\u015bci:<\/p>\n
table {<\/code><\/pre>\nWyr\u00f3wnanie kom\u00f3rek: text-align vs. vertical-align<\/h3>\n
Je\u015bli chcesz wiedzie\u0107, jak wy\u015brodkowa\u0107 tekst w CSS, wyr\u00f3wnywanie tekstu w kom\u00f3rce sk\u0142ada si\u0119 z dw\u00f3ch cz\u0119\u015bci; poziomo i pionowo. Poziomo okre\u015bla, czy tekst zostanie wyr\u00f3wnany do \u015brodka, do lewej lub do prawej strony tej kom\u00f3rki. Jest to kontrolowane przez w\u0142a\u015bciwo\u015b\u0107 text-align.<\/p>\n
Pionowo okre\u015bla, czy znajduje si\u0119 w \u015brodku, na g\u00f3rze czy na dole kom\u00f3rki. Jest to kontrolowane przez w\u0142a\u015bciwo\u015b\u0107 vertical-align.<\/p>\n
Stosujesz poni\u017csze w\u0142a\u015bciwo\u015bci do elementu TH lub TD, aby tekst by\u0142 wyr\u00f3wnany w pionie i poziomie, jak chcesz. Na przyk\u0142ad:<\/p>\n
td {\ntext-align: center;\nvertical-align: top;\n}<\/code><\/pre>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-201255-61e8be3d0713d.jpg\")
<\/a><\/p>\nJustowanie tekstu odnosi si\u0119 do dodawania spacji mi\u0119dzy wszystkimi s\u0142owami, a\u017c idealnie zmieszcz\u0105 si\u0119 w przestrzeni dost\u0119pnej na linii. Ostatnia linia nie uzasadnia.<\/p>\n
Wskaz\u00f3wki dotycz\u0105ce stylizacji sto\u0142u<\/h3>\n
Zanim zako\u0144czymy, pomy\u015bleli\u015bmy, \u017ce przydatne mo\u017ce by\u0107 posiadanie listy kr\u00f3tkich wskaz\u00f3wek do odniesienia. Pomog\u0105 one przy tworzeniu tabeli w CSS.<\/a><\/p>\n\n- U\u0142\u00f3\u017c swoje<\/li>\n<\/ul>\n
,<\/p>\n
, oraz<\/p>\n
. Daje to r\u00f3wnie\u017c wi\u0119cej cz\u0119\u015bci, w kt\u00f3rych mo\u017cesz zastosowa\u0107 CSS. U\u0142atwia to nak\u0142adanie wielu styl\u00f3w na warstwy.<\/p>\n
\n- Korzystanie z uk\u0142adu tabeli<\/a> u\u0142atwia ustawianie szeroko\u015bci kolumn. Po ustawieniu szeroko\u015bci nag\u0142\u00f3wka szeroko\u015b\u0107 kolumny b\u0119dzie taka sama.<\/li>\n
- U\u017cyj naprzemiennych kolor\u00f3w, aby \u0142atwiej by\u0142o czyta\u0107 tabel\u0119. W szybkim skanowaniu mo\u017cesz zobaczy\u0107, jakie informacje znajduj\u0105 si\u0119 w tym samym wierszu.<\/li>\n
- Niech Tw\u00f3j st\u00f3\u0142 b\u0119dzie prosty. Mo\u017cesz u\u017cy\u0107 warto\u015bci procentowych, wi\u0119c nie musisz za ka\u017cdym razem zmienia\u0107 rozmiaru.<\/li>\n
- Mo\u017cesz u\u017cy\u0107 funkcji zwijania obramowania, aby uzyska\u0107 czystszy i schludniejszy wygl\u0105d sto\u0142u.<\/li>\n<\/ul>\n
Ko\u0144cowe my\u015bli o tym, jak wy\u015brodkowa\u0107 st\u00f3\u0142<\/h3>\n
Teraz wiesz, jak wy\u015brodkowa\u0107 tabel\u0119 za pomoc\u0105 CSS. Jak wspomniano, \u201ew\u0142a\u015bciwym” sposobem na zrobienie tego jest ustawienie margines\u00f3w prawego i lewego na auto. Ta metoda dzia\u0142a dla prawie wszystkich nowych przegl\u0105darek, kt\u00f3re dobrze wsp\u00f3\u0142pracuj\u0105 z CSS.<\/p>\n
W przypadku niekt\u00f3rych mniej nowoczesnych przegl\u0105darek to nie zadzia\u0142a. W takim przypadku mo\u017cesz wystylizowa\u0107 tabel\u0119 za pomoc\u0105 metody wyr\u00f3wnania tekstu i otoczy\u0107 j\u0105<\/p>\n
. Je\u015bli chcesz wy\u015brodkowa\u0107 tabel\u0119 za pomoc\u0105 wyr\u00f3wnania tekstu na zewn\u0105trz<\/p>\n
, mo\u017cesz to zrobi\u0107 za pomoc\u0105 wyr\u00f3wnania tekstu.<\/p>\n
Mo\u017cesz tak\u017ce nada\u0107 kom\u00f3rkom tabeli styl z warto\u015bci\u0105 wyr\u00f3wnania tekstu lub wyr\u00f3wnania w pionie, gdy chcesz umie\u015bci\u0107 tekst w wierszu w okre\u015blony spos\u00f3b.<\/p>\n
Je\u015bli podoba\u0142 Ci si\u0119 ten artyku\u0142 na temat wy\u015brodkowania tabeli za pomoc\u0105 CSS, powiniene\u015b zapozna\u0107 si\u0119 z tym artyku\u0142em o tabelach Bootstrap<\/a>.<\/p>\nPisali\u015bmy r\u00f3wnie\u017c o kilku powi\u0105zanych tematach, takich jak kolor t\u0142a tabeli<\/a>, tabele HTML<\/a>, tabele responsywne<\/a> z CSS, tabele CSS<\/a> i wtyczki tabel jQuery<\/a>.<\/p>\n
\n\n\noraz<\/span><\/span><\/td>\n tekst za pomoc\u0105 wyr\u00f3wnania tekstu. <\/span>Dzi\u0119ki temu b\u0119dzie wygl\u0105da\u0107 czy\u015bciej i czytelniej.<\/span><\/span><\/p>\n- Aby podzieli\u0107 st\u00f3\u0142 na cz\u0119\u015bci, kt\u00f3re maj\u0105 sens, mo\u017cesz u\u017cy\u0107<\/span><\/span><\/li>\n<\/th>\n<\/tr>\n<\/tbody>\n<\/tfoot>\n<\/tbody>\n<\/thead>\n<\/table>\n