HTML ir CSS pradedantiesiems (dalis 08): Lentelės (02)

Pirma norėčiau parodyti, kaip ląstelės eilutėse gali būti sujungtos stulpelių funkcijomis. Taip galima pasiekti, kad vienas stulpelis tarp atitinkamos eilutės išsiplatintų per kelis stulpelius.

Pavyzdys:

<table border="1">
   <tr>
      <th colspan="2">Laikai</th>
   </tr>
   <tr>
      <td>2014-04-11</td>
      <td>2012-04-12</td>
   </tr>
   <tr>
      <td>2014-04-13</td>
      <td>2014-04-14</td>
   </tr>
   <tr>
      <td>2014-04-15</td>
      <td>2014-04-16</td>
   </tr>
</table>

Anksčiau buvo minima žodžio th žymės naudojimo taisyklė. Šiuo elementu žymimi galutiniai stulpeliai. Naršyklės šias ląsteles paprastai pateikia paryškintas ir centrinius. O čia rezultatas naršyklėje:

Įvedus įvykdomąjį th žymės atributą colspan. Kaip reikšmė tikimasi, kad dabartinė ląstelė išsiplėstų per tam tikrą stulpelių skaičių. Bet kuriais atvejais įsitikinkite, kad nurodytų stulpelių skaičius yra teisingas, kitaip gali gautis nesmagus rezultatas. Pavyzdžiui, šiuo atveju žymėta galvutė turėtų išsiplatinti per du stulpelius. O liečiamose dviejose eilutėse vėl bus po dvi eilutės.

Dėmesio, susijusio su eilučių jungimu, patarimas. Lentelės kūrimo stadijoje nustatykite rėmelį (border), kad galėtumėte tiesiogiai matyti, ar jungimas veikia taip, kaip tikėtasi.

Ląstelės stulpelyje jungiamos eilučių funkcijomis

Atributu rowspan galima sujungti keletą ląstelių stulpelyje. Susijusi ląstelė tuomet išsiplėtimo ilgį per kelias eilutes. Taip pat vėl pateikiu pavyzdį:

<table border="1">
   <tr>
      <th rowspan="2">Spalva</th>
      <td>Mėlyna</td>
   </tr>
   <tr>
      <td>Žalia</td>
   </tr>
   <tr>
      <th rowspan="2">Dydis</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

Naršyklėje tai atrodys taip:





Rowspan atributui priskiriama skaitinė reikšmė. Šis visų pirma nustatys, kiek eilučių per stulpelį turėtų išsiplatinti ląstelė. Čia taip pat svarbu tikrinti, ar nurodytų eilučių skaičius yra teisingas.

Ląstelės vienu metu jungiamos eilučių ir stulpelių funkcijomis

Abu atributai rowspan ir colspan taip pat gali būti derinami tarpusavyje. Taip apibrėžiamos ląstelės, kurios tuo pat metu išsiplėčia per kelias eilutes ir stulpelius. Tai galima parodyti geriausiai pasitelkus pavyzdį.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Butas</th>
      <td>5 kambariai</td>
   </tr>
   <tr>
      <td>154 kv. m.</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Automobilio stovėjimo aikštelė</td>
      <td>Šildomas grindis</td>
   </tr>
</table>

Naršykloje tai atrodys taip:





Jungiant abu atributus, žinoma, reikia būti atsargiam, kad galiausiai ląstelių skaičius būtų teisingas.

Lentelės pavadinimas

Labai įdomus būdas, kaip padaryti lentelės turinį suprantamesnį, yra naudojant caption elementą. Jis leidžia pridėti pavadinimą ar legendą prie lentelės. Nepaisant to, kad caption turinys bus rodomas lentelės išorėje, jo apibrėžimas vyksta lentelėje.

Čia yra tipinis caption naudojimo atvejis:





Lentelės viršuje rodomas pavadinimas. Pagal nutylėjimą pavadinimas bus centriniame lentelės viršuje. Žinoma, tai galima keisti individualiai naudojant CSS.

Caption elementas nedelsiant apibrėžiamas po įvedimo <table>.

Čia yra pilnas sintaksės komponentų, kaip parodyta prieš tai minėtame pavyzdyje:

<table border="1">
   <caption>Medijos duomenys</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Tema</th>
         <th>Peržiūros</th>
         <th>Tendencija</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Būklė 2014 m. birželio mėn.</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12.245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11.546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Formuokite lentelę

Lentelės formavimui ankstesniuose HTML versijose egzistavo daug atributų. Čia pateikiami keli pavyzdžiai dalykų, kurie buvo valdomi atributais. (Žinoma, šie atributai vis dar yra palaikomi naršyklėse. Bet HTML5 juos nebegalima naudoti).

• Išorinis rėmelis

• Vidinis lentelės rėmelis

• Plotis ir aukštis

• Tinklelio linijos

• Ląstelių turinio išdėstymas

• Spolias

• Fono paveikslėliai

Jūs matote, kad iš tiesų viskas gali būti valdoma naudojant atitinkamus HTML atributus. Pateiktas pavyzdys rodo lentelę, kurioje šios galimybės buvo plačiai išnaudotos:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Vienas</td>
      <td width="200" bgcolor="#00ffff">Du</td>
      <td width="200">Trys</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Keturi<</td>
      <td bgcolor="#996666">Penki</td>
      <td bgcolor="#003333">Šeši</td>
   </tr>
 </table>

Pažvelgus į rezultatą, gausite norimą rezultatą.

Net jei atrodo, kad taip turėtų atrodyti, už jo esančioji sintaksė yra labai neefektyvi. Geriau, jei lentelės savybės valdomos naudojant CSS. Dėka naujų CSS savybių, galima ne tik pakeisti senus atributus į modernią sintaksę. Taip pat galima įgyvendinti papildomų funkcijų. Pavyzdžiui, dabar lengva paprastai pakeisti lentelės eilutes kintančiomis spalvomis.

Anksčiau HTML ir CSS laikais šiam rezultatui pasiekti reikėjo kartais didžiulių kodo triukšmų. Įsispraudus į galimybes, kurias šiuo metu teikia CSS, galima lengvai tai įgyvendinti.

tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}

Kaip jau minėta kelis kartus, CSS nagrinėsiu išsamiai šiame serijos apžvalgoje.