Compito

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

Soluzione

Una tabella è composta da righe e colonne di celle che possono contenere testo e grafica. Il tag viene utilizzato per aggiungere una tabella a una pagina Web.

. Questo elemento funge da contenitore per gli elementi che definiscono il contenuto della tabella. Qualsiasi tabella è composta da righe e celle, che vengono impostate rispettivamente utilizzando i tag E crea una nuova linea. Avanti in nidificato . Etichetta contenuto cellulare. Il codice HTML per l'inserimento di una tabella in una pagina Web è simile al seguente:

. La tabella deve contenere almeno una cella (esempio 1). Consentito invece di tag	usa tag	. Testo in una cella stilizzata con un tag	, viene visualizzato dal browser in grassetto ed è centrato nella cella. In caso contrario, le differenze tra le celle create tramite tag	E	NO. Esempio 1: creare una tabella HTML5 IE Cr Op Sa Fx Cella 1 Cella 2 Cella 3 Cella 4 La disposizione delle cellule e il loro aspetto è mostrata in fig. 1. Riso. 1. Il risultato della creazione di una tabella con quattro celle L'attributo border del tag può essere aggiunto solo con valore vuoto () o uguale a 1. Tutti gli altri valori non superano la convalida. Per controllare i margini all'interno delle celle, viene utilizzata la proprietà padding style, che viene aggiunta al selettore td. La spaziatura tra le celle viene modificata dalla proprietà border-spacing (esempio 2) aggiunta al selettore di tabella, IE lo comprende solo dalla versione 8.0. Esempio 2: Margini all'interno delle celle HTML5 CSS 2.1 IE Cr Op Sa Fx Titolo 1 Titolo 2 Cella 3 Cella 4 La tabella con i campi e la distanza tra le celle è mostrata in fig. 2. Un risultato simile può essere ottenuto con una cornice bianca attorno alle celle. Riso. 2. Campi nelle celle della tabella è il corpo della tabella. Il corpo è costituito da righe e colonne. La tabella viene riempita riga per riga. Ogni etichetta
vengono create le colonne. Puoi creare più colonne. In questo caso, è necessario monitorare il numero di colonne in ogni riga. Ad esempio, se la prima riga aveva 5 colonne, anche le righe successive dovrebbero avere 5 colonne. Altrimenti il ​​tavolo galleggerà. È possibile unire le celle. Come creare una tabella in html Ecco un esempio, codice html: Esempio di tabella Colonna 1 Colonna 2 Presta attenzione alla cella	. Usiamo l'attributo speciale colspan per estendere le celle orizzontalmente. Il suo valore numerico specifica il numero di colonne da unire. C'è anche un analogo di questo attributo: tag		(intestazione della tabella), dove devi anche scrivere colspan. Il risultato sarà lo stesso. Ma spesso usano un normale td. Ora diamo un'occhiata a tutti gli attributi del tag in dettaglio. . Attributi e proprietà dei tag All'apertura del tag Puoi aggiungere vari attributi. 1. Property align="parameter" - imposta l'allineamento della tabella. Può assumere i seguenti valori: Nell'esempio sopra, abbiamo centrato la tabella con align="center" . Questo attributo può essere applicato non solo alla tabella, ma anche alle singole celle della tabella. . Così, dentro cellule diverse l'allineamento sarà diverso. Per esempio , , , O cols - la linea viene visualizzata tra le colonne nessuno - tutti i bordi sono nascosti righe: il bordo viene tracciato tra le righe della tabella create tramite il tag 12. Proprietà width="number" - imposta la larghezza della tabella: in pixel o in percentuale. 13. Property class="class_name" - è possibile specificare il nome della classe a cui appartiene la tabella. 14. Property style="styles" - gli stili possono essere impostati individualmente per ogni tabella. Ora è il momento di immergersi all'interno della tabella e osservare gli attributi della cella della tabella. Questi attributi devono essere scritti nel tag di apertura. E Sono disponibili le stesse opzioni di sarà applicato gerarchicamente a tutti dentro o linee ... ... ... 2. Property background="URL" - imposta l'immagine di sfondo. Invece di un URL, dovrebbe essere scritto l'indirizzo dell'immagine di sfondo. Esempio Esempio di tabella Colonna 1 Colonna 2 Trasforma la pagina in quanto segue: Nel nostro esempio, il nostro immagine di sfondo si trova nella cartella img (che si trova nella stessa directory della pagina html) e si chiama immagine fon.gif . Si noti che nel tag abbiamo aggiunto style="color:white;" . Poiché lo sfondo è quasi nero, per evitare che il testo si confonda con lo sfondo, abbiamo reso il testo bianco. 3. Proprietà bgcolor="color" - imposta il colore di sfondo della tabella. Come colore, puoi scegliere uno qualsiasi dell'intera tavolozza (vedi codici e nomi dei colori html) 4. Property border="number" - imposta lo spessore della cornice del tavolo. Negli esempi precedenti, abbiamo specificato border="1" , il che significa che il bordo ha uno spessore di 1 pixel. 5. Property bordercolor="color" - imposta il colore del bordo. Se border="0" , non ci sarà alcun bordo e il colore del bordo non avrà senso. 6. Proprietà cellpadding="number" - riempimento dal frame al contenuto della cella in pixel. 7. Proprietà cellspacing="number" - distanza tra le celle in pixel. 8. Proprietà cols="number" - il numero di colonne. Se non lo imposti, il browser determinerà il numero di colonne. L'unica differenza è che specificare questo parametro molto probabilmente accelererà il caricamento della tabella. 9. Property frame="parameter" - come visualizzare i bordi attorno alla tabella. Può assumere i seguenti valori: void - non disegnare confini bordo - il bordo attorno al tavolo sopra - il bordo lungo il bordo superiore del tavolo sotto - bordo inferiore della tabella hsides - aggiungi solo bordi orizzontali (superiore e inferiore della tabella) vsides - disegna solo bordi verticali (a sinistra ea destra della tabella) rhs - bordo solo sul lato destro della tabella lhs - bordo solo sul lato sinistro della tabella 10. Property height="number" - imposta l'altezza della tabella: in pixel o in percentuale. 11. Property rules="parameter" - dove visualizzare i bordi tra le celle. Può assumere i seguenti valori: all - viene tracciata una linea attorno a ciascuna cella della tabella gruppi: viene tracciata una linea tra i gruppi formati dai tag . Attributi e proprietà 1. Property align="parameter" - imposta l'allineamento di una cella di tabella separata. Può assumere i seguenti valori: allineamento sinistra - sinistra centro - allineamento al centro allineamento destra - destra 2. Property background="URL" - imposta l'immagine di sfondo della cella. Invece di un URL, dovrebbe essere scritto l'indirizzo dell'immagine di sfondo. 3. Proprietà bgcolor="color" - imposta il colore di sfondo della cella. 4. Property bordercolor="color" - imposta il colore del bordo della cella. 5. Proprietà char="letter" - imposta la lettera da cui eseguire l'allineamento. Il valore dell'attributo align deve essere impostato su char. 6. Proprietà colspan="number" - imposta il numero di celle orizzontali unite. 7. Property height="number" - imposta l'altezza della tabella: in pixel o in percentuale. 8. Proprietà width="number" - imposta la larghezza della tabella: in pixel o in percentuale. 9. Proprietà rowspan="number" - imposta il numero di celle verticali da unire. 10. Proprietà valign="parametro" - allineamento verticale del contenuto della cella. top - allinea il contenuto della cella alla parte superiore della riga allineamento medio-medio allineamento basso-basso linea di base - allineamento della linea di base Nota 1 Per Tag . Opzioni per un singolo tag dentro Come evitare che i bordi delle celle aderiscano l'uno all'altro in una tabella Nel caso di utilizzo del bordo (bordo della cella) e del riempimento zero tra le celle, sono ancora incollati insieme e si ottiene un bordo raddoppiato. Per evitare questo, devi dare uno stile alla tabella con border-collapse: ... Caro lettore, ora hai imparato molto di più su etichetta html tavolo. Ora ti consiglio di passare alla lezione successiva. Ciao cari lettori del blog! Spesso nelle pagine web, oltre a testo e immagini, diventa necessario visualizzare vari dati sotto forma di tabelle. Sì, questo è comprensibile, il tavolo - il modo più conveniente rappresentazione un largo numero informazione. Quindi sorge la domanda Come incorporare tabelle in html?. In questo articolo, risponderò a questa domanda e ti fornirò molti esempi di varie tabelle html. Come creare una tabella utilizzando HTML Le tabelle HTML vengono create in quattro passaggi. 1. Al primo passaggio nel codice html utilizzando il paired etichetta comunica al browser che è stata inserita una tabella nella pagina web: . L'elemento table è un elemento di blocco di una pagina web. Pertanto, la tabella viene sempre visualizzata su una nuova riga con rientri verticali dagli elementi vicini, quindi non è necessario inserirla in un paragrafo. 2. Al secondo passaggio, formiamo linee tabelle inserendo tag accoppiati . Ogni elemento crea una riga separata: 3. Successivamente, al terzo passaggio, formiamo cellule tabelle con tag accoppiati	E	, che vengono inseriti all'interno dell'elemento
crea solito cella, e	cellula intestazione, cioè. intestazione della colonna corrispondente: 4. Bene, all'ultimo passaggio lo mettiamo all'interno degli elementi	E

