Lezione sull'HTML. Unione di celle

Tabelle HTML organizzare e visualizzare i dati utilizzando righe o colonne. Le tabelle sono costituite da celle formate dall'intersezione di righe e colonne. Celle della tabella può contenere qualsiasi elemento HTML come intestazioni, elenchi, testo, immagini, elementi di modulo e altre tabelle. Puoi aggiungere un titolo associato ad ogni tabella, posizionandolo prima o dopo la tabella.

Non vengono più utilizzate tabelle per l'impaginazione delle pagine web e la disposizione dei singoli elementi, perché questa tecnica non garantisce flessibilità strutturale e adattabilità del sito, aumentando notevolmente il markup HTML.

Per tutti gli elementi della tabella, così come i propri attributi sono disponibili.

Creazione di tabelle in HTML

Contenuto:

1. Come creare una tabella

La tabella viene creata utilizzando un tag accoppiato

Per impostazione predefinita, la tabella e le celle non hanno bordi visibili. frontiere vengono impostati utilizzando la proprietà border:

/* i bordi esterni della tabella sono grigi, spessi 1px */ table (border: 1px solid grey;) /* bordi delle celle della prima riga della tabella */ th (border: 1px solid grey;) /* bordi delle celle del corpo della tabella */ td (bordo: 1px grigio pieno;)

Spazi tra le celle della tabella vengono rimossi utilizzando la proprietà della tabella (border-collapse: collasso;) .

Larghezza La tabella ha per impostazione predefinita la larghezza del suo contenuto interno. Per impostare la larghezza, è necessario impostare la proprietà larghezza:

/* renderà la larghezza della tabella uguale alla larghezza del blocco contenitore in cui si trova */ table (larghezza: 100%;) /* imposterà una larghezza fissa per la tabella */ table (larghezza: 600px; )

Se per le celle della tabella sono specificati la spaziatura interna e i bordi, la larghezza della tabella includerà i seguenti valori:
imbottitura-sinistra e imbottitura-destra , la larghezza del bordo sinistro più la larghezza del bordo destro dell'ultima cella della riga. Se vengono specificati la larghezza e i bordi delle celle, la larghezza della tabella sarà la somma della larghezza delle celle più la larghezza del bordo sinistro e la larghezza del bordo destro dell'ultima cella della riga.

2. Come creare righe di tabella

Le righe o le righe della tabella vengono create utilizzando il tag

3. Come creare una cella di intestazione di colonna di tabella

4. Come realizzare una cellula del corpo di un tavolo

5. Come aggiungere una didascalia (titolo) a una tabella

Crea una firma della tabella. Aggiunto direttamente dopo il tag

6. Raggruppamento di righe e colonne della tabella

Crea un gruppo strutturale di colonne, evidenziando celle logicamente omogenee. Raggruppa una o più colonne per una formattazione uniforme, consentendoti di applicare stili alle colonne anziché ripetere stili per ogni cella e ogni riga. Aggiunto direttamente dopo i tag Riso. 2. Evidenziare le colonne della tabella in un colore diverso utilizzando i tag e

7. Raggruppamento delle sezioni della tabella

L'elemento crea un gruppo di intestazioni per le righe della tabella per fornire un aspetto uniforme. Utilizzato in combinazione con elementi

L'elemento deve essere utilizzato nel seguente ordine: come elemento figlio

Crea un gruppo di righe per rappresentare le informazioni sugli importi o sui totali, posizionate nella parte inferiore della tabella. Usato una volta in una tabella. Posizionato dopo il tag, prima dei tag

Questo raggruppamento di righe è stato incluso nello standard nella speranza che i browser, quando visualizzano tabelle lunghe, scorressero le righe di dati mantenendo stazionarie l'intestazione e la sottointestazione e, quando le inviavano a una stampante, sarebbero stati in grado di utilizzare l'intestazione e la sottointestazione come piè di pagina. Tuttavia, i browser moderni non lo fanno e li visualizzano semplicemente entrambi come righe di dati o, nella migliore delle ipotesi, posizionano semplicemente le righe corrispondenti all'inizio e alla fine della tabella.

8. Come unire le celle della tabella

Gli attributi colspan e rowspan uniscono le celle della tabella. L'attributo colspan specifica il numero di celle unite orizzontalmente e l'attributo rowspan specifica il numero di celle distribuite verticalmente.

9. Attributi degli elementi della tabella

Attributo	Descrizione, valore accettato
colspan	Il numero di celle in fila da unire orizzontalmente.
intestazioni	Specifica un elenco di celle di intestazione contenenti informazioni di intestazione per la cella di dati corrente. Progettato per i browser vocali.	...	...
estensione delle righe	Il numero di celle nella colonna da unire verticalmente.	Valori possibili: numero da 1 a 999.
arco	Il numero predefinito di colonne combinate per definire un singolo stile è 1.	Valori possibili: numero da 1 a 999.

10. Esempio di creazione di una tabella

Menu del ristorante "Romashka"
Cucina	Piatti freddi		Piatti caldi		Dolce
Cucina	Insalate	Spuntini	Primo pasto	Secondi piatti	Dolce
russo	La vinaigrette	Lingua con rafano	Shchi con crauti	Gnocchi di patate	Mele al forno con miele
	Olivi	Gelatina di manzo	Rasolnik fatto in casa	Carpa crucian cotta in panna acida	Torta di frittelle
	Aringhe sotto una "pelliccia"	Lucioperca in gelatina	Miscuglio di carne	Cotolette "Pozharski"	Torta "Patate"
