El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Estilitzant taules

Següent ►
►

En aquest tema, aprendrem com aplicar estils a les taules HTML per fer-les més atractives i fàcils de llegir. Utilitzarem CSS per personalitzar l'aparença de les taules, incloent-hi els encapçalaments, files, columnes i cel·les.

Conceptes Clau

  1. Selectors CSS per a taules: Aprendrem com seleccionar elements específics de la taula per aplicar estils.
  2. Estilització bàsica: Aplicarem estils bàsics com colors de fons, marges, i padding.
  3. Estilització avançada: Utilitzarem pseudo-classes per estilitzar files alternes i altres elements dinàmics.
  4. Taules responsives: Veurem com fer que les taules siguin responsives per a diferents dispositius.

Selectors CSS per a Taules

Els selectors CSS ens permeten aplicar estils específics a diferents parts de la taula. A continuació es mostren alguns dels selectors més comuns:

  • table: Selecciona tota la taula.
  • th: Selecciona totes les cel·les d'encapçalament.
  • td: Selecciona totes les cel·les de dades.
  • tr: Selecciona totes les files.
  • thead: Selecciona la secció d'encapçalament de la taula.
  • tbody: Selecciona el cos de la taula.
  • tfoot: Selecciona el peu de la taula.

Estilització Bàsica

Comencem amb alguns estils bàsics per a la taula:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilitzant Taules</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
            text-align: left;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Nom</th>
                <th>Edat</th>
                <th>Ciutat</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Anna</td>
                <td>28</td>
                <td>Barcelona</td>
            </tr>
            <tr>
                <td>Joan</td>
                <td>34</td>
                <td>València</td>
            </tr>
            <tr>
                <td>Maria</td>
                <td>22</td>
                <td>Madrid</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Explicació del Codi

  • table { width: 100%; border-collapse: collapse; }: Fa que la taula ocupi el 100% de l'ample del contenidor i elimina els espais entre les cel·les.
  • th, td { border: 1px solid #ddd; padding: 8px; }: Aplica un marge i un padding a les cel·les de la taula.
  • th { background-color: #f2f2f2; text-align: left; }: Estilitza les cel·les d'encapçalament amb un color de fons i alineació de text.
  • tr:nth-child(even) { background-color: #f9f9f9; }: Aplica un color de fons diferent a les files parells per millorar la llegibilitat.
  • tr:hover { background-color: #ddd; }: Canvia el color de fons de la fila quan el ratolí passa per sobre.

Estilització Avançada

Podem utilitzar pseudo-classes i altres tècniques per aplicar estils més avançats:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    th {
        background-color: #4CAF50;
        color: white;
        text-align: left;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    tr:hover {
        background-color: #ddd;
    }
    td:first-child {
        font-weight: bold;
    }
    td:last-child {
        text-align: right;
    }
</style>

Explicació del Codi

  • td:first-child { font-weight: bold; }: Fa que el text de la primera cel·la de cada fila sigui en negreta.
  • td:last-child { text-align: right; }: Alinea el text de l'última cel·la de cada fila a la dreta.

Taules Responsives

Per fer que les taules siguin responsives, podem utilitzar la propietat overflow:

<style>
    .table-responsive {
        overflow-x: auto;
    }
</style>
<div class="table-responsive">
    <table>
        <!-- Contingut de la taula -->
    </table>
</div>

Explicació del Codi

  • .table-responsive { overflow-x: auto; }: Afegeix una barra de desplaçament horitzontal si la taula és més ampla que el contenidor.

Exercici Pràctic

Crea una taula HTML amb les següents dades i aplica els estils següents:

  1. La taula ha de tenir un ample del 100% i les cel·les han de tenir un marge de 1px.
  2. Les cel·les d'encapçalament han de tenir un color de fons blau i el text en blanc.
  3. Les files parells han de tenir un color de fons gris clar.
  4. La primera cel·la de cada fila ha de tenir el text en negreta.
  5. L'última cel·la de cada fila ha d'estar alineada a la dreta.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici Pràctic</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #007BFF;
            color: white;
            text-align: left;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        td:first-child {
            font-weight: bold;
        }
        td:last-child {
            text-align: right;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Nom</th>
                <th>Edat</th>
                <th>Ciutat</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Anna</td>
                <td>28</td>
                <td>Barcelona</td>
            </tr>
            <tr>
                <td>Joan</td>
                <td>34</td>
                <td>València</td>
            </tr>
            <tr>
                <td>Maria</td>
                <td>22</td>
                <td>Madrid</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Resum

En aquesta secció, hem après com aplicar estils bàsics i avançats a les taules HTML utilitzant CSS. Hem vist com utilitzar selectors per aplicar estils específics a diferents parts de la taula, com fer que les taules siguin responsives i com aplicar estils dinàmics amb pseudo-classes. Amb aquests coneixements, pots crear taules HTML atractives i funcionals per als teus projectes web.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats