Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Creazione e Strutturazione di Tabelle in HTML | Lavorare con i Media e le Tabelle
HTML Definitivo

bookCreazione e Strutturazione di Tabelle in HTML

Le tabelle aiutano a presentare dati strutturati come orari, calendari, registri finanziari, menu e listini prezzi. HTML offre diversi elementi per la creazione delle tabelle.

Elementi principali della tabella:

  • <table>: il contenitore della tabella;
  • <tr>: una riga;
  • <th>: una cella di intestazione (in grassetto, centrata);
  • <td>: una cella dati normale.

Di seguito, verrà creata passo dopo passo una semplice tabella di menu.

Passaggio 1: Impostare la struttura HTML

Iniziare creando la struttura HTML di base per la pagina:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Passaggio 2: Definire la tabella

All'interno dell'elemento <body>, aggiungere il tag <table> per definire la tabella:

<table>
  <!-- Table content will go here -->
</table>

Passaggio 3: Aggiungere una didascalia alla tabella (Opzionale)

Per fornire un titolo alla tabella, è possibile utilizzare il tag <caption>:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Passaggio 4: Creare le intestazioni della tabella

Successivamente, aggiungere le intestazioni della tabella all'interno dell'elemento <thead>. Ogni intestazione viene definita utilizzando il tag <th>:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Passaggio 5: Popolare la tabella con i dati

Utilizzare l'elemento <tbody> per racchiudere le righe della tabella e i tag <td> per definire le celle contenenti i dati:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>

Codice completo

Si consiglia di esaminare attentamente tutti gli elementi per assicurarsi che la loro relazione sia evidente.

index.html

index.html

index.css

index.css

copy
Note
Nota

Per impostazione predefinita, le tabelle HTML non hanno uno stile visivo specifico. Per personalizzare l'aspetto della tabella, aggiungere stili CSS in un file CSS separato o all'interno di un tag <style> nella sezione <head> del file HTML.

Tuttavia, non è necessario approfondire il CSS in questa fase, poiché l'attenzione attuale è rivolta solo all'HTML. Se si desidera vedere come appare la tabella senza alcuno stile CSS, è possibile rimuovere la riga 4: <link rel="stylesheet" href="index.css" />, che importa gli stili CSS.

Se si desidera approfondire il CSS, si consiglia di seguire il corso  Fondamenti di CSS.

1. Qual è l'elemento HTML utilizzato per definire una tabella in una pagina web?

2. Quale elemento HTML viene utilizzato per definire una riga all'interno di una tabella?

3. Qual è lo scopo dell'elemento <th> in una tabella HTML?

question mark

Qual è l'elemento HTML utilizzato per definire una tabella in una pagina web?

Select the correct answer

question mark

Quale elemento HTML viene utilizzato per definire una riga all'interno di una tabella?

Select the correct answer

question mark

Qual è lo scopo dell'elemento <th> in una tabella HTML?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 8

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you explain what each table element does in more detail?

How can I style this table to make it look better?

Can you show me how to add more rows or columns to the table?

bookCreazione e Strutturazione di Tabelle in HTML

Scorri per mostrare il menu

Le tabelle aiutano a presentare dati strutturati come orari, calendari, registri finanziari, menu e listini prezzi. HTML offre diversi elementi per la creazione delle tabelle.

Elementi principali della tabella:

  • <table>: il contenitore della tabella;
  • <tr>: una riga;
  • <th>: una cella di intestazione (in grassetto, centrata);
  • <td>: una cella dati normale.

Di seguito, verrà creata passo dopo passo una semplice tabella di menu.

Passaggio 1: Impostare la struttura HTML

Iniziare creando la struttura HTML di base per la pagina:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Passaggio 2: Definire la tabella

All'interno dell'elemento <body>, aggiungere il tag <table> per definire la tabella:

<table>
  <!-- Table content will go here -->
</table>

Passaggio 3: Aggiungere una didascalia alla tabella (Opzionale)

Per fornire un titolo alla tabella, è possibile utilizzare il tag <caption>:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Passaggio 4: Creare le intestazioni della tabella

Successivamente, aggiungere le intestazioni della tabella all'interno dell'elemento <thead>. Ogni intestazione viene definita utilizzando il tag <th>:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Passaggio 5: Popolare la tabella con i dati

Utilizzare l'elemento <tbody> per racchiudere le righe della tabella e i tag <td> per definire le celle contenenti i dati:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>

Codice completo

Si consiglia di esaminare attentamente tutti gli elementi per assicurarsi che la loro relazione sia evidente.

index.html

index.html

index.css

index.css

copy
Note
Nota

Per impostazione predefinita, le tabelle HTML non hanno uno stile visivo specifico. Per personalizzare l'aspetto della tabella, aggiungere stili CSS in un file CSS separato o all'interno di un tag <style> nella sezione <head> del file HTML.

Tuttavia, non è necessario approfondire il CSS in questa fase, poiché l'attenzione attuale è rivolta solo all'HTML. Se si desidera vedere come appare la tabella senza alcuno stile CSS, è possibile rimuovere la riga 4: <link rel="stylesheet" href="index.css" />, che importa gli stili CSS.

Se si desidera approfondire il CSS, si consiglia di seguire il corso  Fondamenti di CSS.

1. Qual è l'elemento HTML utilizzato per definire una tabella in una pagina web?

2. Quale elemento HTML viene utilizzato per definire una riga all'interno di una tabella?

3. Qual è lo scopo dell'elemento <th> in una tabella HTML?

question mark

Qual è l'elemento HTML utilizzato per definire una tabella in una pagina web?

Select the correct answer

question mark

Quale elemento HTML viene utilizzato per definire una riga all'interno di una tabella?

Select the correct answer

question mark

Qual è lo scopo dell'elemento <th> in una tabella HTML?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 8
some-alt