Jak správně naformátovat tabulku?

tester:
„1) jak nastavit pevnou výšku řádků, když bych odstranil tečky z prvního sloupce?“
Zadat buňce nebo řádku tabulky pevnou výšku, například:
Tabulkové buňky neumí výšku min-height, můžeš ji takto zadat bloku, který bude uvnitř buňky.

„2) jak vložit zalomení, aby tabulka a legenda byla vytištěna na jiné stránce?“
Pomocí CSS vlastnosti Page-break-after.
Pokud má být záhlaví (a případně zápatí) tabulky vidět na každé vytištěné stránce, obal ho do k tomu určené značky <thead> (<tfoot>).

„3) jak odstranit mezery mezi th a mezi td?“
Pomocí CSS vlastnosti Border-collapse použité na tabulce.

„4) jak naformátovat ohraničení th tak aby tam nebyla ta horní línie? Boční línie by mohly být jen tečkované, podobě u buněk tabuky. Spodní línie th by mohla být 2px.“
Obal záhlaví značkou <thead> nebo řádku přidej třídu (class). Pak přes ni adresuj styl pro vnořené buňky:

tester:
A přidal sis do tabulky thead, jak ti radil Trejpa?
Je potřeba ještě přidat element tbody a v tvém případě taky caption, pak už to nastavíš v CSS celkem jednoduše. Zjednodušeně html kód tabulky by měl vypadat takto:


a v CSS budeš mít:

tester:
Netuším, čeho chceš přesně dosáhnout, ale na pseudoelementy :nth-child() můžeš v klidu zapomenout, tabulky jsou stylovat lehce bez nich (zjednoduší leda rozdílné styly pro sudé a liché řádky).

příklad - kód

Značka <caption> nesmí obsahovat blokové elementy jako je H1 a H2.
Před značkou <caption> máš zbloudilou značku <tr>, která tam nepatří.
Nauč se něco o dalších značkách, které patří k tabulkám, například <tbody>, <thead>, <tfoot>, <col> a <colgroup>, logicky umí rozdělovat tabulku na části a často ti i zjednoduší stylování.

Trejpa:
„na pseudoelementy :nth-child() můžeš v klidu zapomenout, tabulky jsou stylovat lehce bez nich (zjednoduší leda rozdílné styly pro sudé a liché řádky).“

Child selectors ti umožnia štýlovať custom oblasť tabuľky ktorá nezapadá do "row groups" alebo "column group". A v prípade štýlovania stĺpcov cez column selectory (COL, COLGROUP), si obmedzený iba na vlastnosti:

- border
- background
- width
- visibility

Takže ak chceš štýlovať stĺpec a zmeniť tam inú vlastnosť ako vyššie uvedené, aj tak musíš použiť child selectors. Alebo to robiť cez manuálne priraďovanie class/id pre všetky bunky ktoré patria do konkrétnej oblasti v tabuľke.

Dusann:
„Takže ak chceš štýlovať stĺpec a zmeniť tam inú vlastnosť ako vyššie uvedené, aj tak musíš použiť child selectors“
Ne.

„Alebo to robiť cez manuálne priraďovanie class/id pre všetkz bunky ktoré patri do konkrétnej oblasti v tabuľke.“
Ne.

Dusann:
„Takže ak chceš štýlovať stĺpec a zmeniť tam inú vlastnosť ako vyššie uvedené, aj tak musíš použiť child selectors.“
Ne, jde použít :first-child (první sloupec) a selektor přímého sourozence + Zápis v CSS pro (třeba) pátý sloupec tabulky je na můj vkus ukecaný, ale funguje od IE7 výše, "staré" ne-IE prohlížeče nemají problém.

Zle som použil výraz "child selectors". Mal som na mysli pseudo class označujúcu skupinu child elementov - ":nth-child()".

Bubák:

A prečo je nutné to robiť tak komplikovane keď podpora pre :nth-child() je aj pre staré prehliadače dobrá ?

Tomášeek

A aké je iné riešenie ?


Každopádne, pointa bola tá že so selectormi pre <tbody>, <thead>, <tfoot>, <col> a <colgroup> si človek nevystačí vždy.

