Ebben a leckében megtanuljuk, hogyan kell táblázatot beszúrni egy HTML dokumentumba. Formázás nélkül a táblázataink keret nélkül jelennek meg, az utólagos formázást a CSS-ről szóló részben oldjuk meg. A keret nélküli táblázatok így is alkalmasak a cellák tartalmának egymás mellé/alá rendezésében.
Új címkék ebben a leckében:
<table> </table> - a táblázat elejét és végét jelöljük ezzel a címkével.
<tr> </tr> - egy sor elejét és végét jelöljük ezzel. A table row (táblázat sorának) rövidítése.
<td> </td> - egy cella tartalmát fogja közre. A table data (táblázat adata) rövidítése.
<th> </th> - kiemelt, címcellák tartalmát fogják közre. A table header (táblázat fejléc) rövidítése.
<caption> </caption> - címet adhatunk a táblázatnak.
Példa:
Kiegészítések
A címkék használata:
- A cellák tartalmát a <td> és <th> címkék zárják közre. A <table> és <tr> nem tartalmaznak közvetlenül adatot.
- A <caption> közvetlenül a <table> után következik, de ki is hagyható.
- Címcellára <th> sincs föltétlenül szükség.
Cellák „összeolvasztása”
A colspan és rowspan tulajdonságok/attribútumok cellák összevonására alkalmasak. A <td> vagy <th> címkén belül kell elhelyezni (hasonlóan a type tulajdonsághoz a listáknál).
Pl:
<td colspan=”3”> – egy cella egyszerre három oszlopot foglal el (egy sorban).
<td rowspan=”2”> – egy cella egyszerre két sort foglal el (egy oszlopban).
Készítd egy 6 soros és 2 oszlopos táblázatot.
h3 heading: Job postings containing top language.
Az első táblázat címe: Language.
A második táblázat címe: 2017
A harmadik táblázat címe: 2018
Első oszlop: Java, Python, JavaScript, C ++, C #, PHP, Perl
Második oszlop: 68k, 41k, 40k, 33k, 28k, 13k , 17k
Harmadik oszlop: 62k, 46k, 38k, 31k, 27k, 14k, 14k
<table>
<tr><th colspan="2">Colors</th></tr>
<tr><td>Red</td><td rowspan="2">Green</td></tr>
<tr><td>Blue</td></tr>
</table>
