CSS táblázat formázás (CSS table)

Egy létrehozott HTML táblázat még nem néz ki valami jól, de szerencsére lehetőségünk van CSS-el nagyon jól megformázni.

0
CSS alapok (A CSS alapjainak összefoglalója) című cikk nyitóképe

CSS táblázat formázás (CSS table)

Arról már tanultunk korábban, hogy hogyan lehet létrehozni egy táblázatot HTML nyelvben, most pedig jöjjön az, hogy ezt a létrehozott táblázatot hogyan formázhatjuk CSS segítségével.

Tartalomjegyzék

Formázatlan táblázat

Ha szimplán mindenféle CSS formázás nélkül létrehozunk egy táblázatot, akkor az így néz ki:

HTML kód

<table>
    <tr>
        <th>Első címsor</th>
        <th>Második címsor</th>
    </tr>
    <tr>
        <td>1.1 cella</td>
        <td>1.2 cella</td>
    </tr>
    <tr>
        <td>2.1 cella</td>
        <td>2.2 cella</td>
    </tr>
</table>
Code language: HTML, XML (xml)

Eredmény

Első címsor Második címsor
1.1 cella 1.2 cella
2.1 cella 2.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Valljuk be nem a legszebb látvány, nem is igazán hasonlít egy táblázatra, inkább hasonlít egy szimplán begépelt szövegre. Azért van szükség a táblázat formázására, hogy a táblázat egy szokványosabb kinézetet kapjon, sokkal jobban hasonlítson arra, amit elvárunk egy táblázattól.

Táblázat keret

Első lépésként adjunk a táblázatnak egy szegélyt, keretet. Már ez is sokat dob az összképen. Ezt így tehetjük meg:

table, th, td {
    border: 1px solid black;
}
Code language: CSS (css)

Ezzel a kóddal egy 1 pixeles folytonos fekete vonalat állítunk be a táblázatnak, a th-nak és a td-nek. Ebből kifolyólag dupla vonal fog keletkezni a táblázatunkban, amelyet ezzel a kóddal szüntethetünk meg:

border-collapse: collapse;
Code language: HTTP (http)

Példa

HTML kód

<!DOCTYPE html>
  <html>
    <head>
      <style>
         table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
          }
      </style>
    </head>
    <body>
      <table>
         <tr>
            <th>Első címsor</th>
            <th>Második címsor</th>
        </tr>
        <tr>
            <td>1.1 cella</td>
            <td>1.2 cella</td>
        </tr>
        <tr>
           <td>2.1 cella</td>
           <td>2.2 cella</td>
       </tr>
     </table>
   </body>
 </html>
Code language: HTML, XML (xml)

Eredmény

Első címsor Második címsor
1.1 cella 1.2 cella
2.1 cella 2.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Táblázat fejléc

Kezd egész jól kinézni a táblázatunk, de még ne álljunk itt meg. Próbáljuk ki most azt, hogy megváltoztatjuk a táblázatunk fejlécének kinézetét: adjunk neki egy háttérszínt, esetleg egy szövegszínt és tegyük vastagabbá a betűket.

A fejlécre a th-val hivatkozhatunk:

th {
  background-color: yellow;
  font-weight: bold;
}
Code language: CSS (css)

Példa

HTML kód

<!DOCTYPE html>
  <html>
    <head>
      <style>
         table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            }

         th {
            background-color: yellow;
            font-weight: bold;
            }
      </style>
    </head>
    <body>
      <table>
         <tr>
            <th>Első címsor</th>
            <th>Második címsor</th>
        </tr>
        <tr>
            <td>1.1 cella</td>
            <td>1.2 cella</td>
        </tr>
        <tr>
           <td>2.1 cella</td>
           <td>2.2 cella</td>
       </tr>
     </table>
   </body>
 </html>
Code language: HTML, XML (xml)

Eredmény

Első címsor Második címsor
1.1 cella 1.2 cella
2.1 cella 2.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Sorok elkülönítése

Bár most nekünk nagyon kevés sorunk van, de ez a funkció igazán hasznos, ha sok sor van a táblázatunkban. Segít, hogy könnyebben átlátható legyen a táblázat. Nézzük miről van szó:

tr:nth-child(even) { background-color: #e6e6e6;; }

Ezzel a kis kóddal azt tudjuk beállítani, hogy minden páratlan tr-nek más legyen a háttérszíne.

Példa

HTML kód

<!DOCTYPE html>
  <html>
    <head>
      <style>
         table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            }

         th {
            background-color: yellow;
            font-weight: bold;
            }

         tr:nth-child(even) {
    background-color: #e6e6e6;;
            }
      </style>
    </head>
    <body>
      <table>
         <tr>
            <th>Első címsor</th>
            <th>Második címsor</th>
        </tr>
        <tr>
            <td>1.1 cella</td>
            <td>1.2 cella</td>
       </tr>
        <tr>
           <td>2.1 cella</td>
           <td>2.2 cella</td>
       </tr>
       <tr>
           <td>3.1 cella</td>
           <td>3.2 cella</td>
       </tr>
     </table>
   </body>
 </html>
Code language: HTML, XML (xml)

Eredmény

Első címsor Második címsor
1.1 cella 1.2 cella
2.1 cella 2.2 cella
3.1 cella 3.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Kijelölt sor

Utolsó módosításként állítsuk be, hogy történjen valamiféle kiemelés azon a soron, amelyiken éppen tartózkodik az egér.

tr:hover {
     background-color: pink;
}
Code language: CSS (css)

Ezzel a kóddal rózsaszínre változtatjuk annak a tr-nek a hátterét, amelyiken éppen van az egér.

Példa

HTML kód

<!DOCTYPE html>
  <html>
    <head>
      <style>
         table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            }

         th {
            background-color: yellow;
            font-weight: bold;
            }

         tr:nth-child(even) {
            background-color: #e6e6e6;;
            }

         tr:hover {
            background-color: pink;
            }
      </style>
    </head>
    <body>
      <table>
         <tr>
            <th>Első címsor</th>
            <th>Második címsor</th>
        </tr>
        <tr>
            <td>1.1 cella</td>
            <td>1.2 cella</td>
       </tr>
        <tr>
           <td>2.1 cella</td>
           <td>2.2 cella</td>
       </tr>
       <tr>
           <td>3.1 cella</td>
           <td>3.2 cella</td>
       </tr>
     </table>
   </body>
 </html>
Code language: HTML, XML (xml)

Eredmény

Első címsor Második címsor
1.1 cella 1.2 cella
2.1 cella 2.2 cella
3.1 cella 3.2 cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!

További leckék