Le tabelle in HTML sono così funzionali che puoi usarle per impaginare interi siti web (leggi). Ora parleremo di inserire semplici tabelle HTML in una pagina web, analizzando solo il markup, ma senza toccare il design, perché è meglio decorare le tabelle utilizzando gli stili CSS.

Tag e attributi della tabella

Ecco gli elementi di base necessari per creare tabelle:

• - un contenitore all'interno del quale si trova il tavolo (lo stesso di
  per contrassegnato o
  per elenchi numerati).
  1. confine- un attributo che determina lo spessore dei telai. È meglio utilizzare invece la proprietà CSS border.

  specifica la firma della tabella. Non è necessario utilizzare un contenitore, ma se decidi comunque di intitolare la tabella, posizionalo immediatamente dopo il tag , celle e righe esterne.

  - un tag accoppiato contenente una riga della tabella (celle posizionate sullo stesso livello orizzontale).

  , ci saranno così tante celle al suo interno: un tag - una cella.

  permette di raggruppare le colonne, velocemente e senza intasare il codice, assegnarle caratteristiche generali. Utilizzando un contenitore, puoi separare le parti logiche di una tabella l'una dall'altra. Posizionato dopo il tag

  , se non è lì, allora dopo .

  utilizzato per lo stesso scopo di . può contenere , ma non viceversa.

  arco- un attributo che specifica il numero di colonne a cui vengono applicate le proprietà del contenitore

  .

  , E - contenitori che permettono di dividere la tabella rispettivamente nella parte superiore (intestazioni), principale (corpo) e inferiore (finale). In una tabella HTML, la sequenza di questi tag è la stessa della sequenza dei contenitori , E

  Strumenti per la creazione di siti web

  Scopo	Attrezzo
