Una tabella è un componente essenziale in HTML per visualizzare i dati in un formato strutturato con righe e colonne. In HTML, le tabelle vengono create utilizzando i tag <table>, <tr> e <td>.
Il tag <table> rappresenta il contenitore principale della tabella, che contiene tutte le righe e le colonne. Le righe vengono definite utilizzando il tag <tr>(table row), mentre le celle all'interno delle righe vengono definite utilizzando il tag <td>(table data). Inoltre, puoi utilizzare il tag <th>(intestazione tabella) per definire le celle di intestazione per la tabella.
Puoi utilizzare attributi come colspan e rowspan per unire le celle nella tabella o estendere le celle su più righe e colonne. Inoltre, puoi applicare le proprietà CSS per personalizzare l'aspetto e il layout della tabella.
Tabella( <table>)
- L' <table> elemento viene utilizzato per creare una tabella in HTML.
- I dati vengono inseriti in righe( <tr>) e colonne( <td> o <th>).
- Ogni cella di dati è posizionata all'interno di elementi <td>(cella di dati) o(cella di intestazione). <th>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Intestazione colonna( <th>)
- L' <th> elemento viene utilizzato per creare intestazioni di colonna in una tabella.
- Tipicamente posizionato nella prima riga del tavolo.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Righe di dati( <tr>):
- L' <tr> elemento viene utilizzato per creare righe di dati in una tabella.
- Le celle di dati( <td>) o le celle di intestazione( <th>) vengono posizionate all'interno di questi <tr> elementi.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Spanning colonna( colspan)
L' colspan attributo viene utilizzato per determinare il numero di colonne che una cella di dati o una cella di intestazione si estenderà nella tabella.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Spanning riga( rowspan)
L' rowspan attributo viene utilizzato per determinare il numero di righe che una cella di dati o una cella di intestazione si estenderà nella tabella.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Unione di celle( colspan e rowspan)
Puoi combinare entrambi gli attributi colspan e rowspan per unire le celle in una tabella.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border proprietà
- La border proprietà specifica lo spessore del bordo della tabella.
- Il valore di border è un numero intero non negativo.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding proprietà
- ,La cellpadding proprietà specifica la distanza tra il contenuto della cella e il bordo della cella nella tabella.
- Il valore di cellpadding è un numero intero non negativo
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing proprietà
- La cellspacing proprietà specifica la spaziatura tra le celle nella tabella.
- Il valore di cellspacing è un numero intero non negativo.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Questi attributi ed elementi consentono di creare e personalizzare le tabelle in HTML in base alle proprie esigenze. Puoi usarli per visualizzare i dati in modo chiaro e organizzato sul tuo sito web.