Hogyan alakítsunk ki táblázatot CSS-sel a maximális hatás és az észrevétel érdekében

Számos attribútummal és címkével találkozhat a HTML (Hypertext Markup Language) és más jelölőnyelvek, például az XML használata során. A táblázatok olyan attribútumok, amelyeket mindig használnia kell, hogy megkönnyítse a felhasználók számára a nagy mennyiségű adat beolvasását, összehasonlítását és elemzését.

A táblázatok segítségével a felhasználók egy pillantással láthatják a legfontosabb pontokat, következtetéseket vagy eredményeket, még a teljes cikk elolvasása nélkül is. Használhatja a CSS-t a táblák stílusának és megjelenésének megváltoztatásához.

Ez néhány ok, amiért szükség lehet egy táblázat stílusának kialakítására az alkalmazásban;

A vizuális megjelenés javítása: A normál asztalok unalmasak és egyszerűek lehetnek. Az ilyen asztalok stílusa javítja megjelenésüket és vonzóvá teszi őket a felhasználók számára.
A hozzáférhetőség javítása: A stílustáblázatok még a fogyatékkal élők számára is hozzáférhetővé tehetik őket.
Az olvashatóság javítása: Különböző stílustechnikák használatával megkönnyítheti a felhasználók számára a táblázatokban szereplő adatok áttekintését.
Márkaépítés: Megerősítheti márkaidentitását, ha egységes betűtípusokat és színeket alkalmaz a táblázatokon az alkalmazásban.
Jó a keresőmotorok számára: Az adatok táblázatos formátumba rendezése akkor hasznos, ha előkelő helyen szeretné helyezni webhelyét a keresőkben.

Tartalomjegyzék

Hozzon létre egy alaptáblázatot HTML-lel

A táblázat működésének bemutatásához HTML-ben hozzunk létre egy projekt mappát, navigáljunk a mappába, és hozzunk létre két fájlt; index.html, amely a HTML kódunkat fogja hordozni, és a styles.css, amely a CSS kódunkat (stílus) hordozza.

Ha követni szeretné, használja ezeket a parancsokat a kezdéshez;

mkdir Styling-HTML-Tables

cd Styling-HTML-Tables

érintse meg a Styling-HTML-Tables lehetőséget

Most már rendelkezik az alapvető projektmappával, amely segít a HTML-táblázatok létrehozásában. Különböző programozási nyelveket, azok felhasználási eseteit és példákat szeretnék bemutatni azokra a cégekre, amelyek ezeket a nyelveket használják.

HTML-tábla létrehozásához az összes adatot

…

címkébe kell zárni.

A HTML-fájlban hozza létre a HTML-dokumentum alapvető szerkezetét. Adja hozzá ezt a kódot a címkén belül.

<table>

        <tr>

          <th>Language</th>

          <th>Common Uses</th>

          <th>Companies Using</th>

        </tr>

        <tr>

          <td>Java</td>

          <td>Web apps, Android apps, enterprise applications</td>

          <td>Google, Amazon, LinkedIn</td>

        </tr>

        <tr>

          <td>Python</td>

          <td>Data science, web dev, automation</td>

          <td>Google, Dropbox,Spotify</td>

        </tr>

        <tr>

          <td>JavaScript</td>

          <td>Web dev, front-end dev, browser scripting</td>

          <td>PayPal, Facebook, Netflix</td>

        </tr>

        <tr>

          <td>C++</td>

          <td>Game dev, systems programming, embedded systems</td>

          <td>Tesla, Microsoft, Adobe</td>

        </tr>

        <tr>

          <td>Swift</td>

          <td>iOS development, macOS development</td>

          <td>Apple</td>

        </tr>

        <tr>

          <td>PHP</td>

          <td>Web dev, server-side scripting, CMSs</td>

          <td>WordPress, Wikipedia, Yahoo</td>

        </tr>

      </table>

Ha alaposan megnézi ezt a táblázatot, észre fog venni néhány további címkét a

Hogyan állítsuk be a WinRAR-t az archívum automatikus törlésére a kibontás után

címkén belül;

táblázat sora a

és	. Ezek a címkék a következőket teszik; A

elemen belül van. A