Marcatura	HTML	XHTML
Registrazione	CSS
Sviluppo	PHP	Pitone

  Nel browser, il documento apparirà così:

  Scopriamo quali righe di codice sono responsabili di cosa.

  • - ha aperto il tavolo, dandogli lo spessore delle cornici.
    - lo hanno intitolato.
    - aprì la linea.
    - ha creato una cella con un design di intestazione.
    - ha creato una seconda cella di intestazione nella riga. Il parametro colspan indicava che questa cella dovrebbe estendersi su due orizzontalmente.
    - chiuse la linea. Le restanti linee sono state create allo stesso modo.
    - aggiunta una seconda riga della tabella con celle regolari, anziché di intestazione. Le righe e le celle successive sono state inserite in modo simile.

    Strumenti per la creazione di siti web

    Scopo	Attrezzo
  Marcatura	HTML	XHTML

    - chiuse il tavolo.

  Compito

  Crea una tabella e specifica i suoi parametri (margini e distanza tra le celle) attraverso gli stili.

  Soluzione

  Una tabella è composta da righe e colonne di celle che possono contenere testo e immagini. Per aggiungere una tabella a una pagina Web, utilizzare il tag

  . Questo elemento funge da contenitore per gli elementi che definiscono il contenuto della tabella. Qualsiasi tabella è composta da righe e celle, specificate rispettivamente utilizzando i tag E

  Codice sorgente della tabella HTML

  E

  . La tabella deve contenere almeno una cella (esempio 1). Consentito invece di tag	utilizzare l'etichetta	. Testo in una cella a cui è assegnato un tag	, viene visualizzato dal browser in grassetto e allineato al centro della cella. Altrimenti, le differenze tra le celle create tramite tag	E	NO. Esempio 1: creazione di una tabella HTML5 IE Cr Op Sa Fx Cella 1 Cella 2 Cella 3 Cella 4 L'ordine delle celle e il loro aspetto è mostrato in Fig. 1. Riso. 1. Risultato della creazione di una tabella con quattro celle attributo tag di confine è consentita solo l'aggiunta con un valore vuoto ( ) o uguale a 1. Tutti gli altri valori non vengono convalidati. Per controllare i margini all'interno delle celle, utilizza la proprietà dello stile di riempimento, che viene aggiunta al selettore td. La distanza tra le celle viene modificata dalla proprietà border-spacing (esempio 2) aggiunta al selettore di tabella solo a partire dalla versione 8.0. Esempio 2: margini all'interno delle celle HTML5 CSS 2.1 IE Cr Op Sa Fx Rubrica 1 Rubrica 2 Cella 3 Cella 4 Una tabella con campi e distanza tra le celle è mostrata in Fig. 2. Un risultato simile può essere ottenuto utilizzando una cornice bianca attorno alle celle. Riso. 2. Campi nelle celle della tabella Grazie alla versatilità dei tavoli, un gran numero parametri che ne controllano l'aspetto, le tabelle sono diventate da tempo uno standard definitivo per il layout delle pagine web. Appare come se una tabella con un bordo invisibile griglia modulare, nei cui blocchi è conveniente posizionare gli elementi della pagina web. Tuttavia, questo non è del tutto il giusto approccio, perché tutti Oggetto HTML definito per i propri scopi e se non viene utilizzato per lo scopo previsto, e ovunque, significa che non esistono alternative. Così è stato per molto tempo finché i livelli non hanno sostituito le tabelle nel layout del sito web. Ciò non significa che ormai i livelli vengano utilizzati continuamente, ma la tendenza è già emersa chiaramente: le tabelle vengono utilizzate per posizionare dati tabulari e i livelli vengono utilizzati per il layout e la progettazione. Creazione di una tabella Una tabella è composta da righe e colonne di celle che possono contenere testo e immagini. Le tabelle vengono generalmente utilizzate per organizzare e presentare i dati, ma le tabelle non si limitano a questo. Utilizzando le tabelle, è conveniente impaginare i layout di pagina disponendo frammenti di testo e immagini nel modo desiderato. Per aggiungere una tabella a una pagina Web, utilizzare il tag . Questo elemento funge da contenitore per gli elementi che definiscono il contenuto della tabella. Qualsiasi tabella è composta da righe e celle, specificate rispettivamente utilizzando i tag E Tieni presente che quando unisci le celle, il numero di elementi nella riga cambia. Ad esempio, se una tabella ha 3 colonne con celle e uniamo la prima e la seconda cella, tutto ciò che si trova all'interno del tag definisce questa linea ci saranno 2 elementi, il primo conterrà l'attributo colspan="2". Esempio di tabella HTML con celle unificate Codice sorgente della tabella HTML con celle unite . La tabella deve contenere almeno una cella (esempio 12.1). Consentito invece di tag utilizzare l'etichetta . Testo in una cella a cui è assegnato un tag , viene visualizzato dal browser in grassetto e allineato al centro della cella. Altrimenti, le differenze tra le celle create tramite tag E NO. Esempio 12.1. Creazione di una tabella Cella 1 Cella 2 Cella 3 Cella 4 L'ordine delle celle e il loro aspetto è mostrato in Fig. 12.1. Semplice codice sorgente della tabella HTML Cella 1 Cella 2 Cella 3 Cella 4 Cella 5 Cella 6 Cella 7 Cella 8 Cella 9 Intestazioni di tabella HTML Esistono 2 tipi di celle nelle tabelle HTML. Il tag definisce una cella tipo regolare. Se una cella funge da intestazione, viene definita utilizzando l'estensione . Esempio di tabella HTML con intestazione th Volkswagen AG Daimler AG Gruppo BMW Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Accorto Rolls-Royce Codice sorgente della tabella HTML con intestazioni th Volkswagen AG Daimler AG Gruppo BMW Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Accorto Rolls-Royce Unione di celle in una tabella HTML Le tabelle HTML hanno la capacità di unire le celle orizzontalmente e verticalmente. A unire le celle orizzontalmente utilizzare l'attributo colspan=" X" , alla cella o , dove X A unire le celle verticalmente utilizzare l'attributo rowspan=" X" , alla cella o , dove X- numero di celle da unire. Le celle possono essere unite orizzontalmente e verticalmente allo stesso tempo. Per fare ciò, utilizza entrambi gli attributi colspan e rowspan per la cella desiderata: Testo della cella Nissan Modello Attrezzatura Disponibilità Nissan Qashqai VISIA + TEKNA + Nissan X-Trail ACENTA + CONNETTI - Intestazioni e piè di pagina nelle tabelle HTML Le tabelle HTML possono essere divise in 3 aree: intestazione, corpo, piè di pagina. Questo viene fatto avvolgendo le righe della parte selezionata della tabella con tag. definisce l'area dell'intestazione, - l'area del piè di pagina, - la parte principale della tabella. Per impostazione predefinita, intestazioni e piè di pagina non hanno uno stile diverso (questo può essere fatto tramite CSS se necessario), ma possono essere utilizzati dai browser. Ad esempio, quando si stampa una tabella composta da più pagine, le intestazioni e i piè di pagina potrebbero essere duplicati su ogni pagina stampata. L'ordine corretto di posizionamento dei tag di area nel codice HTML di una tabella è il seguente: prima l'intestazione, seguita dal piè di pagina, quindi dal corpo. In questo caso, la parte principale della pagina verrà visualizzata tra le intestazioni e i piè di pagina. Se necessario, puoi aggiungere una firma alla tabella. Per fare ciò, utilizzare il tag. Esempio di tabella HTML con intestazioni e piè di pagina Codice sorgente per tabella con intestazioni e piè di pagina Configurazioni Renault Sandero Stepway Caratteristica SUTA09H6R SUTA09HR6R SUTA 15H 5R Disponibilità + + + Potenza del motore 0,9 (90 CV) 0,9 (90 CV) 1,5 (90 CV) Carburante benzina benzina diesel Norma sulla tossicità Euro 6 Euro 6 Euro 5 Colonne e gruppi di colonne Una tabella HTML può essere divisa in colonne e gruppi di colonne utilizzando i tag e. Questa divisione consente di impostare stili per la tabella utilizzando un numero minimo di Proprietà CSS, riducendo così la quantità di codice della tabella (invece di definire stili per ciascuna cella di una colonna, puoi impostare stili per una o più colonne contemporaneamente). I tag e vengono posizionati all'interno del tag prima dei tag, AKP6 (EDC)	Trasmissione

  ZEN2E2C AL A	ZEN2E2CJ5A	INTENSO 2E3C AL A	Caratteristica