Colonna 1	Colonna 2	Colonna 3
Cella 1-1	Cella 1-2	Cella 1-3
Cella 2-1	Cella 2-2	Cella 2-3

La messa a punto della visualizzazione dei bordi aiuterà. Con è possibile modificare lo spessore e il colore delle cornici, nonché modificare il tipo di bordi.

Il testo che deve essere inserito all'interno delle celle è facoltativo, ma se il testo è di grandi dimensioni, può essere suddiviso in paragrafi applicando il tag

Se hai bisogno di modellare in qualche modo il testo inserito, puoi usare .

Oltre al testo, possiamo inserire immagini nelle celle utilizzando il tag :

Il contenuto di una cella può anche essere un'altra tabella. In questo caso, la creazione di una tabella nidificata non è diversa dalla creazione di una tabella normale. Solo tra i tag E vengono inseriti i tag

E e righe e celle vengono inserite al suo interno.

Ci sono alcune regole da tenere a mente quando si creano tabelle:

• solo il tag viene utilizzato per creare la tabella ;
  etichetta
  può essere solo all'interno di un tag ;
  tag
  , qualsiasi altro contenuto del tag ignorato dal browser;
  il contenuto della tabella (testo o immagini) può essere solo nei tag

  , che dà un titolo alla tabella. Il testo del titolo viene inserito all'interno di questo tag, che deve trovarsi all'interno del tag . E non importa dove nel codice html della tabella posizionare il tag . Inoltre, è consentito utilizzare non più di un elemento all'interno della stessa tabella, e deve andare a codice html subito dopo il cartellino

  , il browser visualizzerà comunque il titolo sopra la tabella e lo centrerà. Ma di solito il tag

  posto subito dopo il tag di apertura :

  Questo è un tavolo

  Cella 1.1	Cella 1.2