címke egy vagy több

címkén belül található. Alapértelmezés szerint a tartalma félkövérrel van szedve.

és

elemet tartalmazhat.

, a táblázat fejléce a

, táblaadatok, a táblázatcellákban lévő adatok tartalmát írja le.

Amikor megjeleníti a fent leírt kódot, akkor ez megjelenik a böngészőnkben;

A táblázatok stílusozásához használt CSS-tulajdonságok

A fent elkészített táblázat teljesen működőképes. Azonban sok kívánnivalót hagy maga után, mivel nincs megfelelő stílusa. A kívánt stílus eléréséhez és a táblázat tetszetőssé tételéhez CSS-t használunk.

Emlékszel az általunk létrehozott CSS-fájlra? Itt az ideje használni. A stílus működéséhez azonban először importálnia kell a CSS-fájlt a HTML-fájlba. A CSS-fájlunkat styles.css-nek neveztük el. A HTML-dokumentum szakaszában adja hozzá a következőket;

Készen állunk asztalunk stílusának kialakítására. A következőképpen formázhatjuk;

#1. Határ

A táblázatunk cellái köré szegélyt adhatunk. Ennek elérése érdekében a

és

elemeken határtulajdonságot definiálunk. A szegélyt 2px-re állíthatjuk.

th, td {

    border: 2px solid orange;

  }

A szegély értékét 2-re állítottuk, színünknek pedig a narancsot adtuk hozzá.

Amikor megjeleníti az új oldalt, a következőket fogja látni;

#2. Határomlás

Ha megvizsgálja a fenti képernyőképet, észre fogja venni, hogy minden cella határai között szóközök vannak. A border-collapse tulajdonság határozza meg, hogy a tábla szomszédos celláinak meg kell-e osztaniuk a keretet.

Ha azt szeretné, hogy a cellák megosszák a keretet, adja hozzá ezt a kódot a CSS-fájlhoz;

table {

  border-collapse: collapse;

}

Amikor megjeleníti az oldalt, láthatja, hogy a cellák a következőképpen osztják meg a szegélyeket;

Ha azt szeretné, hogy a celláknak különböző szegélyei legyenek, adja hozzá ezt a CSS-fájlhoz;

table {

  border-collapse: separate;

}

A megjelenített oldal a következőképpen fog megjelenni;

#3. Szegély-távolság

A border-space tulajdonság segítségével kis helyet hozhatunk létre a táblázatunk cellái között. A szabályt a CSS-fájlunkban a táblázat osztályán belül állítjuk be.

Ahhoz, hogy ez a tulajdonság működjön, a border-collapse: elkülönített; ingatlan.

A táblázat osztályunk a következőképpen alakulhat;

table {

    border-collapse: separate;

    border-spacing: 3px;

  }

A cellák szegélyei 3 képpont méretűek.

Amikor rendereli a táblázatot, a következőképpen fog kinézni;

#4. Táblázat-elrendezés

A Table-layout tulajdonság határozza meg a táblázat jellegét. Lehetnek olyan asztalok, amelyek mindig azonos hosszúságúak. Másrészt olyan táblázatokat is készíthet, amelyek tartalom alapján változnak.

Ha hasonló méretű cellákat szeretnénk, akkor a táblázat elrendezés tulajdonságát fixre állíthatjuk.

asztal-elrendezés: fix;

A végső kódunk az asztali osztályon a következő lesz;

table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

Ha azt szeretnénk, hogy a cellák a tartalom alapján változzanak, a table-layout tulajdonságot auto-ra állíthatjuk.

táblázat-elrendezés: auto;

CSS kódunkban a döntő asztal osztálya a következő lesz;

Ellenőrizze a táblázat utolsó celláját, és vegye figyelembe, hogy hozzáadtam ezeket a szavakat; MailChimp és még sok más.

Most már láthatja, hogy az utolsó sor cellái nagyobbak, mint a többi, mivel a táblázat elrendezése a tartalomtól függően rugalmas.

Az általunk eddig bemutatott stílus az egész asztalra összpontosított. Most már az egyes osztályokra összpontosíthatunk, ha módosítjuk a sorok, cellák vagy fejlécek háttérszínét, betűtípusát és szövegigazítási tulajdonságait.

