diff options
Diffstat (limited to 'files/it/web/html/element/table')
| -rw-r--r-- | files/it/web/html/element/table/index.html | 437 |
1 files changed, 0 insertions, 437 deletions
diff --git a/files/it/web/html/element/table/index.html b/files/it/web/html/element/table/index.html deleted file mode 100644 index cbf9a66df3..0000000000 --- a/files/it/web/html/element/table/index.html +++ /dev/null @@ -1,437 +0,0 @@ ---- -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> |