KONTAKT
izuzetan[at]gmail.com

Asimetrične HTML tabele

HTML može praviti takoreći sve varijante asimetričnih tabela. Ta osobina daje mogućnost izmedju ostalog i dizajniranju stranica i obradi slika u smislu deljenje stranica i slika na sve moguće načine. Asimetrične tabela se izrađuju korišćenjem TD atributa ROWSPAN i COLSPAN. Na primer ajde da napravimo tabelu sličnu iz prethodnog naslova zadnji primer, ali da PERINO polje zauzme i VERINO polje:

<table border=4>
     <tr>
          <td>DEJAN</td>
          <td colspan=2>PERA</td>
     </tr>
     <tr>
          <td>MILAN</td>
          <td>SAŠA</td>
          <td>ĐURA</td>
     </tr>
</table>

Izbacili smo VERINO polje a u PERINU ćeliju stavili smo atribut COLSPAN = 2. A sad ajde da PERINA ćelija zauzme i DEJANOVU:

<table border=4>
     <tr>
          <td colspan=3>PERA</td>
     </tr>
     <tr>
          <td>MILAN</td>
          <td>SAŠA</td>
          <td>ĐURA</td>
     </tr>
</table>

Izbacili smo DEJANOVU ćeliju i u atribut COLSPAN stavili smo broj 3 jer sad ta PERINA ćelija zauzima tri ćelije. Da rezimiramo, COLSPAN atribut manipuliše samo sa horizontalnim ćelijama. Hajde sad da vidimo efekte sa ROWSPAN atributom. Na primer promenimo našu tabelu iz primera sa 6 ćelija tako da izbacimo DEJANA a MILANOVA ćelija da se proširi po vertikali:

<table border=4>
     <tr>
          <td rowspan=2>MILAN</td>
          <td>PERA</td>
          <td>VERA</td>
     </tr>
     <tr>
          <td>SAŠA</td>
          <td>ĐURA</td>
     </tr>
</table>

Eto dobili smo efekat. Medjutim ovde treba nešto jako bitno uočiti. Ako pogledate kod koji daje 6 ćelija videćete da je MILANOVA ćelija u kodu u drugoj horizontalnoj liniji na prvom mestu, a sad u ovom kodu smo izbrisali tekst DEJAN i napisali MILAN, a izbrisali u drugoj liniji ćeliju u kojoj je bio tekst MILAN. Znači poenta je ta da ako želimo proširivati ćelije po vertikali moramo brisati ćelije ispod a tekstove pisati kako nam odgovara. E sad ajde da vidimo kombinaciju oba parametra. Na primer neka u gornjem primeru ĐURA zauzme i SAŠINU ćeliju:

<table border=4>
     <tr>
          <td rowspan=2>MILAN</td>
          <td>PERA</td>
          <td>VERA</td>
     </tr>
     <tr>
          <td colspan=2>ĐURA</td>
     </tr>
</table>

Ajde još složeniju tabelu da napravimo. U gornjem primeru ćeliju MILAN podelimo na primer po horizontali na 3 dela i ubacimo neka nova imena u tako dobijene nove ćelije:

<table border="4">
     <tr>
          <td>DEJAN</td>
          <td rowspan="2">PERA</td>
          <td rowspan="2">VERA</td>
      </tr>
      <tr>
           <td rowspan="2">MILAN</td>
      </tr>
      <tr>
           <td colspan="2" rowspan="2">SAŠA</td>
      </tr>
      <tr>
           <td>ĐURA</td>
</tr>
</table>

Primećujete da smo ubacili još jednu horizontalnu liniju, a takodje vidite da neki TD tagovi mogu imati i oba atributa. Sve kombinacije asimetričnih tabela je moguće izraditi ovim atributima. Moguće je korišćenje i tabele u tabeli, ali takav pristup nije ekonomičan jer mnogo natrpava kod. Nije poenta samo napraviti efekat, nego trebamo i ekonomično koristiti HTML tagove. A ekonomičnost je moguća ukoliko dobro poznajemo sve mogućnosti HTML jezika.

Mi smo za podatke u gornjim tabelama koristili samo imena, ali tu mogu da stoje i čitavi pasusi teksta, sa svim mogućim tagovima za formatiranje i uredjivanje teksta koje smo naučil. Mogu da stoje i slike, linkovi i svi mogući tagovi za slike i linkove itd itd. Naravno linije tabela mogu biti vidljive ali i nevidljive, ili pak da budu vidljive samo neke linije a neke ne itd itd. U nastavku slede objašnjenja tih dekorativnih atributa.