Dusann:
„A prečo je nutné to robiť tak komplikovane keď podpora pre :nth-child() je aj pre staré prehliadače dobrá ?“
Co bereš dobrou podporou pro aj staré prohlížeče? IE8 neumí, tím bych asi debatu o podpoře ukončil.

„A aké je iné riešenie ?“
Už ti ho prozradil Bubák.

„pointa bola tá že so selectormi pre <tbody>, <thead>, <tfoot>, <col> a <colgroup> si človek nevystačí vždy.“
Vystačí, viz výše, stačí k tomu přizvat prvního potomka a jeho sourozence. A jako bonus s větší podporou.

Tomášeek:
„Vystačí, viz výše, stačí k tomu přizvat prvního potomka a jeho sourozence. A jako bonus s větší podporou.“

Ok, takže mám napr. tabuľku kde je 9 stĺpcov a skupine stĺpcom 3 až 8 chcem zmeniť písmo.

Použiješ teda zápis:


namiesto zápisu:


len preto aby ti to fungovalo aj v IE8 ?

Reaguji na Dusanna:
Ty jsi psal, že musí použít :nth-child. Nemusí.
Také jsi psal, že je podpora :nth-child dobrá i ve starých prohlížečích. Není.
To, jestli a jak moc potřebuje tazatel podporovat starší Explorer, je naprosto nesouvisející.

„Použiješ teda zápis“
Já bych dal v takovém případě buňkám normálně třídu. Nevím, proč bych to vůbec měl řešit nějakým geniálním selektorem… pak mi někdo přidá sloupec a bude se divit, že má divné formátování (konkrétně s tímto už mám zkušenost).
Jinak, kdyby nebylo vyhnutí, tak bych asi nastavil změněné písmo pro table *+*+td a původní písmo pro table *+*+*+*+*+*+*+*+td.

Dusann:
„Použiješ teda zápis:“
Ne. Použiju ten, který psal Chamurappi.

„len preto aby ti to fungovalo aj v IE8 ?“
Ano, přesně proto. Přidaná práce nulová, na počet znaků to vyjde plus mínus podobně. Proč podporu vědomě omezovat, když to není třeba? Nepotřebuji být cool za každou cenu, na návštěvnících webů mých klientů mi záleží. Pochopíš časem, až budeš kódovat komerčně.

Chamurappi:
„pak mi někdo přidá sloupec a bude se divit, že má divné formátování (konkrétně s tímto už mám zkušenost).“
Tobě někdo přidává další sloupce do tabulky? Kdo?

Pokud je to strojový výpis (databáze) tak nemá možnost, pokud je tabulka vložená např. pomocí wysiwygu tak si tvůj uživatel umí osadit buňky třídou? >:]

To je ale hnus.


k Tématu
nth-child je v pořádku, rozhodně je smysluplnější napsat nth-child(5) {} // styly pro 5 bunku, než psát jak jouda td + td + td + td + td

a k té podpoře prohlížečů asi takhle (už mi to "ježiš nepožívej to, nefunguje to v IE 7 přijde jak obsese)

Chamurappi:
„Nevím, proč bych to vůbec měl řešit nějakým geniálním selektorem…“

Tomášeek:
„Nepotřebuji být cool za každou cenu“

Byť cool v čom ? Že použijem :nth-child() pre jednoduchý a zrozumiteľný zápis ? Prečo by to nemohla byť výhoda, ak viem že nepotrebujem podporovať starý IE 8 ?

A ako by ste urobili zápis bez :nth-child() v prípade, ak potrebujem napr. ohraničiť špecifickú oblasť tabuľky ?

Napríklad:


živá ukážka: Živá ukázka

Reaguji na Kcka:
„Tobě někdo přidává další sloupce do tabulky? Kdo?“
Toho neznáš :-)
Obecně dělat věci závislé na pořadí prvků se mi mnohokrát vymstilo. Ten, kdo tabulku sestavuje, totiž tahle formátovací pravidla nevidí… a nebývá jeho náplní práce zkoumat a přepisovat CSS. Pokud neděláš na webech v týmu, kde jsou rozdělené role, tak možná na problém nenarazíš. (V takovém případě je celkem jedno, jak dělíš HTML/CSS, protože si všechno můžeš kdykoliv změnit sám.)

