Tabelle in HTML

in data

Tabelle in HTML

5. Tabelle in HTML

Le tabelle servono per mostrare dati organizzati in righe e colonne.
In passato venivano usate anche per creare il layout di una pagina, ma oggi si usano solo per dati tabellari (il layout si fa con CSS).

5.1 Struttura base di una tabella

Una tabella in HTML si crea con:

  • <table> → contiene tutta la tabella

  • <tr> → crea una riga (table row)

  • <td> → crea una cella di dati (table data)

  • <th> → crea una cella di intestazione (table header)

Esempio semplice:

<table border="1">
    <tr>
        <th>Nome</th>
        <th>Cognome</th>
        <th>Età</th>
    </tr>
    <tr>
        <td>Mario</td>
        <td>Rossi</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Anna</td>
        <td>Bianchi</td>
        <td>25</td>
    </tr>
</table>

In HTML5 l’attributo border è obsoleto: per lo stile è meglio usare CSS, ma per imparare va bene così.

5.2 Intestazioni e didascalie

Puoi aggiungere un titolo alla tabella con <caption>:

<table border="1">
    <caption>Elenco studenti</caption>
    <tr>
        <th>Nome</th>
        <th>Corso</th>
        <th>Voto</th>
    </tr>
    <tr>
        <td>Luca</td>
        <td>HTML Base</td>
        <td>9</td>
    </tr>
</table>

5.3 Celle unite

A volte serve unire celle orizzontalmente (colspan) o verticalmente (rowspan).

<table border="1">
    <tr>
        <th>Nome</th>
        <th colspan="2">Contatti</th>
    </tr>
    <tr>
        <td>Giulia</td>
        <td>Email</td>
        <td>Telefono</td>
    </tr>
</table>

English version
5. Table tables in HTML

The tables are used to show organized data in lines and columns.

In the past they were also used to create the layout of a page, but today they are used only for table data (the layout is made with CSS).

5.1 Basic structure of a table

A table in HTML is created with:

  • <Table> → contains the whole table
  • <t> → Create a line (table row)
  • <TD> → Create a data cell (table data)
  • <th> → Create an header cell (Table Header)

Simple example:

<Table Border = "1"> 
<TR> 
<th> name </ TH> 
<th> surname </ three 
<th> Age </ three 
</t> 
<TR> 
<TD> Mario </ TD> 
<TD> Rossi </ TD> 
<TD> 30 </ TD> 
</t> 
<TR> 
<TD> Anna </ TD> 
<TD> Bianchi </ TD> 
<TD> 25 </ TD> 
</t>
</pable>
In HTML5 the border attribute is obsolete: for style it is better to use CSS, but to learn it is fine.

5.2 heads and captions

You can add a title to the table with <caption>:

<Table Border = "1"> 
<caption> Student list </ caption> 
<TR> 
<th> name </ TH> 
<th> course </ TH> 
<th> voting </ three 
</t> 
<TR> 
<TD> Luca </ TD> 
<TD> HTML Base </ TD> 
<TD> 9 </ TD> 
</t>
</pable>

5.3 United cells

Sometimes it is necessary to combine cells horizontally (colspan) or vertically (Rowspan).

<Table Border = "1"> 
<TR> 
<th> name </ TH> 
<TH COLPAN = "2"> Contacts </ TH> 
</t> 
<TR> 
<TD> Giulia </ TD> 
<TD> email </ TD> 
<TD> Telephone </ TD> 
</t>
</pable>

Puoi seguire anche il mio canale YouTube https://www.youtube.com/channel/UCoOgys_fRjBrHmx2psNALow/ con tanti video interessanti


I consigli che offriamo sono di natura generale. Non sono consigli legali o professionali. Quello che può funzionare per una persona potrebbe non essere adatto a un’altra, e dipende da molte variabili.
Per supportare e far crescere il canale in modo semplice, rapido e gratuito, potete fare acquisti su amazon usando il mio link di affiliazione.
Questo implica che io prenda una commissione ogni volta che qualcuno faccia un qualsiasi acquisto utilizzando il mio link di affiliazione https://amzn.to/4cgJ3Ls

Commenti

Posta un commento