Ultimi articoli pubblicati
1 1 1 1 1 1 1 1 1 1 (0 Votes)

Esempio 69: Il tag tfoot viene utilizzato per raggruppare il contenuto del piè di pagina in una tabella HTML. L'elemento tfoot viene utilizzato insieme agli elementi thead e tbody per specificare ogni parte di una tabella (piè di pagina, intestazione, corpo). I browser possono utilizzare questi elementi per abilitare lo scorrimento del corpo della tabella indipendentemente dall'intestazione e dal piè di pagina. Inoltre, quando si stampa una tabella di grandi dimensioni che si estende su più pagine, questi elementi possono consentire la stampa dell'intestazione e del piè di pagina della tabella nella parte superiore e inferiore di ogni pagina.   Risultato

<!DOCTYPE html>

<html lang="it">

<head>

<meta charset="UTF-8">

<title>Bella tabella</title>

<link rel="stylesheet" type="text/css" href="stili/stili69.css">

</head>


<body>

<p>Il tag tfoot viene utilizzato per raggruppare il contenuto del piè di pagina in una tabella HTML.<br><br>

L'elemento tfoot viene utilizzato insieme agli elementi thead e tbody per specificare ogni parte di una tabella (piè di pagina, intestazione, corpo). <br><br>

I browser possono utilizzare questi elementi per abilitare lo scorrimento del corpo della tabella indipendentemente dall'intestazione e dal piè di pagina. Inoltre, quando si stampa una tabella di grandi dimensioni che si estende su più pagine, questi elementi possono consentire la stampa dell'intestazione e del piè di pagina della tabella nella parte superiore e inferiore di ogni pagina. <br><br>

Nota: l'elemento tfoot deve contenere uno o più tag tr all'interno.<br><br>

L'attributo colspan definisce il numero di colonne che una cella dovrebbe occupare.<br><br> </p>

    <table>
        <thead>
            <th>Intestazione 1 (th)</th>
            <th>Intestazione 2 (th)</th>
            <th>Intestazione 3 (th)</th>
            <th>Intestazione 4 (th)</th>
            <th>Intestazione 5 (th)</th>
        </thead>
        
        <tfoot>
            <tr>
              <td colspan="5">questa riga è così grazie a attributo colspan (su tag td)</td>
            </tr>
        </tfoot>
        
        <tbody>
            <tr>
                <td>William Smith</td>
                <td>555-642-7371</td>
                <td>Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.</td>
                <td>ACME Industries</td>
                <td>2014-10-21</td>
            </tr>
            <tr>
                <td>Bob Morris</td>
                <td>555-999-2991</td>
                <td>Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.</td>
                <td>ABC Corp</td>
                <td>2014-09-12</td>
            </tr>
        </tbody>

        <caption>
        Questo è il tag caption
        </caption>
    </table>


</body>

<!-- esempio realizzato o adattato per il corso gratuito Html/Css di https://www.guideinformaticagratis.it/ -->

</html>


CSS


body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 5;
    color: #333333;
}

table, th, td {
    border: 1px solid black;
    padding:5px;
    border-collapse: collapse;
}

thead {
    background: #3056A0;
    color: white;
}

table > caption {
    font-weight: bold;
}

tfoot {
    font-size: 0.75em;
    text-align:right;
}

tbody tr:nth-child(even) {
    background: #E6E6F5;
}


Risultato  






Commenti (0)

There are no comments posted here yet

Lascia i tuoi commenti

  1. Posting comment as a guest.
Allegati (0 / 3)
Share Your Location