spagnolo	Ceviche di capesante	Empanadas	Zuppa di pane con aglio	Paella ai frutti di mare	churros
	Timballo di avocado e tonno	Afotomato	Fabada asturiana	Rakso di maiale	Almoixavena
	Fagioli con prosciutto	Chanfaina	Zuppa di pesce con gnocchi di semolino	Tortilla di patate	Bunuelos
francese	Insalata dei Vosgi	Rilette di pollo	Crema di melanzane "Renoir"	Gratinate di patate	Briochi
	Panzanella	Delizioso formaggio	Zuppa di zucca francese	Gratin di pollame	Torta al limone ligure
	Tartaro	Salmone marinato	Zuppa "Conti"	Tartiflette	Savarin "Trionfo"

3.8. Unione delle celle della tabella

In pratica, ci sono un gran numero di tabelle in cui una cella combina più celle in altezza e larghezza (vedi Fig. 3.2). In HTML, le celle vengono combinate utilizzando gli attributi colspan e rowspan. L'attributo colspan specifica il numero di celle che una determinata cella si estende orizzontalmente e l'attributo rowspan specifica il numero di celle che si estende verticalmente.

Nella fig. La Figura 3.12 mostra una tabella con celle unite. L'intestazione della tabella si trova nella cella che unisce tutte e tre le celle della riga. La tabella contiene altre due celle, ciascuna delle quali unisce due celle verticalmente. Il codice per tale tabella è mostrato nel Listato 3.7.

Riso. 3.12. Tabella con celle unite

Listato 3.7. Esempio di utilizzo degli attributi di unione di celle

Tabella HTML

Dal libro Computer 100. A partire da Windows Vista autore Zozulya Yuri

Selezione delle celle Per modificare le opzioni di formattazione di più celle contemporaneamente, è necessario selezionarle utilizzando una delle seguenti tecniche.? Per selezionare una singola cella, sposta il puntatore del mouse sul bordo sinistro e quando diventa una freccia nera obliqua,

Dal libro AutoCAD 2009 autore Orlov Andrej Aleksandrovich

Cancellare celle Nella lezione precedente si è già detto che per cancellare una cella basta renderla attiva e premere il tasto Canc. Allo stesso modo è possibile cancellare più celle contemporaneamente selezionando prima l'intervallo desiderato. La cancellazione porta alla cancellazione solo di quelle presenti

Da una cartella di lavoro di Excel. Corso multimediale autore Medinov Oleg

Modifica delle celle della tabella Per modificare una cella della tabella, è necessario fare clic su di essa con il mouse. Verranno visualizzati i contrassegni di controllo (Figura 4.45). Riso. 4.45. Cella della tabella selezionataSpostando il puntatore mentre si tiene premuto il pulsante del mouse, è possibile selezionare un gruppo di celle. Puoi anche evidenziare

Dal libro AutoCAD 2010 autore Orlov Andrej Aleksandrovich

Unione di celle Due o più celle di un foglio di lavoro possono essere unite in una sola. L'unione delle celle può essere necessaria, ad esempio, quando si crea un'intestazione comune per più colonne (Fig. 3.15). Riso. 3.15. Esempio di unione di celle Per unire le celle, procedi come segue

Dal libro Fondamenti di informatica: libro di testo per le università autore Malinina Larisa Alexandrovna

Modifica delle celle della tabella Per modificare una cella della tabella, è necessario fare clic su di essa con il mouse. In questo caso verranno visualizzati i contrassegni di controllo (Fig. 4.46). Riso. 4.46. Cella della tabella selezionataSpostando il puntatore mentre si tiene premuto il pulsante del mouse, è possibile selezionare un gruppo di celle. Puoi anche

Dal libro MySQL: A Professional's Guide autore PautovAleksej V

6.5. Formattazione delle celle Formattazione del testo e posizionamento all'interno di una cella1. Dal menu Formato, seleziona Celle, quindi vai alla scheda Allineamento. Selezionare le opzioni di allineamento orizzontale e verticale appropriate e, se necessario,

Dal libro HTML 5, CSS 3 e Web 2.0. Sviluppo di siti Web moderni. autore Dronov Vladimir

10.3.3. Set di caratteri e unione della tabella Ogni tabella dispone di un set di caratteri della tabella e di un'unione. Le istruzioni CREATE TABLE e ALTER TABLE hanno clausole facoltative per specificare il set di caratteri della tabella e unirle: CREATE TABLE tbl_name(column_list)[ CHARACTER SET charset_name])

Indietro Ogni utente di PC sperimenta questo...

InoltrareDopodiché vorrai sicuramente un tatuaggio: gli artisti più cool hanno mostrato la loro arte

Una cella combina tutte le celle in una riga
Cella a due linee	Cella 2x2	Cella 2x3
Cella a due linee	Cella 3x2	Cella 3x3
Cella a due linee	Cella 4x2	Cella 4x3
Cella a due linee	Cella 5x2	Cella 5x3