HTML feladatok (77 feladat)

Feladat leírás:

Egyszerű táblázat elemei:
table - táblázatot definiáló elem
tr - a tábázat egy sorát definiáló elem
th - a táblázat sorának egy fejléc celláját definiáló elem
td - a táblázat sorának egy adatcelláját definiáló elem
Attribútumok:
colspan - egymás melletti cellák összevonása
rowspan - egymás feletti cellák összevonása

Összetett táblázat elemei:
caption - a táblázat felirata
thead - fejléc sorokat tartalmazó konténer
tbody - a táblázat adatsorait tartalmazó konténer, a táblázat törzse
tfoot - a táblázat lábléc-sora, tipikusan pl. összegző sor

Táblázat formázó CSS lehetőségek:
border: 1px solid black; - keretezés 1px széles folytonos fekete vonallal
border-collapse: collapse; - a határoló keretvonalak összevonása, hogy ne duplázódjanak
padding: 0.5em; - belső margó megadása

Pl.: egyszerű táblázat három sorral és két oszloppal
<table>
  <tr>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Pl.: összetett táblázat felirattal, négy sorral és két oszloppal, ahol az utolsó sor lábléc-sor.
<table>
  <caption></caption>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>


Oldd meg az alábbi űrlap feladatait: 10 Táblázatok - teszt

Feladat leírás:
Készíts el egy szabványos HTML fájlt "10-01 Tablazat alapok.html" néven.
- Az oldal nyelve legyen magyar, a kódolása pedig UTF-8.
- A böngésző fülszövege: Táblázat alapok
- A főcím egyes címsorral formázott.
- A főcím alatt legyen egy egyszerű 3 oszlop és 4 soros táblázat a mintának megfelelően. Használd ehhez a table, tr, th és td elemeket.
    • A bal felső sarokcellában kettőskereszt van.
    • Az első sor fejléc Fej 1 és Fej 2 feliratokkal.
    • Az első oszlopban Sor 1, Sor 2, Sor 3 feliratok vannak.
    • Az egyes adatcellákban a sor- és fejléc-számok vannak a minta szerint.

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Készíts el a mintának megfelelő szabványos HTML fájlt "10-02 Tablazat alapok.html" néven, amely tartalmazza az alábbi elemeket: table, caption, thead, tbody, tfoot
A megoldáshoz használd a mellékelt alap fájlt.

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Készíts el egy szabványos HTML fájlt "10-03 Tablazat cellaosszevonas.html" néven a mintának megfelelősen, amely tartalmaz egy táblázatot 3 oszloppal és 5 sorral, szabványos szemantikával,
azaz használva az alábbi elemeket: table, caption, thead, tbody, tfoot

Vond össze az alábbi cellákat:
- 2. sorban a 2. és 3. cellát
- 2. oszlopban a 3. és 4. sorban lévő cellákat

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Készíts el egy szabványos HTML fájlt "10-04 Vegyjelek.html" néven.

1. Állítsd be az oldal nyelvét magyarra és a kódolását UTF-8-ra.

2. A böngésző címsorában megjelenő cím „Vegyjelek” legyen. A normál betűméretnél legyen nagyobb a szöveg (larger) és vastagon szedett.

3. Hozz létre a mintának megfelelően egy táblázatot 6 sorral és két oszloppal, használva a caption, thead, tbody elemeket is.

3. A táblázat címfelirata "Vegyjelek" legyen.

4. Minden cellának legyen 0.3em belső margója.

5. táblázatban a kémiai képletekben lévő számok alsó indexek legyenek.

6. A táblázat cellái legyenek 1 képpont széles fekete színű kerettel szegélyezve. A mintának megfelelően a keretvonalak ne legyenek duplák.

6. Az utolsó sor háttérszíne világoskék (lightblue) legyen.

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Készíts el egy szabványos HTML fájlt "10-05 Tablazatformazas.html" néven, amely tartalmazza az alábbi elemeket: table, caption, thead, tbody, tfoot
A formázás során használandó jellemzők: border, border-collapse, padding, background-color, font-weight
A megoldáshoz használd a mellékelt alap fájlt.

Az eredményt ellenőrizd le egy online HTML validátorral!