html-esempio 9

<!DOCTYPE html>

<head>

<title>Tabella con Icone, Codice Unicode e Nome</title>

<style>

/* Stile per il corpo del documento */

body {

font-family: Arial, sans-serif;

}

/* Stile per il titolo */

h1 {

text-align: center; /* Centra il testo */

margin-top: 40px; /* Spazio superiore */

margin-bottom: 40px; /* Spazio inferiore */

}

/* Stile per la tabella */

table {

width: 70%; /* Larghezza della tabella al 70% della pagina */

margin: 20px auto; /* Centra la tabella nella pagina con margini esterni */

border-collapse: separate; /* Separazione dei bordi delle celle */

border-spacing: 5px; /* Spazio tra le celle */

border: 4px solid #000; /* Bordo esterno spesso */

border-radius: 10px; /* Bordi tondeggianti */

background-color: #e0e0e0; /* Sfondo giallo chiaro */

}

/* Stile per la cella dell'intestazione */

th {

background-color: gray;

color: white;

font-weight: bold;

border: 4px double #000; /* Bordo doppia linea */

padding: 15px; /* Spazio interno delle celle */

text-align: center; /* Allineamento del testo al centro delle celle */

border-radius: 10px; /* Bordi tondeggianti */

font-size: 24px; /* Caratteri più grandi */

}

/* Stile per le celle delle righe normali */

td {

background-color: #fffacd; /* Celeste molto chiaro */

border: 4px double #000; /* Bordo doppia linea */

padding: 15px; /* Spazio interno delle celle */

text-align: center; /* Allineamento del testo al centro delle celle */

border-radius: 10px; /* Bordi tondeggianti */

font-weight: bold;

font-size: 24px; /* Caratteri più grandi */

}

/* Stile per le icone */

.icona {

font-size: 30px; /* Icone più grandi */

}

</style>

</head>

<body>

<h1>Tabella con Icone, Codice Unicode e Nome</h1>

<table>

</colgroup>

<tr>

<th>Icona</th>

<th>Codice Unicode</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Aereo</td>

</tr>

<tr>

<td>Valigia</td>

</tr>

<tr>

<td>Telefono</td>

</tr>

</table>

</body>

</html>

Ritorna agli Esempi