1 / 23

Tabuľky

Tabuľky. Telematické služby Doc. Ing. Juraj Vaculík, PhD. Formát tabuľky. < table atr > < caption atr > popis tabuľly</ caption > < col span= atr style=“ “ > < tr atr >< th atr >bunka 11< td >bunka 12< td >bunka 13 < tr atr >< th atr >bunka 21<td>bunka 22<td>bunka 23

duc
Download Presentation

Tabuľky

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tabuľky Telematické služby Doc. Ing. Juraj Vaculík, PhD.

  2. Formát tabuľky <table atr> <caption atr> popis tabuľly</caption> <colspan= atr style=“ “> <tr atr><th atr>bunka 11<td>bunka 12<td>bunka 13 <tr atr><th atr>bunka 21<td>bunka 22<td>bunka 23 <tr atr><th atr>bunka 31<td>bunka 23<td>bunka 33 <tr atr><th atr>bunka 41<td>bunka 42<td>bunka 43 </table> TMS 06/HTML

  3. Prehľad príkazov TMS 06/HTML

  4. <table> - tabuľka • Uzatvára celú štruktúru tabuľky, obsahuje ďalšie elementy, najmä riadky tabuľky <tr>. • Príklad tabuľky 2x2: <table> <tr> <td>horná ľavá</td><td>horná pravá</td></tr><tr> <td>dolná ľavá</td><td>dolná pravá</td></tr> </table> TMS 06/HTML

  5. Atribúty príkazu table TMS 06/HTML

  6. <table> atribút align • Čo sa týka šírky tabuliek, atribút width nastavuje iba minimálnu šírku, nie vždy šírku skutočnú. • Skutočná šírka môže byť väčšia, pokiaľ bude väčší súčet šíriek stĺpcov. • Každý stĺpec je tak široký, ako je široká jeho najširšia bunka. TMS 06/HTML

  7. <tr> table row - riadok • Musí byť vo vnútri elementu <table> a smie obsahovať iba bunky (<td> a <th>). • Prípustnými (ale zastaranými a neužívanými) atribútmi sú height, background, bgcolor. • Ide o párový tag, ale pokiaľ sa neuvedie koncová značka, tak sa v prehliadači nič nestane. • Slušnosťou je však tag tr ukončovať, z dôvodu prehľadnosti. TMS 06/HTML

  8. Atribúty príkazu <tr> TMS 06/HTML

  9. <td> bunka tabuľky Musí byť umiestnená v riadku <tr>. • <td> je párový tag, ale pokiaľ sa neuzavrie, tak si s tím prehliadač poradí. • Ak chceme prázdnu bunku • <td>&nbsp; • <td><pre> </pre> TMS 06/HTML

  10. Atribúty príkazu <td> TMS 06/HTML

  11. Atribúty príkazu <td> • Všetky vyššie spomenuté atribúty s výnimkou rowspan a collspan sú považované za zastarané a doporučuje sa ich nahradzovanie pomocou štýlov. TMS 06/HTML

  12. <td> • Výška bunky je jednoduchšia záležitosť, pretože vertikálneho miesta je nekonečne veľa (ale horizontálne je obmedzené šírkou stránky/okna). • Atribúty rowspan a colspan vlastne spojujú bunky (alebo lepšie povedané vyznačujú presah). • Rowspan presahuje bunku do ďalších riadkov, colspan do stĺpcov - na mieste, kam bunka presiahla, sa do HTML zápisu nič nedáva. • Príklad tabuľky 2x2 so spojeným ľavým stĺpcom:<table> <tr><td rowspan=2>ľavá bunka</td><td>horná pravá</td></tr> <tr><!-- tu nič --><td>dolná pravá</td></tr></table> TMS 06/HTML

  13. <th> • Hlavičková bunka. • Správa sa úplne rovnako ako <td> iba s tým rozdielom, že text je tučný a v bunkách vystredený. • Má rovnaký zápis i atribúty ako <td>. TMS 06/HTML

  14. Šírka buniek • Základné pravidlo hovorí, že všetky bunky v jednom stĺpci sú rovnako široké. Šírka stĺpce je stanovená od jeho najširšej bunky. • Výsledná šírka buniek je ovplyvnená jednak atribútom width, ale taktiež obsahom bunky, nastavením šírky tabuľky a šírkou ostatných stĺpcov buniek. • Existujú niektoré štandardné metódy, ako efektívne nastavovať šírku tabuliek:  TMS 06/HTML

  15. Šírka buniek • Vôbec šírky nezadávať, prehliadač si ich nastaví sám tak, ako ich potrebuje. • Zadať iba šírku tabuľky v percentách, aby nebola moc malá, ale pre samotné bunky nezadávať rozmery.  • Zadávať šírku všetkých buniek v percentách tak, aby dohromady dávali stovku. Šírka tabuľky sa môže nechať tiež v percentách alebo sa vôbec nemusí zadávať. • Zadať pevnú šírku tabuľky v pixeloch a všetky bunky zadať tiež v pixeloch, aby ich súčet zodpovedal. Skontrolovať, či nie je v nejakej bunke príliš široký obsah (a prípadne tam spojiť bunky, ak je to nutné). Toto je najčastejší spôsob práce s rozmermi tabuľky. TMS 06/HTML

  16. Príklad <table border="1"><tr><td width="100"> Veľmi dlhý text, aby sa zalomil na ďalšie riadky </td><td width="30" align="center">Ahoj</td><td width="20">(:-)</td></tr><tr><td width="20">Nejaký text</td><td width="200">Iný text</td><td width="20">Nič</td></tr></table> • Ako je vidieť, je možné bunkám zadávať rôzne šírky, ale skutočná výsledná šírka bunky bude rovnaká, ako najširšia bunka v stĺpci. • Pokiaľ sa obsah bunky nevôjde do jedného riadku, jednoducho sa zalomí. (To funguje iba pri bunke s nastavenou šírkou!) TMS 06/HTML

  17. <table> atribút frame V praxi sa odporúča atribút frame nepoužívať a žiadaného grafického efektu docieliť správnym použitím css stylu border pri tagu <table>. TMS 06/HTML

  18. <table> atribút rules • Atribúty frame a rules fungujú jedine pri nenulovom rámčeku (nesmú byť <table border="0">. • V praxi je lepšie atribút rules nepoužívať a požadovaného efektu dosiahnuť pomocou CSS štýlu border aplikovaného na bunky tabuľky (tagy <td>). • Časté preklepy: celspacing, celpadding, cellpading, celpading. Správne je to cellspacing a cellpadding. TMS 06/HTML

  19. <caption> nadpis tabuľky • V HTML zápisu má nasledovať za značkou <table> pred prvým riadkom. • Zobrazuje sa ako vystredený text nad tabuľkou. • <Caption> môže obsahovať čokoľvek, ale najčastejšie sa tam dáva popis tabuľky. • Správne by každá tabuľka mala obsahovať iba jeden tag <caption>, ale keď sa ich tam zapíše viac, prehliadač ich zobrazí. TMS 06/HTML

  20. <col> stĺpec • Umožňuje nastaviť určitú vlastnosť všetkým bunkám v jednom stĺpci (napríklad šírku alebo zarovnanie). • Nepárový tag uvádzaný za tagom <table>. • Nie je potrebné <col> používať, ale keď áno, tak by ich malo byť toľko, koľko je stĺpcov (alebo použiť atribút span). • Tagy <col> sa vzťahujú ku stĺpcom v tom poradí, ako sú zapísané. • Atribút span uľahčuje výpis niekoľkých rovnakých susedných tagov <col>. Namiesto aby sa písalo enkrát <col>, tak sa napíše <col span="n">. • <table><col style="text-align: right"><col span="2" style="text-align: center"><tr> <td>vpravo zarovnaný stĺpec</td> <td>Vycentrovaný stĺpec</td> <td>Další vycentrovaný stĺpec (to je ta dvojka).</td> </table> TMS 06/HTML

  21. Ďalšie príkazy • colgroup • Skupina stĺpcov • tbody • Telo tabuľky (alebo taktiež skupina riadkov). Vyskytuje sa v elemente <table> mimo riadkov. • V jednej tabuľke môže byť viac <tbody>. • Obsahujú riadky (tagy <tr>). • Nemajú zatiaľ žiadny zmysel. • V budúcnosti sa očakáva, že budú v aplikáciách funkčne združovať riadky. • Atribúty align, valign a bgcolor tu majú rovnakú funkciu ako pri <td>. TMS 06/HTML

  22. Ďalšie príkazy • thead • Skupina riadkov, ktorá je záhlavím tabuľky. Tag, významom veľmi podobný tagu <tbody>. • V budúcnosti sa očakáva, že sa záhlavie tabuľky bude tlačiť na každej stránke a pri rolovaní bude zotrvávať na mieste (zatiaľ to nefunguje). • Atribúty align, valign a bgcolor tu majú rovnakú funkciu ako pri <td>. • tfoot • To isté čo <thead>, iba sa jedná o pätu tabuľky. Tento tag by mal obsahovať iba riadky tabuľky (<td>). • V kóde má byť umiestený ešte pred samotným telom tabuľky, <tfoot> sa vykreslí na konci tabuľky. TMS 06/HTML

  23. Formát tabuľky <table atr> <caption atr> popis tabuľly</caption> <col span= atr style=“ “> <thead> <tr atr><th atr>bunka h11<td>bunka h12<td>bunka h13 <tr atr><th atr>bunka h21<td>bunka h22<td>bunka h23 </thead> <tbody> <tr atr><th atr>bunka b11<td>bunka b12<td>bunka b13 <tr atr><th atr>bunka b21<td>bunka b23<td>bunka b23 </tbody> <tfoot> <tr atr><th atr>bunka 11<td>bunka 12<td>bunka 13 </tfoot> </table> TMS 06/HTML

More Related