1 / 16

Tabuľkové dáta

Tabuľkové dáta. Telematické služby Ing. Marián Pecko, PhD. HTML <table> tag. predstavuje dáta vo forme tabuľky tabuľky by nemali byť používané pre rozloženie. Ak by bola takto použitá musí mať atribút role="presentation" atribúty globálne

tender
Télécharger la présentation

Tabuľkové dáta

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ľkové dáta Telematické služby Ing. Marián Pecko, PhD.

  2. HTML <table> tag • predstavuje dáta vo forme tabuľky • tabuľky by nemali byť používané pre rozloženie. Ak by bola takto použitá musí mať atribút role="presentation" • atribúty • globálne • border - ak je zadaný, musí atribút mať hodnotu buď prázdny reťazec alebo "1" @MP/TMS 2012

  3. HTML <caption> tag • predstavuje názov tabuľky, ktorá je jej rodičom (rodič je prvok table) • ak je prvok table jediný obsah prvku figure, prvok caption by mal byť vynechaný v prospech figcaption • nadpis môže predstaviť kontext tabuľky, čo ju robí podstatne zrozumiteľnejšiu • atribúty • globálne @MP/TMS 2012

  4. HTML <celgroup> tag • reprezentuje skupinu jedného alebo viacerých stĺpcov v tabuľke, ktorá je jej rodičom • ak prvok colgroup neobsahuje žiadne prvky col, potom prvok môže mať atribút span, ktorého hodnota musí byť kladné číslo. • atribúty • globálne • span @MP/TMS 2012

  5. HTML <col> tag • Ak prvok col má rodiča a to je prvok colgroup, potom prvok col predstavuje jeden alebo viac stĺpcov v skupine stĺpcov predstavované týmto colgroup. • Prvok môže mať atribút span, ktorého hodnota je kladné číslo • atribúty • globálne • span @MP/TMS 2012

  6. Ukážka <colgroup>,<col> <table border="1"> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Názov</th> <th>Cena</th> </tr> <tr> <td>3476896</td> <td>Moje prvé HTML</td> <td>$53</td> </tr> </table> @MP/TMS 2012

  7. HTML <tbody> tag • predstavuje blok riadkov, ktoré sa skladajú z tela dát pre rodičovský prvok table • uvádza sa po caption, colgroup, thead, tfoot • atribúty • globálne @MP/TMS 2012

  8. HTML <thead> tag • predstavuje blok riadkov, ktoré sa skladajú z menoviek stĺpcov (hlavičky) pre rodičovský prvok table • uvádza sa po caption, colgroup a pred tfoot, tbody • atribúty • globálne @MP/TMS 2012

  9. HTML <tfoot> tag • predstavuje blok riadkov, ktoré sa skladajú zo zhrnutí stĺpcov (pätičky) pre rodičovský prvok table • uvádza sa po caption, colgroup, thead a pred tbody • atribúty • globálne @MP/TMS 2012

  10. HTML <tr> tag • predstavuje riadok buniek v tabuľke • uvádza sa ako potomok prvkov thead, tbody, tfoot • atribúty • globálne @MP/TMS 2012

  11. HTML <td> tag • predstavuje dátovú bunku v tabuľke • uvádza sa ako potomok prvku tr • atribúty • globálne • colspan • rowspan • headers @MP/TMS 2012

  12. HTML <th> tag • predstavuje bunku hlavičky v tabuľke • uvádza sa ako potomok prvku tr • atribúty • globálne • colspan • rowspan • headers • scope – má 5 stavov: • row - bunky hlavičky sa vzťahujú na niektoré z ďalších buniek v rovnakom riadku • col - bunky hlavičky sa vzťahujú na niektoré z ďalších buniek v rovnakom stĺpci • rowgroup - bunky hlavičky sa vzťahujú na všetky zostávajúce bunky v skupine riadkov. • colgroup- bunky hlavičky sa vzťahujú na všetky zostávajúce bunky v skupine stĺpcov. • automatický stav (ak je atribút vynechaný) - bunky hlavičky sú použiteľné na súbor buniek vybraných na základe kontextu @MP/TMS 2012

  13. Atribúty spoločné pre<td> a <th> colspan • počet stĺpcov, ktoré budú zlúčené rowspan • počet riadkov, ktoré budú zlúčené headres • ak je daný, musí obsahovať reťazec zložený z netriedeného súboru jedinečných medzerou oddelených znakov, z ktorých každý musí mať id prvku th • Prvok th nemusí byť zameraný sám na seba. @MP/TMS 2012

  14. Ukážka atribútu headres <table border="1"> <caption> <strong>Charakteristika s pozitívnymi a negatívnymi stránkami</strong> <p>Charakteristiky sú uvedené v druhom stĺpci, s negatívnou stránkou v ľavom stĺpci a pozitívnou stránkou v pravom stĺpci.</p> </caption> <thead> <tr> <th id="n">Negatívna</th> <th>Charakteristika</th> <th>Pozitívna</th> </tr> </thead> <tbody> <tr> <td headers="n r1">Smutná</td> <th id="r1">Nálada</td> <td>Šťastná</td> </tr> <tr> <td headers="n r2">Zlyhania</td> <th id="r2">Štádium</th> <td>Prechodné</td> </tr> </tbody> </table> Charakteristika s pozitívnymi a negatívnymi stránkami Charakteristiky sú uvedené v druhom stĺpci, s negatívnou stránkou v ľavom stĺpci a pozitívnou stránkou v pravom stĺpci. @MP/TMS 2012

  15. Ukážka atribútu scope <table border="1"> <thead> <tr><th>ID</th><th>Measurement</th><th>Average</th><th>Maximum</th></tr> </thead> <tbody> <tr><td></td><thscope="rowgroup">Cats</th><td></td><td></td></tr> <tr><td>93</td><th scope="row">Legs</th><td>3.5</td><td>4</td></tr> <tr><td>10</td><th scope="row">Tails</th><td>1</td><td>1</td></tr> </tbody> <tbody> <tr><td></td><thscope="rowgroup">EnglishSpeakers</th><td></td><td></td></tr> <tr><td>32</td><th scope="row">Legs</th><td>2.67</td><td>4</td></tr> <tr><td>35</td><th scope="row">Tails</th><td>0.33</td><td>1</td></tr> </tbody> </table> @MP/TMS 2012

  16. Ukážka atribútu scope @MP/TMS 2012

More Related