Ezeket a tulajdonságokat a következőképpen formázhatjuk;

#5. Háttérszín

A legfelső sorunk hátterét sárga-zöldre változtathatjuk. A :first-child pszeudoosztály választót használhatjuk céljaink eléréséhez.

Adja hozzá ezt a kódot CSS-kódjához;

tr:first-child {

    background-color: yellowgreen;

  }

A végleges megjelenített kód a következőképpen jelenik meg;

#6. Betűtípus

Megváltoztathatjuk táblázatunk egyes sorainak, oszlopainak vagy celláinak betűstílusát vagy betűméretét.

A betűstílus megváltoztatásához oldalunk utolsó oszlopának tartalmát célozzuk meg (Felhasználó vállalatok).

Ennek az oszlopnak az összes tartalmát dőlt betűvel írjuk a td:last-child osztályválasztó megcélzásával. A következő kódot hozzáadhatja CSS-fájljához;

td:last-child {

  font-style: italic;

}

A végeredmény a következő lesz, amikor újratölti a renderelt oldalt;

Az első oszlop betűszínét és méretét is megváltoztathatjuk, hogy egyedivé tegyük.

Adja hozzá a következő kódot a CSS-fájlhoz;

tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

Amikor megjeleníti az oldalt, a következőkre kell figyelnie; az első oszlop (Nyelv) tartalma nagyobb betűmérettel rendelkezik, piros és félkövérebb.

Hogyan tegyük a táblázatot reagálóvá

Előfordulhat, hogy az általunk létrehozott táblázat nem reagál a kis képernyőkre. Használhatja a Chrome fejlesztői eszközeit vagy egy ehhez hasonló külső eszközt annak tesztelésére, hogy a kód érzékeny-e.

Számos megközelítés létezik, de csak az egyikre vonatkozik.

Kovesd ezeket a lepeseket;

Állítsa be a kódban a
elem szélességét;

table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}

Állítsa be a szótörést a td és a th értékre, hogy hosszú szavak legyenek a cellában.

th, td {

    border: 2px solid orange;

    word-break: break-word;

  }

Bevált gyakorlatok az asztalok formázásához

A CSS egyszer szórakoztató lehet, különösen, ha ismered. Íme néhány a legjobb gyakorlatok közül, amelyek biztosítják, hogy a legjobbat hozza ki az asztalok stílusa során;

Külső stíluslap használata: Lehetőségünk volt belső stíluslap használatára, de külső stíluslapot választottunk. Sikerült újra felhasználnunk stílusunkat a különböző táblákban, csökkentve ezzel a fejlesztési időt.
Legyen egyszerű: elragadhatja magát, és túlformálhatja az asztalait. Mindazonáltal mindig tartsa fenn az egyszerű kialakítást, és tegye a táblázatokat beolvashatóvá és olvashatóvá.
Szegélyek hozzáadása a táblázatokhoz: A szegély megkönnyíti a táblázatok olvasását és beolvasását.
Konzisztens színek használata: Ha több táblázatot tartalmaz weboldalain, ügyeljen arra, hogy egységes színeket és betűtípusokat használjon. A márkaszínek használatával javíthatja a márka láthatóságát.
Tegye a táblázatait adaptívvá: Előfordulhat, hogy soha nem tudhatja meg a végfelhasználók eszközeinek képernyőméretét.
Használjon feliratokat a táblázatok leírásához: A felirat röviden leírja, hogy miről szól a táblázat.
Használjon szóközöket a táblázatok elválasztásához: Ha több táblázat követi egymást, adjon hozzá néhány szóközt, és ennek megfelelően írja fel őket.

Következtetés

Úgy gondolom, hogy most már létrehozhat egy egyszerű HTML-táblázatot és stílusozhat. Lehet, hogy nem írtunk le mindent, mivel a HTML és a CSS széles körű. A rögzíteni kívánt adatok természetétől függően kisebb vagy nagyobb táblákat is létrehozhat.

Ha többet szeretne megtudni a CSS-ről és arról, hogyan használhatja fel a felhasználói felület javítására, tekintse meg a CSS csalólapjait.