HTML Tabella Esempio
| Numero | Nome di battesimo | Cognome | Punti |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
Definire tabelle HTML
Esempio
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Prova tu stesso " Esempio spiegato:
Le tabelle sono definite con il <table> tag.
Le tabelle sono suddivise in righe della tabella con il <tr> tag.
Le righe della tabella sono divisi in dati della tabella con il <td> tag.
Una riga della tabella può anche essere diviso in rubriche della tabella con il <th> tag.
I dati della tabella <td> sono i contenitori di dati della tabella.
Possono contenere tutti i tipi di elementi HTML, come testo, immagini, elenchi, altre tabelle, ecc
Una tabella HTML con un attributo border
Se non si specifica un bordo per la tavola, sarà visualizzato senza confini.
Un bordo può essere aggiunto utilizzando il border attributi:
Esempio
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Prova tu stesso " Il border attributo è sulla sua via d'uscita dello standard HTML! E 'meglio usare i CSS.
Per aggiungere i bordi, utilizzare la proprietà border CSS:
Ricordarsi di definire i confini sia per la tavola e le celle della tabella.
Una tabella HTML con bordi collassati
Se si desidera che i bordi per collassano in una frontiera, aggiungere CSS border-collapse :
Una tabella HTML con Margine celle
Cellulare imbottitura specifica lo spazio tra il contenuto delle cellule e dei suoi confini.
Se non si specifica un'imbottitura, le celle della tabella vengono visualizzati senza imbottitura.
Per impostare l'imbottitura, utilizzare la CSS padding immobile:
Esempio
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} Prova tu stesso " HTML titoli di tabella
Intestazioni tavola sono definiti con il <th> tag.
Per impostazione predefinita, tutti i principali browser visualizzano intestazioni delle tabelle in grassetto e centrato:
Esempio
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Prova tu stesso " A sinistra-allineare i titoli di tabella, utilizzare il CSS text-align Proprietà:
Una tabella HTML con bordo spaziatura
spaziatura dei bordi specifica lo spazio tra le celle.
Per impostare la spaziatura bordo di un tavolo, usare il CSS border-spacing proprietà:
Se la tabella è collassato confini, border-spacing non ha effetto.
Celle di tabella che si estendono su molte colonne
Per fare un arco di cellule più di una colonna, utilizzare il colspan attributi:
Esempio
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> Prova tu stesso " Celle di tabella che si estendono su più righe
Per effettuare un arco cella più di una riga, utilizzare il rowspan attributo:
Esempio
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table> Prova tu stesso " Una tabella HTML con una didascalia
Per aggiungere una didascalia a una tabella, utilizzare il <caption> tag:
Esempio
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table> Prova tu stesso " Il <caption> tag deve essere inserito immediatamente dopo il <table> tag.
Uno stile speciale per One Table
Per definire uno stile speciale per un tavolo speciale, aggiungere un id attributo alla tabella:
Esempio
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Ora è possibile definire uno stile speciale per questa tabella:
table#t01 {
width: 100%;
background-color: #f1f1c1;
} Prova tu stesso " E aggiungere più stili:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
} Prova tu stesso " Riassunto capitolo
- Utilizzare il codice HTML <table> elemento per definire una tabella
- Utilizzare il codice HTML <tr> elemento per definire una riga di tabella
- Utilizzare il codice HTML <td> elemento per definire una tabella di dati
- Utilizzare il codice HTML <th> elemento per definire un'intestazione tavolo
- Utilizzare il codice HTML <caption> elemento per definire una didascalia tavolo
- Utilizzare la CSS border proprietà per definire un bordo
- Utilizzare il CSS border-collapse proprietà a crollare i bordi delle celle
- Utilizzare la CSS padding proprietà per aggiungere imbottitura per le cellule
- Utilizzare il CSS text-align proprietà per allineare il testo delle cellule
- Utilizzare il CSS border-spacing proprietà per impostare la spaziatura tra le celle
- Utilizzare l' colspan attributo per fare una campata cellule molte colonne
- Utilizzare l' rowspan attributo per fare una campata cellule molte righe
- Utilizzare l' id attributo per definire univocamente una tabella
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»
Tag tabella HTML
| Etichetta | Descrizione |
|---|---|
| <table> | Definisce una tabella |
| <th> | Definisce una cella di intestazione in una tabella |
| <tr> | Definisce una riga in una tabella |
| <td> | Definisce una cella in una tabella |
| <caption> | Definisce una didascalia tavolo |
| <colgroup> | Specifica un gruppo di una o più colonne di una tabella per la formattazione |
| <col> | Specifica proprietà di colonna per ogni colonna di un <colgroup> elemento |
| <thead> | Raggruppa il contenuto di intestazione in una tabella |
| <tbody> | Gruppi il contenuto del corpo in una tabella |
| <tfoot> | Raggruppa il contenuto piè di pagina in una tabella |