Come costruire tabelle in HTML5

A volte la tua pagina web contiene i dati migliori presentati in una tabella. È possibile utilizzare il sistema di tavolo completo di HTML5 per creare le tabelle come quella in questo esempio:

Come costruire tabelle in HTML5

La struttura di base di una tabella in formato HTML è ragionevolmente facile comprensione; controllare il codice che creato la tabella nell'esempio:

<! DOCTYPE HTML>
<Html lang = "it">
<Head>
<Title> basicTable.html </ title>
<Meta charset = "UTF-8" />
<Style type = "text / css">
tavolo, td, th {
border: 1px solid black;
}
</ Style>
</ Head>

<Body>
<H1> una tabella di base </ h1>
<H2> HTML Superheroes </ h2>
<Table>
<Tr>
<Th> Eroe </ th>
<Th> Power </ th>
<Th> Nemesis </ th>
</ Tr>

<Tr>
<Td> Il XMLator </ td>
<Td> Norme di conformità </ td>
<Td> Sloppy Codice Boy </ td>
</ Tr>

<Tr>
<Td> Captain CSS </ td>
<Td> Superlayout </ td>
<Td> Signore obsoleto </ td>
</ Tr>

<Tr>
<Td> Browser donna </ td>
<Td> Megacompatibility </ td>
<Td> Ugly Mostro codice </ td>
</ Tr>

</ Table>
</ Body>
</ Html>

Esaminando il codice mostra che una tabella è semplicemente un insieme di tag accuratamente nidificate. Il processo per la costruzione di un tavolo non è difficile, ma richiede qualche accortezza.

  1. Organizza il tuo tavolo in modo da sapere quante colonne che si desidera, e che le righe o colonne sarà titoli.

    Delineare la tabella sulla carta prima è una buona idea, soprattutto se è affatto complicato.
  2. Inizia la tabella con il tag <table>.

    La <table> </ table> pair racchiude l'intera tabella.
  3. Creare una riga della tabella con il <tr> </ tr> pair.

    Una tabella è solo una serie di righe. È necessario il <tr> </ tr> paio di racchiudere ogni riga di dati.
  4. Indicare titoli con <th>.

    Spesso, la riga superiore (e forse la colonna più a sinistra) contengono intestazioni. Usa la <th> </ th> pair per indicare il testo che deve essere trattato come una cella intestazione. Per impostazione predefinita, tali cellule sono in genere più audace e centrato, ma che possono essere modificati con i CSS.
  5. Specificare celle di dati ordinari con il <td> </ td> pair.
  6. Mantenere il numero di cellule coerenti tra le righe.

    Come si diventa più familiarità con tavoli HTML5, è possibile trovare il modo per estendere una cella su più righe o colonne.
  7. Aggiungere CSS, se necessario.

    Le tabelle hanno un formato di base, che può essere modificato con i CSS - per aggiungere bordi, per esempio.

Anche se gli utenti HTML5 hanno sviluppato modi per utilizzare le tabelle a scopo di impaginazione, CSS fornisce tutte le tecniche di layout di pagina è necessario, in modo da utilizzare le tabelle HTML5 per il loro scopo: presentare dati.