diff options
Diffstat (limited to 'files/it/web/html/element/table/index.html')
| -rw-r--r-- | files/it/web/html/element/table/index.html | 437 |
1 files changed, 437 insertions, 0 deletions
diff --git a/files/it/web/html/element/table/index.html b/files/it/web/html/element/table/index.html new file mode 100644 index 0000000000..cbf9a66df3 --- /dev/null +++ b/files/it/web/html/element/table/index.html @@ -0,0 +1,437 @@ +--- +title: <table> +slug: Web/HTML/Element/table +tags: + - Elemento + - HTML + - Reference + - Tabella + - Tabelle + - Web +translation_of: Web/HTML/Element/table +--- +<h2 id="Sommario">Sommario</h2> + +<p>L'elemento HTML <code><table></code> rappresenta una Tabella.</p> + +<div class="note"><strong>Nota: </strong>Prima della nascita del <a href="/en-US/docs/CSS" title="CSS">CSS</a>, spesso gli elementi HTML {{HTMLElement("table")}} venivano usati per impaginare un documento. Questa pratica è stata scoraggiata a partire da HTML 4, e l'elemento {{HTMLElement("table")}} <strong>non dovrebbe</strong> essere usato per gestire il layout.</div> + +<h2 id="Utilizzo">Utilizzo</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Categoria del contenuto</a></td> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenuto di flusso</a></td> + </tr> + <tr> + <td>Contenuto permesso</td> + <td> + <div class="content-models"> + <div id="table-mdls"> + <p>In ordine:</p> + + <ul> + <li>un elemento {{HTMLElement("caption")}} <em>(opzionale)</em>;</li> + <li>zero o più elementi {{HTMLElement("colgroup")}};</li> + <li>un elemento {{HTMLElement("thead")}} <em>(opzionale)</em>;</li> + <li>una delle seguenti alternative: + <ul> + <li>uno o più elementi {{HTMLElement("tr")}};</li> + <li>zero o più elementi {{HTMLElement("tbody")}};</li> + </ul> + </li> + <li>un elemento {{HTMLElement("tfoot")}} <em>(opzionale)</em>.</li> + </ul> + </div> + </div> + </td> + </tr> + <tr> + <td>Omissione dei tag</td> + <td>Nessuna, sono necessari sia il tag di apertura che di chiusura.</td> + </tr> + <tr> + <td>Elementi genitore permessi</td> + <td>Qualsiasi elemento che accetti contenuto di flusso.</td> + </tr> + <tr> + <td>Normativa</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, sezione 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, sezione 11.2.1</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Attributi">Attributi</h2> + +<p>Questo elemento supporta gli<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">. </span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo indica come la tabella deve essere allineata rispetto al documento che la contiene. Può assumere uno dei seguenti valori: + <ul> + <li><code>left</code>, indica che la tabella deve essere mostrata sulla sinistra del documento;</li> + <li><code>center</code>, indica che la tabella deve essere mostrata al centro del documento;</li> + <li><code>right</code>, indica che la tabella seve essere mostrata sulla sinistra del documento.</li> + </ul> + + <div class="note"><strong>Nota: </strong> + + <ul> + <li><strong>Non usare questo attributo</strong>, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>align</code>, usare gli attributi <a href="/en-US/docs/CSS" title="CSS">CSS</a> di layout, ad esempio {{cssxref("margin-left")}} e {{cssxref("margin-right")}} con valore <code>auto</code> ( o {{cssxref("margin")}} con valore <code>0 auto</code>) per centre la tabella.</li> + <li>Fino alla version 4, Firefox supportava (solo usando la modalità <em>quirks mode) i valori</em> <code>middle</code>, <code>absmiddle</code>, e <code>abscenter</code> come sinonimi di <code>center</code><em>. </em></li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce il colore di sfondo della tabella e del suo contenuto. È un codice esadecimale di 6 cifre, come definito in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, preceduto da '#'. Può anche essere usato uno dei sedici colori predefiniti. + <table> + <tbody> + <tr> + <td style="width: 24px; background-color: black;"> </td> + <td><span>black</span> = "#000000"</td> + <td style="width: 24px; background-color: green;"> </td> + <td><span>green</span> = "#008000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: silver;"> </td> + <td><span>silver</span> = "#C0C0C0"</td> + <td style="width: 24px; background-color: lime;"> </td> + <td><span>lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: gray;"> </td> + <td><span>gray</span> = "#808080"</td> + <td style="width: 24px; background-color: olive;"> </td> + <td><span>olive</span> = "#808000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: white;"> </td> + <td><span>white</span> = "#FFFFFF"</td> + <td style="width: 24px; background-color: yellow;"> </td> + <td><span>yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: maroon;"> </td> + <td><span>maroon</span> = "#800000"</td> + <td style="width: 24px; background-color: navy;"> </td> + <td><span>navy</span> = "#000080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: red;"> </td> + <td><span>red</span> = "#FF0000"</td> + <td style="width: 24px; background-color: blue;"> </td> + <td><span>blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="width: 24px; background-color: purple;"> </td> + <td><span>purple</span> = "#800080"</td> + <td style="width: 24px; background-color: teal;"> </td> + <td><span>teal</span> = "#008080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: fuchsia;"> </td> + <td><span>fuchsia</span> = "#FF00FF"</td> + <td style="width: 24px; background-color: aqua;"> </td> + <td><span>aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Nota:</strong> Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>bgcolor</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo, il cui valore è un numero intero, definisce la dimensione in pixel dello spazio intorno alla tabella. Se impostato a <code>0</code>, implica che l'attributo {{htmlattrxref("frame", "table")}} abbia un valore nullo.</dd> + <dd> + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>border</code>, usare le proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} e {{cssxref("border-style")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce lo spazio tra il contenuto e il bordo, anche se non visibile, delle celle. Se è un valore in pixel, verrà applicato a tutti e quattro i lati; se è un valore percentuale, il contenuto verrà centrato e lo spazio verticale (sopra e sotto) verrà rappresentato da questa percentuale. Lo stesso per lo spazio orizzontale (destra e sinistra).</dd> + <dd> + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>cellpadding</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border-collapse")}} con valore <code>collapse</code> applicata all'elemento {{HTMLElement("table")}} e la proprietò {{cssxref("padding")}} all'elemento {{HTMLElement("td")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce lo spazio, in percentuale o in pixel, tra due celle (sia in verticale che in orizzontale), trail bordo superiore della tabella e le celle della prima riga, tra il bordo inferiore della tabella e l'ultima riga, tra il bordo sinistro della tabella e la prima colonna, e tra il bordo destro della tabella e l'ultima colonna.</dd> + <dd> + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>cellspacing</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border-spacing")}}<span style="line-height: 1.5;"> applicata all'elemento {{HTMLElement("table")}}.</span></div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce quale parte del frame che circonda la tabella deve essere mostrata. Può avere i seguenti valori:</dd> + <dd> + <table style="width: 668px;"> + <tbody> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>above</span></code></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>below</span></code></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>hsides</span></code></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>vsides</span></code></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>lhs</span></code></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>rhs</span></code></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>border</span></code></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>box</span></code></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><code><span>void</span></code></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>frame</code>, usare le proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border-style")}} e {{cssxref("border-width")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline()}}</dt> + <dd>Questo attributo definisce come devono essere mostrate le linee nella tabella. Può assumere i seguenti valori: + <ul> + <li><code><span>none</span></code>, indica che non deve essere mostrata nessuna linea (il valore di default);</li> + <li><code>groups</code>, indica che le linee devono essere mostrate solo tra i gruppi di righe (definiti dagli elementi {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} e {{HTMLElement("tfoot")}}) e tra i gruppi di colonne (definiti dagli elementi {{HTMLElement("col")}} e {{HTMLElement("colgroup")}});</li> + <li><code><span>rows</span></code>, indica che le linee devono essere mostrate tra le righe ({{HTMLElement("tr")}};</li> + <li><code><span>columns</span></code>, indica che le linee devono essere mostrate tra le colonne;</li> + <li><code>all</code>, indica che le linee devono essere mostrate sia tra le righe che le colonne.</li> + </ul> + + <div class="note"><strong>Nota</strong>: + + <ul> + <li>Lo stile delle linee viene definito dal browser e non può essere modificato.</li> + <li>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>rules</code>, usare le proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("border")}} sugli eleementi {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} o {{HTMLElement("colgroup")}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce un testo alternativo che descriva il contenuto della tabella nei brawser che non la possono mostrare. Spesso viene usato per fornire le informazioni anche a presone non vedenti, che visualizzano il documento tramite sintetizzatori vocali. Se tali informazioni possono essere utili per chiunque, considerare l'utilizzo dell'elemento {{HTMLElement("caption")}}. L'elemento <code>summary</code> non è obbligatorio e può essere omesso se l'elemento {{HTMLElement("caption")}} ne copre il ruolo.</dd> + <dd> + <div class="note"> + <p><strong>Nota: </strong>Non usare questo attributo per descrivere la tabella, essendo deprecato, ma uno dei seguenti metodi:</p> + + <ul> + <li>Del testo vicino alla tabella (questo è il modo meno semantico).</li> + <li>Un elemento {{HTMLElement("caption")}} nella tabella.</li> + <li>Un elemento {{HTMLElement("details")}} nell'elemento {{HTMLElement("caption")}} della tabella.</li> + <li>Includendo l'elemento {{HTMLElement("table")}} in un elemento {{HTMLElement("figure")}} e aggiungendo del testo che la descriva.</li> + <li>Includendo l'elemento {{HTMLElement("table")}} in un elemento {{HTMLElement("figure")}} e aggiundendo del testo che la descriva in un elemento {{HTMLElement("figcaption")}}.</li> + <li>Modificando la tabella così che la descrizione non sia più necessaria, ad esempio usando gli elementi {{HTMLElement("th")}} e {{HTMLElement("thead")}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd>Questo attributo definisce la larghezza della tabella. Può assumere un valore in pixel o in precentuale, che rappresenta la larghezza in percentuale rispetto al suo contenitore.</dd> + <dd> + <div class="note"><strong>Nota: </strong>Non usare questo attributo, essendo deprecato. Lo stile dell'elemento {{HTMLElement("table")}} dovrebbe essere definito usando il <a href="/en-US/docs/CSS" title="CSS">CSS</a>. Per ottenere un effetto simile all'attributo <code>width</code>, usare la proprietà <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("width")}}.</div> + </dd> +</dl> + +<h2 id="Interfaccia_DOM">Interfaccia DOM</h2> + +<p>Questo elemento implementa l'interfaccia <code><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Una_semplice_tabella">Una semplice tabella</h3> + +<pre class="brush: html" style="font-size: 12px;"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> +</pre> + +<h3 id="Altri_esempi">Altri esempi</h3> + +<pre class="brush: html"><p>Una tabella con un'intestazione</p> +<table> + <tr> + <th>Nome</th> + <th>Cognome</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Una tabella con thead, tfoot, e tbody</p> +<table> + <thead> + <tr> + <th>Intestazione 1</th> + <th>Intestazione 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer 1</td> + <td>Footer 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Corpo della tabella 1</td> + <td>Corpo della tabella 2</td> + </tr> + </tbody> +</table> + +<p>Tablella con colgroup</p> +<table> + <colgroup span="4" class="columns"></colgroup> + <tr> + <th>Stati</th> + <th>Capitali</th> + <th>Popolazione</th> + <th>Lingua</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 milioni</td> + <td>Inglese</td> + </tr> + <tr> + <td>Svezia</td> + <td>Stoccolma</td> + <td>9 milioni</td> + <td>Svedese</td> + </tr> +</table> + +<p>Tabella con colgroup and col</p> +<table> + <colgroup> + <col class="colonna1"> + <col class="colonne2e3" span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Limone</th> + <th>Arancia</th> + </tr> + <tr> + <td>Verde</td> + <td>Giallo</td> + <td>Arancione</td> + </tr> +</table> + +<p>Tabella con caption</p> +<table> + <caption>Descrizione</caption> + <tr> + <td>Dati</td> + </tr> +</table> +</pre> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th> </th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th> </th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<p>Internet Explorer 9 ha un bug che riguarda l'elemento <span style="line-height: 1.5;"> {{HTMLElement("table")}} e {{cssxref(":hover")}}; vedere </span><a href="/en-US/docs/Web/CSS/:hover#Browser_compatibility" style="line-height: 1.5;">la sezione "Compatibilità con i browser" dell'articolo riguardante <code>:hover</code></a><span style="line-height: 1.5;"> per altri dettagli.</span></p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>Altri elementi HTML riguardanti le tabelle: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Proprietà CSS che posso essere particolarmente utili applicate all'elemento {{HTMLElement("table")}}: + <ul> + <li>{{cssxref("width")}} per controllare la larghezza della tabella;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} per controllare i bordi delle tabelle, le linee e i frame;</li> + <li>{{cssxref("margin")}} e {{cssxref("padding")}} per controllare la disposizione del contenuto delle celle;</li> + <li>{{cssxref("text-align")}} e {{cssxref("vertical-align")}} per definire l'allineamento del testo nelle celle.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> |