„To je ale hnus.“
Celé CSS je hnus.

„než psát jak jouda td + td + td + td + td“
Já myslel, že fandíš preprocesorům. Kdyby :nth-child neexistoval, používal bys vesele nějaký mixin a nepřišlo by ti to ani trochu hnusné.

„(už mi to "ježiš nepožívej to, nefunguje to v IE 7" přijde jak obsese)“
Je to úplně obyčejná matematika. Kompatibilita s prohlížeči se ve vzorci určujícím úspěšnost webu projevuje, tvoje pohoršení ne.
Bylo by pošetilé činit rozhodnutí o kompatibilitě na podkladě toho, jaký má někdo názor na staré prohlížeče na nějaké diskusi. S Dusannem berete tuto debatu jako nějakou formu hlasování… ale ono je úplně jedno, co si kdo z nás myslí o Exploreru 8 nebo o kráse různých syntaxí. Informace, že něco někde nefunguje, je prostě fakt. Nechť si laskavý čtenář vyhodnotí její důležitost sám.


Reaguji na Dusanna:
„Čiže ak má tabuľka napr. 7 riadkov, tak budeš manuálne priradzovať triedu pre 42 buniek ?“
Umím regulární výrazy a umím i trochu programovat, nevidím důvod, proč bych měl kdykoliv cokoliv dělat manuálně.

„A ako by ste urobili zápis bez :nth-child() v prípade, ak potrebujem napr. ohraničiť špecifickú oblasť tabuľky ?“
Nasázel bych tam třídy, jsou univerzálnější. Cokoliv jiného se rozsype, jakmile do toho někdo přimíchá třeba spojené buňky (s colspanem/rowspanem) – muselo by se lézt do CSS, aby se to opravilo.
Kdybych to měl dělat podle pořadí selektorem sourozence, tak by to bylo užvaněné. Tvůj kód je sice trochu hezčí, ale také z něj není na první pohled zřejmé, co vlastně dělá.
Pokud bych se rozhodoval, jak rámeček udělat, tak mě bude zajímat, jak je důležité, aby ho čtenář opravdu viděl. Kdyby to byla třeba součást nějakého důležitého úředního dokumentu o penězích, tak si dám sakra záležet, aby se žádná ze stran nemohla vymluvit, že ho neviděla (argument „:nth-child má hezkou syntaxi!“ by asi v případě sporu neobstál). Kdyby to byla dekorace, tak bych zřejmě sáhl po :nth-child.

Chamurappi:
„Toho neznáš :-)“
Neznám, ale kdybych znal, asi bych mu řekl, ať na to nehrabe ;-)

„Obecně dělat věci závislé na pořadí prvků se mi mnohokrát vymstilo. Ten, kdo tabulku sestavuje, totiž tahle formátovací pravidla nevidí… a nebývá jeho náplní práce zkoumat a přepisovat CSS. Pokud neděláš na webech v týmu, kde jsou rozdělené role, tak možná na problém nenarazíš. (V takovém případě je celkem jedno, jak dělíš HTML/CSS, protože si všechno můžeš kdykoliv změnit sám.)“
V tomhle si nerozporujeme. Ale třeba případ tabulky vkládáne do wysiwigu je sporný, klient si sám těžko bude nastavovat nějaké třídy.
V dynamických výpisech také používám třídy, nth-child jen někdy pokud vím, že se tabulka nebude nijak měnit nebo se mi nechce / nemůžu zasáhnout do HTML.

„Já myslel, že fandíš preprocesorům. Kdyby :nth-child neexistoval, používal bys vesele nějaký mixin a nepřišlo by ti to ani trochu hnusné.“
Ano, bez preprocesoru ani ránu. Nicméně zhůvěřilost typu td + td + td + td + td bych nepoužil ani v souvislosti s mixinem.
Navíc, pokud bude mít tabulka 10 sloupců a ja chci nějak nastavit pátý, tak mi to tahle konstrukce nezajistí (nastyluje od 5 buňky vše až do konce).