1,5 (90 CV)	1.2 (115 CV)	1,5 (90 CV)	Potenza del motore
diesel	benzina	diesel	Carburante
Cambio automatico6 (EDC)	Cambio automatico6 (EDC)	Cambio automatico6 (EDC)	Trasmissione

  Tabelle nell'impaginazione del sito

  Sui siti Web moderni, è importante che le pagine vengano visualizzate correttamente sia sui computer che dispositivi mobili. Utilizza le tabelle per creare un wireframe Pagine HTML non consigliabile, poiché si perde la capacità di adattare i contenuti agli schermi dimensioni diverse(computer, smartphone, tablet).

  I tag dei gruppi di tabelle vengono utilizzati al meglio all'interno di una pagina per visualizzare il contenuto in un formato tabellare.

  È diventato popolare, i web designer hanno utilizzato principalmente il metodo di layout della tabella e hanno ottenuto ottimi risultati.

  Tag utilizzati per creare una tabella in html

  tavolo- un tag obbligatorio che apre e chiude la tabella
  didascalia- tag facoltativo indicante il titolo della tabella
  th- un tag opzionale, i cui tag di apertura e chiusura contengono il nome della colonna. In genere appare in grassetto
  tr- un tag obbligatorio che apre e chiude la linea
  td- un tag obbligatorio che indica l'apertura e la chiusura di una cella in una riga

  Codice di esempio per una tabella semplice

  Nome della tabella

  Stobets 1	Stobets 2
