HTML ir CSS pradedantiesiems (Dalis 07): Lentelės (01)

Lentelės yra gana sudėtingi struktūros, sudaryti iš eilučių ir stulpelių. Lentelės išorinis pagrindas visada sudaro table elementą.

<table>
…
</table>

Šio elemento viduje vyksta tikroji lentelės apibrėžtis. Beje, patariama, kai kuriam lentelės HTML įgyvendinimui priskirti rėmelį. Taip galima geriau suprasti, kaip tiksliai eina eilutės ir stulpeliai. Tam pirmajam <table> elementui priskiriama atributo-vertė pora border="1". (Atkreipkite dėmesį, kad HTML'e neturėtumėte naudoti border atributo. Vietoj to geriau naudoti atitinkamas CSS savybes. Apie tai išsamesniai vėliau).

<table border="1">
…
</table>

Toliau einama su lentelės eilučių apibrėžimu. Tai vykdoma per tr elementą.

<table border="1">
   <tr></tr>
</table>

Tačiau tai dar nesuteikia norimo rezultato. Toliau būtina apibrėžti stulpelius. Tai vėl vykdoma per td elementą.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Dabar galite apibrėžti pirmąją lentelės turinio dalį. Tai daroma tarp <td> ir </td>.

<table border="1">
   <tr>
      <td>Turinys 1</td>
   </tr>
</table>

Tik dabar verta pažvelgti į rezultatą naršyklėje.

Perspektyva šiuo metu tikrai ne tokia įspūdinga, nes lentelė iki šiol sudaryta tik iš vienos lentelės langelio. Dabar galite įterpti dar vieną stulpelį. Tai vėl atliekama per td elementą. Atkreipkite dėmesį, kad jis turi būti apibrėžtas viduje tr elemento.

<table border="1">
   <tr>
      <td>Turinys 1</td>
      <td>Turinys 2</td>
   </tr>
</table>

Taip pat čia vėl žvilgtelėkite į rezultatą.

Norėdami pridėti papildomas eilutes į lentelę, tiesiog sukuriama papildoma tr elementą, kuriame vėl apibrėžiami norimi td elementai.

Tai taip pat yra pavyzdys:

<table border="1">
   <tr>
      <td>Turinys 1</td>
      <td>Turinys 2</td>
   </tr>
   <tr>
      <td>Turinys 3</td>
      <td>Turinys 4</td>
   </tr>
</table>

Rezultato naršyklėje peržiūra pateikia šį rezultatą:





Taip jūs galite sukurti gana sudėtingas lentelės struktūras.

Antraštę, Kūną ir Pėdą apibrėžti

Lenteles galima suskirstyti į loginius blokus. Tai apima antraštės, vieną ar daugiau duomenų sritis ir pėdą. Sekantis pavyzdys parodo, kaip tai galėtų atrodyti:

<table border="1">
  <thead>
    <tr>
      <th>Išvykimas</th>
      <th>Atvykimas</th>
      <th>Peronas</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlynas</td>
      <td>Stralsundas</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlynas</td>
      <td>Hamburgas</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Miunchenas</td>
      <td>Berlynas</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

O čia peržiūra rezultato naršyklėje:





Apskaidrinimas į minėtas sritis aiškiai neturi jokio vizualaus efekto. Aišku, kyla klausimas: kodėl tuomet reikia save varginant apibrėžti šias sritis? Yra dvi gerai priežastys:

• Naudojantis CSS, sritis galima išdėstyti įvairiai pagal poreikį.

• Naršyklės ilgoms lentelėms spausdinant gali kartoti lentelės antraštę ir pėdą ant kiekvienos lapo pusės.

Lentelės antraštė pradedama naudojant thead. Toliau seka lentelės eilutės, kurios priklauso antraščiaus sričiai. Neprašome pamiršti vėl uždaryti antraštės </thead>.

Jeigu norite, kad lentelė turėtų lentelės pėdą, jis turi būti apibrėžtas būtinai prieš lentelės kūną. Pėdas nurodo <tfoot>. Jam gali sekti viena ar kelios eilutės, kurios priklauso pėdos sričiai. Su </tfoot> uždaromas pėdas.

Tikrąjį lentelės kūną apibrėžiate viduje tbody elemento. Šis tbody gali pasikartoti. Lentelės kūną sukdysite kiekvieną kartą uždarę </tbody>.

Kodėl tiesiogiai lentelėje naudoti keletą tbody elementų? Pavyzdys būtų Vokietijos futbolo čempionato lentelė. Tokioje lentelėje paprastai yra keletas sričių.

• Čempionas

• Čempionų lygos dalyviai

• Čempionų lygos kvalifikantas

• Europos lygos dalyviai

• Pilki vidurys

• Releguojantis

• Nukritėjas

Kiekvieną šių sričių galima supakuoti į savo tbody elementą ir juos tada kitaip suformuoti CSS pagal pageidavimą.

Nustatyti stulpelius iš anksto

Kaip lentelė rodoma naršyklėse, žinoma, visų pirma priklauso nuo esamų eilučių ir stulpelių skaičiaus. Lentelės rodyti procesas naršyklėms tačiau nėra visai paprastas. Iš tikrųjų naršyklė turi visą lentelę perskaityti prieš ją galėdama rodyti. Ypač sudėtingose lentelėse tai gali užtrukti tam tikrą laiką. Šią problemą galima apeiti, tiesiogiai pranešant naršyklėje, iš kiek stulpelių iš tikrųjų susideda lentelė.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Pavadinimas</th>
     <th>Kaina</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Trumpa istorija apie beveik viską</td>
     <td>29,95 Eur</td>
   </tr>
 </table>

Naudojant colgroup iš anksto nustatomos stulpelių informacijos. Atkreipkite dėmesį, kad dauguma colgroup atributų, prieinamų ankstesnėse HTML versijose, HTML5 daugiau nebegalioja. Dabar leidžiama tik span atributas. Šis atributas reikalauja, kad nurodytumėte, iš kiek stulpelių lentelėje sudarytas.

colgroup elementas tiesiogiai stovi po pradinio <table>. Stulpeliai tada apibrėžiami per atskirus col elementus.

Naudojant colgroup turite iš esmės du variantus:

• Su span atributu

• Be span atributo

Jei nenaudojate span atributo, viduje colgroup elemento kiekvienam stulpeliui, per kurį stulpelio grupė turėtų būti išplėsta, turite apibrėžti atskirą col elementą. Atkreipkite dėmesį, kad col yra nepriklausomas elementas.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Pavadinimas</th>
     <th>Kaina</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Trumpa istorija apie beveik viską</td>
     <td>29,95 Eur</td>
   </tr>
 </table>

Taip pat egzistuoja ir mišri forma.

<table>
 <colgroup>
 <col>
 </colgroup>
 <colgroup span="2"></colgroup>
 …

Tai visada patogu, kai vienas stulpelis turi būti nustatytas atskirai, o kiti norite sujungti į grupę.