Add poslední bod, proč tedy neřešíme informaci o nekompatibilite pro ještě starší prohlížeče, které ještě v mizivé většině existují? Určitě to sráží úspěšnost webu >:-]


„Kdybych to měl dělat podle pořadí selektorem sourozence, tak by to bylo užvaněné. Tvůj kód je sice trochu hezčí, ale také z něj není na první pohled zřejmé, co vlastně dělá.“
Jiný způsob, ovšem stejně "čitelný" jako ten Dusannův, u každého z těchto dvou zápisů bych na to chvíli čuměl a přemýšlel co to dělá.
Tohle je ukázkový případ pro několik jednoduchých tříd, kterými příslušné buňky obsloužím.

Kcko:
„Navíc, pokud bude mít tabulka 10 sloupců a ja chci nějak nastavit pátý, tak mi to tahle konstrukce nezajistí“
Od toho je :first-child, že?

Ona je otázka, co je zhůvěřilost. Pro mě to je zavrhnutí části brouzdalů jen z lenosti/neshopnosti/čehokoliv jiného (třeba pocitu být cool).

„proč tedy neřešíme informaci o nekompatibilite pro ještě starší prohlížeče“
Jaké starší máš na mysli? Bavme se o reálných uživatelích a jejich vybavení, ne muzeu.

A teď něco z praxe. Mám kalendář v tabulce, kde sedm buněk na řádku představuje dny a osmá je pro název akce daného týdne. Potřeboval jsem v CSS odlišit právě jen osmou buňku, takže osmou buňku nevytvářím elementem TD, ale TH. Funguje přes 12 let (i v Internet Exploreru 5.5).

Tomášeek:
„Od toho je :first-child, že?“
Ukázka?

„Ona je otázka, co je zhůvěřilost. Pro mě to je zavrhnutí části brouzdalů jen z lenosti/neshopnosti/čehokoliv jiného (třeba pocitu být cool).“
Subjektivní názor, stejně jako můj.

„Jaké starší máš na mysli? Bavme se o reálných uživatelích a jejich vybavení, ne muzeu.“
Jakékoliv, které nejsou zastoupeny % ve větších číslech - viz můj odkaz.'

Přijde mi, že tady někdo nastaví pomyslnou laťku na X let starý browser a každý to tady pak papouškuje. Realita je už jiná.
Chrome, Firefox, Edge, IE 11, možná IE 10, vše ostatní je starý balast, který si nezaslouží jakoukoliv optimalizaci nebo ošklivější / delší kód , aby to v něm fungovalo.

Reaguji na Kcka:
„Ale třeba případ tabulky vkládáne do wysiwigu je sporný, klient si sám těžko bude nastavovat nějaké třídy.“
Bývám součástí složitějších soukolí, kde do podoby webu můžou zasahovat tři další profese, z nichž dvě rozumějí HTML – a jakýkoliv neočividně navázaný styl je pro ně chyták.

„ovšem stejně "čitelný" jako ten Dusannův, u každého z těchto dvou zápisů bych na to chvíli čuměl a přemýšlel co to dělá“
Oba jsem mimochodem vymyslel já, viz viaceré childs jedným selektorom - dá sa? :-)

„proč tedy neřešíme informaci o nekompatibilite pro ještě starší prohlížeče, které ještě v mizivé většině existují?“
Od určité hranice klesá pravděpodobnost, že na vytvářený web vůbec někdo s takovým prohlížečem přijde. Také málokdo tu historii zná. Ale když se u řešení :hover menu napíše, že Explorer 6 a starší umí :hover jen na odkazech, tak v tom nevidím nic pohoršujícího. Je to nadčasově platná informace, i když šestku už nemá v podstatě nikdo.

