HTML => tabelle

introduzione

L'elemento <table> HTML consente agli autori Web di visualizzare dati tabulari (come testo, immagini, collegamenti, altre tabelle, ecc.) In una tabella bidimensionale con righe e colonne di celle.

Sintassi

<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

Osservazioni

I vari elementi della tabella e i relativi attributi del contenuto definiscono insieme il modello della tabella. L'elemento <table> è l'elemento contenitore per i modelli tabella / dati tabulari. Le tabelle hanno righe, colonne e celle dati dai loro discendenti. Le righe e le colonne formano una griglia; le celle di un tavolo devono coprire completamente quella griglia senza sovrapposizioni. L'elenco seguente descrive i vari elementi nel modello di tabella:

<table> - L'elemento contenitore per i modelli tabella / dati tabulari. <table> rappresenta i dati con più di una dimensione sotto forma di tabella.
<caption> - Didascalia o titolo della tabella (come una figcaption in figure )
<col> - Una colonna (un elemento senza contenuto)
<colgroup> - Un raggruppamento di colonne
<thead> - Intestazione tabella (solo una)
<tbody> - Corpo della tabella / contenuto (più sono ok)
<tfoot> - Table footer (solo uno)
<tr> - Riga della tabella
<th> - Cella di intestazione della tabella
<td> - Cella dati della tabella

Semanticamente, le tabelle sono pensate per contenere dati tabulari. Puoi considerarlo come un modo per visualizzare e descrivere i dati che avrebbero senso in un foglio di calcolo (colonne e righe).

L'uso di tabelle per il layout non è raccomandato. Invece, usa le regole CSS per il layout e la formattazione, tra cui display: table .

Un'eccezione degna di nota visualizzata in genere nell'industria per quanto riguarda l'utilizzo del layout <table> riguarda l'e-mail HTML: alcuni client di posta elettronica, incluso Outlook, tornano ai vecchi motori di rendering dopo che Microsoft ha perso il proprio caso di monopolio contro l'UE. Per fare in modo che Microsoft non faccia parte del sistema operativo, IE ha semplicemente ripristinato il motore di rendering di Outlook con una versione precedente di Trident. Questo rollback semplicemente non supporta le moderne tecnologie web, quindi l'utilizzo dei layout basati su <table> per le email HTML è l'unico modo per garantire la compatibilità cross-browser / piattaforma / client.

Tavolo semplice

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

Ciò renderà una <table> composta da tre righe totali ( <tr> ): una riga di celle di intestazione ( <th> ) e due righe di celle di contenuto ( <td> ). <th> elementi sono intestazioni tabulari e <td> elementi sono dati tabulari . Puoi mettere tutto ciò che vuoi all'interno di <td> o <th> .

Titolo 1 / colonna 1	Titolo 2 / colonna 2
Riga 1 Colonna dati 1	Colonna dati riga 1 2
Riga 2 Colonna dati 1	Riga 2 Colonna dati 2

Spanning colonne o righe

Le celle di tabella possono estendersi su più colonne o righe utilizzando gli attributi colspan e rowspan . Questi attributi possono essere applicati agli elementi <th> e <td> .

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

Risulterà in

Tieni presente che non dovresti progettare una tabella in cui sia le righe che le colonne si sovrappongono in quanto HTML non valido e il risultato viene gestito in modo diverso da browser Web diversi.

rowspan = Un numero intero non negativo che specifica il numero di righe occupate da una cella. Il valore predefinito di questo attributo è uno ( 1 ). Un valore pari a zero ( 0 ) significa che la cella si estenderà dalla riga corrente fino all'ultima riga della tabella ( <thead> , <tbody> o <tfoot> ).

colspan = Un numero intero non negativo che specifica il numero di colonne espanse dalla cella corrente. Il valore predefinito di questo attributo è uno ( 1 ). Un valore pari a zero ( 0 ) significa che la cella si estenderà dalla corrente all'ultima colonna del gruppo di colonne <colgroup> in cui è definita la cella.

Tavolo con thead, tbody, tfoot e didascalia

HTML fornisce anche le tabelle con gli <thead> , <tbody> , <tfoot> e <caption> . Questi elementi aggiuntivi sono utili per aggiungere valore semantico alle tabelle e per fornire un posto per lo stile CSS separato.

Quando stampi un tavolo che non si adatta a una pagina (di carta), la maggior parte dei browser ripete il contenuto di <thead> su ogni pagina.

C'è un ordine specifico che deve essere rispettato e dovremmo essere consapevoli del fatto che non tutti gli elementi vanno a posto come ci si aspetterebbe. L'esempio seguente dimostra come devono essere posizionati i nostri 4 elementi.

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

I seguenti esempi di risultati sono dimostrati due volte: la prima tabella non ha stili, la seconda tabella ha alcune proprietà CSS applicate: background-color , color e border *. Gli stili sono forniti come guida visiva e non sono un aspetto essenziale dell'argomento in questione.

Elemento	Gli stili si applicano
`<caption>`	Testo giallo su sfondo nero.
`<thead>`	Testo in grassetto su sfondo viola.
`<tbody>`	Testo su sfondo blu
`<tfoot>`	Testo su sfondo verde
`<th>`	Bordi arancioni
`<td>`	Bordi rossi

Gruppi di colonne

A volte potresti voler applicare lo stile a una colonna oa un gruppo di colonne. O per scopi semantici, potresti voler raggruppare le colonne. Per fare ciò, usa gli elementi <colgroup> e <col> .

Il tag <colgroup> facoltativo consente di raggruppare le colonne. <colgroup> elementi <colgroup> devono essere elementi figli di <table> e devono venire dopo ogni elemento <caption> e prima di qualsiasi contenuto di tabella (ad es. <tr> , <thead> , <tbody> , ecc.).

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

Il tag <col> facoltativo consente di fare riferimento a singole colonne oa un intervallo di colonne senza applicare un raggruppamento logico. <col> elementi <col> sono facoltativi, ma se presenti, devono essere all'interno di un elemento <colgroup> .

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

I seguenti stili CSS possono essere applicati agli elementi <colgroup> e <col> :

border
background
width
visibility
display (come in display: none )
- display: none; rimuoverà effettivamente le colonne dal display, facendo sì che la tabella esegua il rendering come se tali celle non esistessero

Per ulteriori informazioni, vedere Dati tabulari HTML5 .

Ambito di titolo

th elementi th sono usati molto comunemente per indicare le intestazioni di righe e colonne di tabelle, in questo modo:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Questo può essere migliorato per l'accessibilità mediante l'uso dell'attributo scope . L'esempio precedente sarà modificato come segue:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope è conosciuto come un attributo enumerato , nel senso che può avere un valore da un insieme specifico di valori possibili. Questo set include:

col
row
colgroup
rowgroup

Riferimenti:

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

HTML
tabelle

Ricerca…