Forma all'interno di una tabella-html

Forma all'interno di una tabella-html
Il modello della tabella HTML consente agli autori di disporre i dati sotto forma di immagini, forme campi, immagini, testo formattato, mini tabelle e molti altri. Ogni tabella può avere una descrizione corrispondente che fornisce una breve discussione sulla funzione della tabella. Inoltre, se gli utenti desiderano organizzare i dati in modo intelligente sui siti Web, possono aggiungere moduli all'interno delle celle della tabella.

Questo post spiega il metodo per la creazione di un modulo all'interno della tabella.

Come creare una forma all'interno di una tabella?

Puoi creare una tabella usando "

"Tag, quindi definisci le righe della tabella con l'aiuto di""E usa"
"Per aggiungere dati all'interno della tabella. Nel mezzo del ""Tag, utilizza il""Elemento per la creazione di un modulo nella tabella.

Per creare un modulo all'interno di una tabella, seguire le istruzioni fornite.

Passaggio 1: crea un contenitore div

Inizialmente, crea un contenitore div usando il ""Tag. Inoltre, aggiungi un "id"Attributo e specificare un nome all'ID per l'identificazione.

Passaggio 2: progettare una tabella

Successivamente, progetta una tabella usando il "

"Tag. Quindi, definisci le righe della tabella e i dati della tabella all'interno della tabella. Per fare ciò, segui i passaggi dichiarati:

  • "
"Viene utilizzato per inserire le righe della tabella all'interno della tabella.
  • "
  • "È distribuito per mettere i dati all'interno delle righe della tabella.

    Passaggio 3: crea forma

    Successivamente, all'interno del "

    "L'apertura e la chiusura del tag, creare un modulo con l'aiuto di""Elemento e definire il seguente elemento nella forma:

    • ""L'elemento specifica l'etichetta per un campo in un'interfaccia utente.
    • ""Viene utilizzato per effettuare controlli efficaci per i moduli basati sul Web per accettare i dati dell'utente. Per farlo, aggiungi "tipo" E "segnaposto"Attributi.
    • "tipo"L'attributo determina il tipo dichiarato di input definito.
    • "segnaposto"L'attributo viene utilizzato per aggiungere il valore nel campo del modulo per visualizzare:




















    Dati della tabella

    Produzione

    Passaggio 5: modella il contenitore div

    Accedi al contenitore Div con l'aiuto del "id”Selettore e il valore dell '" id "come"#Tabella principale". Quindi, applicare le proprietà CSS di seguito nel blocco del codice:

    #Table principale
    Bordo: 4px Solid RGB (35, 238, 8);
    Colore: RGB (29, 7, 230);
    Background-color: RGB (248, 233, 192);
    imbottitura: 30px;
    Margine: 20px 40px;

    Nel frammento di codice sopra:

    • "confine"Viene utilizzato per definire un limite attorno all'elemento in una pagina HTML.
    • "colore"Specifica il colore del testo all'interno dell'elemento.
    • "colore di sfondo"È utilizzato per allocare il colore sul retro dell'elemento definito.
    • "imbottitura"Aggiunge spazio attorno all'elemento all'interno del confine definito.
    • "margine"Determina lo spazio al di fuori del bordo definito.

    Produzione

    Passaggio 6: applicare lo stile sui dati della tabella

    Accedi ai dati della tabella con l'aiuto del suo nome e applica lo stile in base alle tue preferenze:

    Tabella td
    Bordo: 3px Groove RGB (15, 11, 252);

    Per farlo, il "confine"È definito attorno ai dati della tabella.

    Come puoi vedere che il bordo è stato aggiunto con successo al di fuori dei dati della tabella:

    Passaggio 7: forma di stile

    Ora, accedi al modulo e applica le proprietà CSS in base alla tua scelta:

    modulo
    Background-color: RGB (140, 140, 245);

    Come, abbiamo applicato il "colore di sfondo"Proprietà per specificare il colore sul retro dell'elemento del modulo:

    Si tratta di creare la forma all'interno del tavolo.

    Conclusione

    Per creare una forma all'interno della tabella, prima, crea una tabella con l'aiuto di "

    "Tag. Quindi, aggiungi righe usando ""E dati con il"
    "Elemento. Dopodiché, tra il ""Elemento, crea una forma utilizzando l'elemento e aggiungi attributi in base alle tue preferenze. Questo post ha spiegato il metodo per la creazione di una forma all'interno di una tabella.