„vše ostatní je starý balast, který si nezaslouží jakoukoliv optimalizaci nebo ošklivější / delší kód“
Zajímalo by mě, jestli máš na tuto ekonomickou rozvahu nějaká čísla, nebo jen pocit. Pokud ten delší kód pro půlprocentní Explorer 8 vytvoříš za půl hodiny, tak vývoj vyjde třeba na … nevím, zaokrouhleme to na tisícovku. Vydělá web, který vyvíjíš, díky svým návštěvníkům alespoň dvě stě tisíc? (Tak či tak, co platí pro tebe, nemusí platit pro jiného.)

Chamurappi:
„Zajímalo by mě, jestli máš na tuto ekonomickou rozvahu nějaká čísla, nebo jen pocit.“
Ten pocit, jsem tu již linkoval :-), takže se nebudu opakovat. Z našich (firemních) GA vychází podobná čísla.

Všechno tohle vychází z nějaké mylné domněnky, že např. IE 8/9/10 jsou ješte relativně mladé prohlížeče a zasluhují si optimalizaci. Nejsou a nejsou už podporované ...
Každopádně ode mně vše.

Kcko:
„Ukázka?“
Konkrétně v tomto případě :first-child+*+*+*+td.

„Subjektivní názor, stejně jako můj.“
Neříkám, že ne. Proto jsem to uvedl slovy "Pro mě".

„Jakékoliv, které nejsou zastoupeny % ve větších číslech“
A "větší číslo" je co? 10 procent? 5 procent? Procento? Půl procenta?

„Přijde mi, že tady někdo nastaví pomyslnou laťku na X let starý browser a každý to tady pak papouškuje.“
Nevím, kdo by měl tu laťku nastavovat, obzvláště ne na jednotlivých diskusních fórech. Já se řídím jednoduchým poměrem náklad/výnos. A protože mi nevadí napsat navíc pár znaků, jednoznačně vydělávám(e) na zákaznících, které ty z webů svých klientů vyháníš. Pochopil bys snáze, kdybys nejen tvořil weby, ale i provozoval nějaký e-shop. I lidé s IE8 objednávají za nemalé peníze, byť podíl tohoto prohlížeče klesá. Nebo ti třeba procento obratu při obratu X přijde natolik zanedbatelné, abys ho vyhodil oknem?

„Chrome, Firefox, Edge, IE 11, možná IE 10“
Super, díky za výčet. IE9 balast? Na tebe bych jako provozovatel shopu narazit nechtěl, bohužel, pokud sám provozovatel nemá IE8-9, nemá šanci fušerskou práci odhalit.

Tomášeek:
Super, díky za výčet. IE9 balast? Na tebe bych jako provozovatel shopu narazit nechtěl, bohužel, pokud sám provozovatel nemá IE8-9, nemá šanci fušerskou práci odhalit.
Ty jsi komik >:]

A dále viz výše co jsem napsal v předchozím příspěvku.

Tomášeek:
„Pochopil bys snáze, kdybys nejen tvořil weby, ale i provozoval nějaký e-shop. I lidé s IE8 objednávají za nemalé peníze, byť podíl tohoto prohlížeče klesá. Nebo ti třeba procento obratu při obratu X přijde natolik zanedbatelné, abys ho vyhodil oknem?“
Já jsem někde napsal, že v nižších verzích IE moje weby / e-shopy vůbec nefungují, nebo nemá člověk možnost nakoupit? Je tam nastavena nějaká rozumná degradace. Používáme moderní věci, které ovlivní nějakým způsobem vzhled a nikoli funkčnost. A tyhle ekonomický bludy si nech prosimtě někam jinam. Plácáš blbosti.

Kcko:
Microsoft pochopilteně chce, aby se používal jejich novější software, který vyvinul a jehož vývoj se mu musí zaplatit. Na tom nic divného není, z pohledu ekonomiky. Myslíš si, že uživatele, kterému IE8, IE9 běží bez problému, trápí nějaký vývoj? Že o nové verzi IE ví? Že ví jak ji nainstalovat? Že ji může nainstalovat? I když padne nějaké "NE", přeci má uživatel právo nakoupit. A majitel shopu na něm vydělat. Ty za svoje klienty rozhoduješ, který zákazník je dost dobrý a který ne. A to je špatně, to není tvoje práce, ty bys měl nabídnout prodat všem (v rámci možností, ne trendu).

