Az alapértelmezett HTML-táblázatok meglehetősen letaglózónak tűnnek – erősítse meg őket néhány szép CSS-effektussal.

Táblázat hozzáadása a webhelyhez hasznos módja annak, hogy nagy mennyiségű információt világosan jelenítsen meg. A táblázatok hatékony helykihasználást is biztosítanak, és megkönnyítik az összetett adatok olvasását és összehasonlítását.

A CSS használatával a táblázatokat látványosabbá alakíthatja. Ezzel javíthatja webhelye általános felhasználói élményét is.

Modern egysoros és oszlopos kialakítás

Hozzáadhat egy egyszerű táblázattervet egyetlen sorokkal és oszlopokkal, egyesített cellák nélkül. A táblázat stílusának kialakítása azt is biztosítja, hogy weboldala vonzó legyen a felhasználó számára. Az asztali stíluson kívül más is létezik klassz HTML effektusok és CSS megjelenítési webhely-elrendezések hozzáadhatja webhelyéhez.

Ebben a gyakorlatban megtekintheti a kódot GitHub repo.

  1. Egy új HTML-fájlban adja hozzá az alapvető HTML-kódszerkezetet:
    html>
    <html>
    <fej>
    <cím>Az én egyszerű táblázatomcím>
    fej>
    <test>

    test>
    html>
    2. instagram viewer
  2. A törzsön belül adjon hozzá táblázatcímkéket:
    <asztal>

    asztal>
  3. A HTML táblázat elemnek tartalmaznia kell táblázat sora címkéket a táblázat minden sorához. A felső sort általában címsorokhoz használják. Használat táblázat fejléce HTML-címkék, amelyek a táblázat egyes oszlopait képviselik:
    <tr>
    <th>1. fejlécth>
    <th>2. fejlécth>
    <th>3. fejlécth>
    tr>
  4. Adjon hozzá további sorokat a fejlécesor alá. Használat táblázat adatai HTML-címkék adatok hozzáadásához a táblázat egyes celláihoz:
    <tr>
    <td>1. sor, 1. oszloptd>
    <td>1. sor, 2. oszloptd>
    <td>1. sor, 3. oszloptd>
    tr>
    <tr>
    <td>2. sor, 1. oszloptd>
    <td>2. sor, 2. oszloptd>
    <td>2. sor, 3. oszloptd>
    tr>
    <tr>
    <td>3. sor, 1. oszloptd>
    <td>3. sor, 2. oszloptd>
    <td>3. sor, 3. oszloptd>
    tr>
    <tr>
    <td>4. sor, 1. oszloptd>
    <td>4. sor, 2. oszloptd>
    <td>4. sor, 3. oszloptd>
    tr>
    <tr>
    <td>5. sor, 1. oszloptd>
    <td>5. sor, 2. oszloptd>
    <td>5. sor, 3. oszloptd>
    tr>
  5. Adjon hozzá egy stíluscímkét a head címkén belül. Adjon hozzá néhány általános stílust a táblázathoz, mint például árnyékok, lekerekített asztalsarkok, betűtípusok és margók:
    <stílus>
    asztal {
    határ-összeomlás: összeomlás;
    szélesség: 100%;
    szín: #333;
    betűtípus család: Arial, sans-serif;
    betűméret: 14px;
    szöveg igazítás: bal;
    határ-sugár: 10px;
    túlcsordulás: rejtett;
    doboz-árnyék: 0 0 20pxrgba(0, 0, 0, 0.1);
    árrés: auto;
    margin-top: 50px;
    margó-alsó: 50px;
     } 
    stílus>
  6. Stílusozza a táblázat fejlécét, hogy háttérszínt és igazított szöveget adjon neki:
    asztalth {
    háttérszín: #ff9800;
    szín: #fff;
    font-weight: bátor;
    párnázás: 10px;
    szöveg-átalakítás: nagybetűs;
    betűtávolságok: 1px;
    border-top: 1pxszilárd#fff;
    határ-alsó: 1pxszilárd#ccc;
    }
  7. Stíluszhatja a táblázat sorait, hogy váltakozhassanak a szürke és fehér színek között, és hatást adjon, amikor az egérmutatót a sor fölé viszi:
    asztaltr:n-edik gyerek (páros)td {
    háttérszín: #f2f2f2;
    }
    asztaltr:lebegtd {
    háttérszín: #ffedcc;
    }
  8. Stílusozd az adatokat a táblázat celláiban:
    asztaltd {
    háttérszín: #fff;
    párnázás: 10px;
    határ-alsó: 1pxszilárd#ccc;
    font-weight: bátor;
    }
  9. Nyissa meg a HTML-fájlt a táblázat webböngészőben való megtekintéséhez:

Többsoros cellás asztalterv

