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.

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.

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!