Testo nella prima cella	Testo nella seconda cella

  Verrà visualizzato il browser

  Scopo delle tabelle in html

  Importantissima la lezione sulle tabelle! Grazie alle tabelle puoi organizzare non solo testo, ma anche immagini, collegamenti e molto altro. Nella tabella è possibile specificare sfondo(o il suo colore), rientranza, larghezza, confine E altri parametri che le darà una bellissima aspetto. Tabella: il primo passo verso la comprensione progettazione web! In precedenza, molti siti erano interamente strutturati come tabelle, ovvero tutto ciò che l'utente vedeva ( menù laterale, menu in alto, contenuto) - era il contenuto delle celle di una tabella di grandi dimensioni.
  A questo proposito, passiamo direttamente agli attributi che rendono bella la tavola...

  Proprietà e parametri delle tabelle html: rientro, larghezza, colore di sfondo, bordo (frame)

  U etichetta da tavolo sono presenti i seguenti attributi:

  larghezza- larghezza del tavolo. può essere in pixel o in percentuale della larghezza dello schermo.
  bgcolor- colore di sfondo delle celle della tabella
  sfondo- riempie lo sfondo della tabella con un motivo
  confine- cornice e bordi del tavolo. Lo spessore è indicato in pixel
  imbottitura cellulare- riempimento in pixel tra il contenuto della cella e il suo bordo interno
  Come prima, scriviamo il valore dell'attributo tra virgolette.

  Diamo un'occhiata all'uso di questi attributi utilizzando un esempio. Per fare ciò, creiamo una tabella (ma già senza la didascalia e i tag usati estremamente raramente) e impostare il parametro sull'attributo confine, larghezza (larghezza della tabella, riga o cella) E bgcolor (colore della cella)

  Di conseguenza, nel browser verrà visualizzata la seguente tabella:

  telaio- un attributo che indica la cornice attorno al tavolo. Sono presenti i seguenti valori:

  Vuoto: nessuna cornice,
  sopra - solo il telaio superiore,
  sotto - solo telaio inferiore,
  hsides: solo i telai superiore e inferiore,
  vssides - solo frame sinistro e destro,
  sinistra - solo frame sinistro,
  destra - solo cornice destra,
  scatola: tutte e quattro le parti del telaio.

  regole- un attributo che indica i confini all'interno della tabella, tra le celle. Sono presenti i seguenti valori:

  Nessuno: non ci sono confini tra le celle,
  gruppi - confini solo tra gruppi di righe e gruppi di colonne (saranno discussi un po' più tardi),
  righe: confini solo tra le righe,
  cols - confini solo tra colonne,
  all: mostra tutti i bordi.

  Diamo un'occhiata all'esempio di codice

  Stobets 1	Stobets 2

  Risultato

  Ora proviamo a creare bellissimo tavolo. Per fare questo, iniziamo a utilizzare allineamento della tabella. Per fare ciò, ci sono i seguenti parametri già familiari:

  allineare- allineamento della tabella. Può essere posizionato a sinistra (sinistra), a destra (destra), al centro (centro)
  spaziatura delle celle- distanza tra le celle della tabella. Specificato in pixel (predefinito 0 pixel)
  imbottitura cellulare- riempimento in pixel tra il contenuto della cella e il suo bordo interno (predefinito 0 pixel)
  Diamo un'occhiata a un esempio

  Stobets 1	Stobets 2
Testo nella prima cella della prima colonna	Testo nella seconda cella della seconda colonna

  Il browser visualizzerà una tabella centrata simile alla seguente:

  tr righe e celle td nelle tabelle HTML

  Permettimi di ricordarti ancora che le tabelle sono formate riga per riga (tr). Le righe (tr) contengono già celle (td). Se specifichi un parametro per una stringa (tr), sarà valido per tutte le cellule(td) in questa riga, se per una cella specifica, solo per essa. Negli esempi precedenti ho specificato il colore della riga; questo parametro è stato distribuito di conseguenza su tutte le celle.

  Per i tag tr e td ci sono i seguenti

  allineare- allineamento del testo all'interno di una cella. Bordo sinistro (sinistra), bordo destro (destra), centro (centro)
  valign- allineamento verticale del testo all'interno di una cella. Su (in alto), giù (in basso), centro (al centro)
  bgcolor- imposta il colore della linea
  larghezza- larghezza della colonna (tutte le celle sottostanti occuperanno questo parametro) è specificato in pixel o come percentuale, dove 100% è la larghezza dell'intera tabella
  altezza- altezza della cella (tutte le celle della riga accetteranno questo parametro)

  Osserviamo il codice dove il contenuto delle celle (td) è allineato lungo diversi bordi: nel primo a sinistra, nel secondo a destra:

  Stobets 1	Stobets 2
Testo nella prima cella della prima colonna	Testo nella seconda cella della seconda colonna
Stobets 1	Stobets 2

  Risultato

  Usando le tabelle puoi creare un'ottima pagina. Non dimenticare che puoi inserire non solo testo nelle celle, ma anche immagini, collegamenti, ecc.!)

  Grazie per l'attenzione! Spero che il materiale sia stato utile!

  ARTICOLI CORRELATI

  • Feedback
  • Mappa del sito
  • Informazioni sul sito

  Stobets 1	Stobets 2
Testo nella prima cella della prima colonna	Testo nella seconda cella della seconda colonna

  - un tag che crea una cella di intestazione della tabella. Esternamente, il suo contenuto differisce dal contenuto di altre celle, solitamente il testo all'interno	Il browser lo evidenzia in grassetto e lo posiziona al centro.	- un contenitore con cui viene creata una cella semplice. Quanti tag di questo tipo conterrà una riga (tag