HTML és CSS kezdőknek (Rész 08): Táblázatok (02)

Először megmutatom nektek, hogyan lehet cellákat egy sorban oszlopok szerint összekapcsolni. Ennek eredményeként egy oszlop a soron belül több oszlopon át fog terjedni.

Példa:

<table border="1">
   <tr>
      <th colspan="2">Időpontok</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>

Először is egy szó az itt használt th-elemről. Ezzel az elemmel jelöli meg a fejléc cellákat. A böngészők általában vastag és középre igazított formában jelenítik meg ezeket a cellákat. A böngészőben így néz ki az eredmény:

A bevezető th-ben a colspan attribútum van beállítva. Az értéknek az adott cella által átfogott oszlopok számát kell megadni. Mindenképpen figyelj arra, hogy az megadott oszlopok száma helyes legyen, különben nem kívánt eredményekkel járhat. A jelenlegi példában a th által jelölt fejlécnek két oszlopra kell terjednie. A maradék két sorban ismét két-két oszlop van.

Még egy tipp a sorok összekapcsolásával kapcsolatban. Az asztali számítógépeknek adj egy keretet (border) a fejlesztési fázis során. Így mindig azonnal látod, hogy az összekapcsolás valóban úgy működik-e, ahogyan szeretnéd.

Cellák egy oszlopban soronkénti összekapcsolása

Az rowspan attribútumon keresztül több cella összekapcsolható egy oszlopban. Az adott cella így több soron keresztül terjed el az oszlopban. Erről ismét egy példa:

<table border="1">
   <tr>
      <th rowspan="2">Szín</th>
      <td>Kék</td>
   </tr>
   <tr>
      <td>Zöld</td>
   </tr>
   <tr>
      <th rowspan="2">Méret</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

A böngészőben ez így néz ki:





A rowspan attribútumnak numerikus értéket kell rendelni. Ez végül meghatározza, hány soron keresztül terjed el a cella az oszlopban. Itt is természetesen érvényes, hogy az megadott sorok száma valóban helyes legyen.

Cellák egyszerre soronként és oszloponként összekapcsolása

Az rowspan és colspan attribútumokat együtt is lehet kombinálni. Így definiálhatók cellák, amelyek egyszerre több soron és oszlopon keresztül terjednek el. Erről ismét a legjobb egy példán keresztül szemléltetni.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Lakás</th>
      <td>5 szoba</td>
   </tr>
   <tr>
      <td>154 nm</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Parkolóhely</td>
      <td>Padlófűtés</td>
   </tr>
</table>

A böngészőben ez egy ilyen eredményt eredményez:





A két attribútum kombinálásakor természetesen szintén gondoskodni kell arról, hogy a cellák száma végül valóban megfelelő legyen.

Táblázatok feliratozása

Egy nagyon érdekes lehetőség a táblázatok érthetőbbé tétele a caption elem használata. Ennek segítségével címsor vagy jegyzék adható hozzá egy táblázathoz. A caption tartalma mindig a táblázaton kívül jelenik meg, annak ellenére, hogy a meghatározása a táblázatban történik.

Itt van egy tipikus alkalmazás a caption számára:





A táblázat felett egy címsor jelenik meg. Alapértelmezés szerint a címsor a táblázat felett középen látható. Természetesen ezt CSS segítségével egyénileg is módosíthatod.

A caption elem közvetlenül a bevezető <table> után van meghatározva.

Itt a teljes szintaxis az előzőleg mutatott példához:

<table border="1">
   <caption>Média-Adatok</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Téma</th>
         <th>Megtekintések</th>
         <th>Trend</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">2014. júniusi állapot</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>

Táblázat formázása

A táblázatok formázásához régebbi HTML verziókban számos attribútum létezett. Néhány példa arra, hogy miket lehetett szabályozni az attribútumok segítségével. (Természetesen a böngészők ma is támogatják ezeket az attribútumokat. Azonban az HTML5-ben ezeket már nem szabad használni).

• Külső keret

• Belső tábla keretek

• Szélességi és magassági adatok

• Rács vonalak

• Cellák tartalmának igazítása

• Színek

• Háttérképek

Láthatjátok, hogy valóban mindent az adott HTML attribútumok segítségével lehet vezérelni. Az alábbi példában egy tábla látható, amelyikben ezeket a lehetőségeket bőségesen kihasználták:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Eins</td>
      <td width="200" bgcolor="#00ffff">Zwei</td>
      <td width="200">Drei</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Vier<</td>
      <td bgcolor="#996666">Fünf</td>
      <td bgcolor="#003333">Sechs</td>
   </tr>
 </table>

Az eredmény megtekintése a kívánt eredményt adja.

Azonban még ha úgy is néz ki, ahogyan kellene, a mögöttes szintaxis minden más, mint hatékony. Jobb, ha a táblázat tulajdonságait CSS segítségével állítjuk be. Az új CSS tulajdonságoknak köszönhetően nemcsak hogy lecserélhetjük a régi attribútumokat modern szintaxisra, de további funkciók is megvalósíthatóak. Például ma már könnyedén lehet színesebbé tenni a táblázat sorait váltakozva.

A korábbi HTML és CSS időszakban néha hatalmas kódszövegeket kellett alkotni az ilyen eredmények elérése érdekében. Ha most azokra a lehetőségekre helyezzük a hangsúlyt, melyeket a CSS ma nyújt, ez teljesen egyszerűen megvalósítható.

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

Ahogy már többször is említettem, később kifejtem részletesen a CSS-t ennek a sorozatnak részeként.