Egyes táblázatok egyesített sorokat tartalmazó oszlopokat tartalmaznak, amelyek többsoros cellát alkotnak.

  1. Távolítsa el az összes aktuális táblázatsort, és csak a felsőt tartsa meg a fejlécekkel:
    <asztal>
    <tr>
    <th>1. fejlécth>
    <th>2. fejlécth>
    <th>3. fejlécth>
    tr>
    asztal>
  2. Hozzon létre egy többsoros cellát a rowspan attribútummal. Ezzel kibővíti a cellát a megadott számú soron keresztül.
     1. szakasz 
    <tr>
    <tdsortávolság="2">Többsoros cellatd>
    <td>1. sor, 2. oszloptd>
    <td>1. sor, 3. oszloptd>
    tr>
    <tr>
    <td>2. sor, 2. oszloptd>
    <td>2. sor, 3. oszloptd>
    tr>
  3. Ha egy másik többcellás sort ad hozzá eltérő sorhosszúsággal, adja hozzá a megfelelő számot táblázat sorai HTML címkék. Ennek célja, hogy megfeleljen a cella által átívelt sorok magasságának vagy számának. Ha például egy cella sorhossza 3, akkor a táblázat megfelelő igazításához három sort kell hozzáadnia a többi oszlophoz.
     2. szakasz 
    <tr>
    <tdsortávolság="3">Többsoros cellatd>
    <td>3. sor, 2. oszloptd>
    <td>3. sor, 3. oszloptd>
    tr>
    <tr>
    <td>4. sor, 2. oszloptd>
    <td>4. sor, 3. oszloptd>
    tr>
    <tr>
    <td>5. sor, 2. oszloptd>
    <td>5. sor, 3. oszloptd>
    tr>
  4. Nyissa meg a HTML-fájlt a táblázat webböngészőben való megtekintéséhez:

Egyesített sortáblázat kialakítása

A többsoros cellákhoz hasonlóan a táblázatokban is lehetnek olyan sorok, amelyek több oszlopon egyesülnek.

  1. Távolítsa el az összes aktuális táblázatsort, és csak a felsőt tartsa meg a fejlécekkel:
    <asztal>
    <tr>
    <th>1. fejlécth>
    <th>2. fejlécth>
    <th>3. fejlécth>
    tr>
    asztal>
  2. Adjon hozzá további táblázatsorokat a táblázathoz. Használja a colspan attribútumot a sorok egyikének egyesítéséhez 3 oszlopban:
     1. szakasz 
    <tr>
    <tdstílus="háttérszín: #ffedcc"colspan="3">Q1td>
    tr>
    <tr>
    <td>2. sor, 1. oszloptd>
    <td>2. sor, 2. oszloptd>
    <td>2. sor, 3. oszloptd>
    tr>
    <tr>
    <td>3. sor, 1. oszloptd>
    <td>3. sor, 2. oszloptd>
    <td>3. sor, 3. oszloptd>
    tr>
    <tr>
    <td>4. sor, 1. oszloptd>
    <td>4. sor, 2. oszloptd>
    <td>4. sor, 3. oszloptd>
    tr>
  3. Adjon hozzá egy másik egyesített sort a táblázat szakaszainak elválasztásához:
     2. szakasz 
    <tr>
    <tdstílus="háttérszín: #ffedcc"colspan="3">Q2td>
    tr>
    <tr>
    <td>6. sor, 1. oszloptd>
    <td>6. sor, 2. oszloptd>
    <td>6. sor, 3. oszloptd>
    tr>
    <tr>
    <td>7. sor, 1. oszloptd>
    <td>7. sor, 2. oszloptd>
    <td>7. sor, 3. oszloptd>
    tr>
    <tr>
    <td>8. sor, 1. oszloptd>
    <td>8. sor, 2. oszloptd>
    <td>8. sor, 3. oszloptd>
    tr>
  4. Nyissa meg a HTML-fájlt a táblázat webböngészőben való megtekintéséhez:

Használjon vonzó táblázatokat, hogy a legtöbbet hozza ki adataiból

A HTML-táblázatok nagyszerű módja a strukturált adatok megjelenítésének a webhelyen. Az alapértelmezett megjelenés javítása érdekében stílusozhatja őket CSS-sel. Ügyeljen azonban arra, hogy ne ragadjon el, és használjon táblázatokat az elrendezéshez – akadálymentesítési okokból tartsa meg őket szigorúan az adatokhoz.

A nagyobb táblázatok létrehozása és frissítése fáradságos lehet, különösen, ha olyan oszlopokat és sorokat használ, amelyek átívelnek. Írhat saját kódot a jelölés létrehozásához, vagy kihasználhatja az olyan barátságosabb szintaxisokat, mint a Markdown.