Cella 2.1	Cella 2.2

  Schermo:

  Sezioni della tabella

  La tabella html può essere logicamente suddivisa in parti - sezioni. Esistono tre tipi di sezioni:

  • sezione intestazione, in cui sono posizionate le celle di intestazione, che formano l'intestazione della tabella;
  • sezione del corpo, in cui si trovano le celle con i dati di base;
  • sezione di completamento, in cui vengono inserite le celle con i dati totali.

  La sezione dell'intestazione della tabella è formata utilizzando un tag di coppia

  .

  La sezione del corpo viene creata con un tag pair

  . Una tabella html può contenere diverse sezioni del corpo, il che consente di creare blocchi strutturali a cui applicare stili di design uniformi.

  La sezione di completamento è formata da un tag di coppia

  e all'interno dello stesso contenitore ce ne può essere solo uno.

  Tutti questi tag accoppiati devono contenere tag

  , che formano linee relative alle sezioni corrispondenti:

  Colonna 1	Colonna 2	Colonna 3
Cella 1.1	Cella 1.2	Cella 1.3
Cella 2.1	Cella 2.2	Cella 2.3
Risultato 1	Risultato 2	Risultato 3

  Unione delle celle della tabella

  Resta da parlare della caratteristica più importante dei tavoli: cellule che si uniscono. Gli attributi vengono utilizzati per combinare più celle in una. colspan E arco di fila tag

  E	può essere solo all'interno di un tag
  E	; le celle della tabella devono avere almeno un contenuto, altrimenti il ​​​​browser potrebbe non visualizzarle affatto, se una cella deve essere vuota, di solito viene inserito uno spazio unificatore (HTML letterale); la tabella si riferisce agli elementi a blocchi della pagina web; le dimensioni della tabella e delle sue celle dipendono dal contenuto, ad es. il tavolo è allungato in larghezza e altezza in modo che tutto si adatti; viene fatto un piccolo rientro tra i bordi delle singole celle e tra il bordo di ciascuna cella e il suo contenuto; il testo delle celle di intestazione (il esimo elemento) viene visualizzato in grassetto e centrato; i bordi attorno alla tabella e alle sue celle non vengono disegnati per impostazione predefinita. Intestazione della tabella Iniziamo con il tag coppia
  E	. L'attributo colspan imposta il numero di celle combinate orizzontalmente e rowspan - verticalmente: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Esempio di risultato: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Quando si uniscono le celle, è importante controllare il numero di celle in ogni riga in modo che non vi siano errori. Sì, il disegno	sostituisce due celle, quindi la riga successiva dovrebbe avere due tag		, o lo stesso design! Se il numero di celle in tutte le righe non corrisponde, verranno visualizzate celle extra vuote. Un esempio di codice html errato durante l'unione delle celle: cella 1.1 cella 1.2 cella 2.1 cella 2.2 E il risultato visualizzato nel browser: Quelli. se analizzi il codice html, noterai che la prima riga ha tre celle, due delle quali sono unite usando l'attributo colspan, e la seconda riga ha solo due celle aggiunte. Pertanto, nella seconda riga viene visualizzata una terza cella vuota. Attributi dei tag In questo post, abbiamo già incontrato un attributo tag . Con l'attributo border, che imposta la larghezza del bordo in pixel. Il valore predefinito è 0 e pertanto le celle vengono visualizzate senza bordo per impostazione predefinita. Oltre all'attributo border, ci sono molti altri importanti attributi supportati dal tag. . Diamo un'occhiata a loro. Attributo allineare- imposta allineamento tabelle sulla pagina. Può assumere i valori left, center, right, che impostano rispettivamente l'allineamento a sinistra, centro e destra. L'impostazione predefinita è sinistra. Attributo sfondo, Quale imposta l'immagine di sfondo al tavolo. Prende l'indirizzo del file immagine come valore. bgcolor- installa colore di sfondo tabelle. Può essere utilizzato insieme all'attributo background. Attributo colore del bordo imposta colore del telaio tabelle. imbottitura cellulare- definisce distanza tra il bordo della cella e il suo contenuto. Consente di migliorare la leggibilità della tabella. Il valore può essere qualsiasi numero positivo. Spaziatura delle celle- imposta distanza tra i confini cellulari esterni. Su questo di cui parlare come inserire la tabella in pagina html Concludo, riassumo solo: i tag vengono utilizzati per inserire una tabella - designazione del tavolo, - aggiungendo una linea e , sezione di completamento e sezione del corpo ; utilizzare gli attributi dei tag per unire le celle - inserire una cella; il tavolo è elemento di blocco pagine web; il contenuto delle celle può essere non solo testo, ma anche immagini e altre tabelle; una tabella può contenere tre tipi di sezioni: header section — colspan e rowspan. Questo è tutto, nel prossimo post parlerò degli strumenti di navigazione nel sito html. Iscriviti agli aggiornamenti del mio blog per non perderti questo post! Tutti, a presto! A causa della versatilità delle tabelle, un gran numero di parametri che ne controllano l'aspetto, le tabelle sono diventate per molto tempo un certo standard per il layout delle pagine web. Una tabella con un bordo invisibile è come una griglia modulare, nei cui blocchi è conveniente posizionare elementi di una pagina web. Tuttavia, questo non è del tutto il giusto approccio, perché ogni oggetto HTML è definito per i propri scopi e se viene utilizzato per altri scopi e ovunque, ciò significa che non ci sono alternative. È andata così per molto tempo, fino a quando i livelli hanno sostituito le tabelle durante la disposizione dei siti. Ciò non significa che ora i livelli vengano utilizzati sempre, ma la tendenza è già stata chiaramente delineata: le tabelle vengono utilizzate per contenere i dati tabulari e i livelli vengono utilizzati per il layout e il design. Crea una tabella Una tabella è composta da righe e colonne di celle che possono contenere testo e grafica. Le tabelle sono comunemente utilizzate per organizzare e presentare i dati, ma le tabelle non si limitano a questo. Con l'aiuto delle tabelle, è conveniente creare layout di pagina posizionandoli correttamente frammenti di testo e immagini. Il tag viene utilizzato per aggiungere una tabella a una pagina Web. . Questo elemento funge da contenitore per gli elementi che definiscono il contenuto della tabella. Qualsiasi tabella è composta da righe e celle, che vengono impostate rispettivamente utilizzando i tag E . La tabella deve contenere almeno una cella (esempio 12.1). Consentito invece di tag usa tag . Testo in una cella stilizzata con un tag , viene visualizzato dal browser in grassetto ed è centrato nella cella. In caso contrario, le differenze tra le celle create tramite tag E NO. Esempio 12.1. Crea una tabella Cella 1 Cella 2 Cella 3 Cella 4 La disposizione delle cellule e il loro aspetto è mostrata in fig. 12.1. Le tabelle in HTML sono così funzionali che puoi usarle per impaginare interi siti (leggi). Ora parleremo dell'inserimento di semplici tabelle HTML in una pagina web, analizzando solo il markup, ma senza toccare il design, perché è meglio decorare le tabelle con stili CSS. Tag e attributi della tabella Ecco gli elementi principali necessari per creare tabelle: - il contenitore all'interno del quale si trova il tavolo (come per contrassegnato o per elenchi numerati). confine- un attributo che determina lo spessore delle cornici. È meglio usare invece la proprietà CSS border. imposta l'etichetta della tabella. Non puoi usare il contenitore, ma se decidi ancora di essere in testa al tavolo, mettilo subito dopo il tag , all'esterno di celle e righe. - un tag di coppia contenente una riga della tabella (celle posizionate allo stesso livello in orizzontale). , ci saranno così tante celle: un tag - una cella. permette di raggruppare le colonne, velocemente e senza intasare il codice per impostarle Caratteristiche generali. Con l'aiuto del contenitore, puoi separare le parti logiche della tabella l'una dall'altra. Posizionato dopo il tag - un tag che crea una cella di intestazione della tabella. Esternamente, il suo contenuto è diverso dal contenuto di altre celle, di solito il testo all'interno Il browser evidenzia in grassetto e posiziona al centro. - il contenitore con cui viene creato cellula semplice. Quanti di questi tag conterrà la stringa (tag , se no, allora dopo . utilizzato per lo stesso scopo di . potrebbe contenere , ma non viceversa. span- un attributo che specifica il numero di colonne a cui vengono applicate le proprietà del contenitore . , E - contenitori che permettono di suddividere la tavola rispettivamente nelle parti superiore (intestazione), 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 Arredamento css Sviluppo PHP Pitone Nel browser, il documento avrà questo aspetto: Scopriamo quali righe di codice sono responsabili di cosa. - ha aperto il tavolo, impostando lo spessore dei telai per esso. - intitolato. - ha aperto la linea. - ha creato una cella con il design dell'intestazione. - ha creato la seconda cella di intestazione nella riga. Il parametro colspan indicava che questa cella doveva occuparne due orizzontalmente. - chiudere la linea. Il resto delle linee è stato creato allo stesso modo. - aggiunta la seconda riga della tabella con celle regolari, non di intestazione. Allo stesso modo, sono state inserite le righe e le celle successive. Strumenti per la creazione di siti web Scopo Attrezzo marcatura HTML XHTML - chiudi il tavolo. Materiali tematici: Come lavorare con la lista nera? Internet illimitato da mts Che tipo di connessione specificare durante la configurazione del router? Come funziona l'app Yandex Taxi per i passeggeri Tutti i modi per contattare l'operatore Tele2 Disabilita i servizi Megafon a pagamento tramite un operatore Descrizione della tariffa "Tablet MTS Qual è l'internet più veloce Aggiornato: 20/04/2021 103583 Se noti un errore, seleziona una parte di testo e premi Ctrl + Invio CONDIVIDERE: Categorie del sito Riparazione Internet Programmi finestre Recupero Dispositivi laptop Virus casa A proposito del diario Contatti Pubblicità Copyright © 2023 sukachoff.com - Windows. Virus. I Quaderni. Internet. ufficio. Utilità. Autisti