Pro porovnání, jedna analogie k tým myšlenkovým pochodům:
Vývoj 2. řady Octavií taky už skončil před mnoha lety, Škodovka by byla radši, kdyby si všichni koupili trojkovou Octavii. Přesto ale lidi jezdí i staršími auty a kupodivu, jsou na ně náhradní díly (na kterých prodejem dealeři (= v našem případě majitelé shopů) vydělávají - kdo je nenabízí (= nepodporuje IE8), prodělává). Má je škodovka utnout? A co teprve s jedničkovou řadou? Zde vidím Edge jako OIII, IE9 jako OII a IE8 jako OI. Kde mám v úsudku chybu?

Kcko:
„A tyhle ekonomický bludy si nech prosimtě někam jinam. Plácáš blbosti.“
Ha. OK, plodná debata, děkuji za argument :-)

Tomášeek:
Jak můžeš srovnávat koupi nového auta s instalací novější verze browseru zdarma? Kdyby na to člověk měl, tak by si tu O3 velmi rád koupil, ale holt bude jezdit ve starém křápu, protože na to většina lidí nemá.
Tohle mě přesvědčilo o tom, že se s Tebou bavit je jako nošení dříví do lesa nebo :first-child+*+*+*+td do CSSka :]]]]]]
Já Ti neděkuji, ztráta času nebo možná ano, příště toho radši nechám ;)

Tomášeek:
„I lidé s IE8 objednávají za nemalé peníze, byť podíl tohoto prohlížeče klesá“

Byznys - nebyznys, nerozumiem prečo by bežný človek v dnešnej dobe mohol mať dôvod byť nútený stále fungovať na archaických prehliadačoch plných nekompatibility.

Ak by vo sfére webového vývoja vládol jednotný prístup, kde nikto archaické browsery podporovať nebude, tak žiadny zákazníci s IE 8-7 a podobne by neexistovali. Modal by ich proste upozornil na upgrade prehliadača a svet by bol oveľa menej komplikovaný IMHO. Developer by sa vďaka tomu mohol viac sústrediť na vývoj samotnej funkčnosti webu a nie strácať čas riešením problémov s kompatibilitou, aby nevznikol stres že nejaká minorita s archaickým browserom nemôže z dôvodu nekompatibility nakúpiť.

Kcko:
„Jak můžeš srovnávat koupi nového auta s instalací novější verze browseru zdarma?“
Je tu vazba prohlížeč - verze Windows a verze Windows - hardware.
A pak je tu spousta lidí, co se, z nejrůznějších racionálních i iracionálních důvodů brání změně.

Dusann:
„nerozumiem prečo by bežný človek v dnešnej dobe mohol mať dôvod byť nútený stále fungovať na archaických prehliadačoch plných nekompatibility.“
Jaké nekompatibility? Té, kterou tam vědomě zanášíš? Všechny prohlížeče umí obarvit 6. buňku 3. řádku tabulky. Každý jiným způsobem, ale umí.

Navíc jsem už psal, že běžný člověk není ajťák. Nemusí vědět o nové verzi prohlížeče, nemusí vědět, jak ji nainstalovat, nemusí mít k instalaci práva. Cokoliv.

„Ak by vo sfére webového vývoja vládol jednotný prístup, kde nikto archaické browsery podporovať nebude“
Což naštěstí nevládne, každý ať používá, co je libo. Archaické prohlížeče stejně nikdo nepodporuje, ale archaickým neshledávám IE8.

„Modal by ich proste upozornil na upgrade prehliadača“
Což ne každý umí/může/chce. Viz výše.

„Developer by sa vďaka tomu mohol viac sústrediť na vývoj samotnej funkčnosti webu a nie strácať čas riešením problémov s kompatibilitou“
Zkušený developer by měl mít tu kompatibilitu v malíku, měl by vědět, co si dovolit může a co ne. Nemyslím si, že bych plnou funkčností v IE8 ztrácel čas.