Form inne i en tabell-html

Form inne i en tabell-html
HTML -tabellmodellen tillater forfatterne å ordne data i form av bilder, danner felt, bilder, formatert tekst, minitabeller og mange flere. Hver tabell kan ha en tilsvarende beskrivelse som gir en kort diskusjon av tabellens funksjon. Videre, hvis brukere ønsker å ordne dataene smart på nettsteder, kan de legge til skjemaer i tabellcellene.

Dette innlegget forklarer metoden for å lage et skjema inne i tabellen.

Hvordan lage et skjema inne i et bord?

Du kan opprette en tabell ved hjelp av “

”Tag, definer deretter tabellrader ved hjelp av“”Og bruk“
”For å legge til data i tabellen. Midt i “”Tag, bruk“”Element for å lage et skjema i tabellen.

Følg de gitte instruksjonene for å lage et skjema inne i et bord.

Trinn 1: Lag en div container

Opprinnelig lag en div container ved å bruke “" stikkord. Legg også til en "id”Attributt og spesifiser et navn til ID for identifikasjon.

Trinn 2: Design et bord

Deretter designer du et bord ved hjelp av “

" stikkord. Definer deretter tabellrader og tabelldata inne i tabellen. For å gjøre det, følg de uttalte trinnene:

”Brukes til å sette inn tabellrappene inne i bordet.
  • ”Er distribuert for å sette dataene i tabellrappene.

    Trinn 3: Lag skjema

    Neste, inne i “

    ”Åpne og lukkende tag, lag et skjema ved hjelp av“”Element og definere følgende element i formen:

    • “”Element spesifiserer etiketten for et felt i et brukergrensesnitt.
    • “”Brukes til å lage effektive kontroller for nettbaserte skjemaer for å godta brukerdata. For å gjøre det, legg til “type”Og“stedholder" attributter.
    • type”Attributt bestemmer den oppgitte typen av den definerte inngangen.
    • stedholder”Attributt brukes til å legge til verdien i formfeltet for å vise:




















    Tabelldata

    Produksjon

    Trinn 5: Style Div Container

    Få tilgang til DIV -beholderen ved hjelp av “id”Velger og verdien av“ id ”som”#Hovedbord”. Bruk deretter de under-nevnte CSS-egenskapene i kodeblokken:

    #hovedtabell
    Grense: 4px Solid RGB (35, 238, 8);
    Farge: RGB (29, 7, 230);
    bakgrunnsfarge: RGB (248, 233, 192);
    polstring: 30px;
    Margin: 20px 40px;

    I ovennevnte kodebit:

    • grense”Brukes til å definere en grense rundt elementet på en HTML -side.
    • farge”Angir fargen på teksten inne i elementet.
    • bakgrunnsfarge”Brukes for å tildele fargen på baksiden av det definerte elementet.
    • polstring”Legger plass rundt elementet inne i den definerte grensen.
    • margin”Bestemmer plassen utenfor den definerte grensen.

    Produksjon

    Trinn 6: Bruk styling på tabelldata

    Få tilgang til tabelldataene ved hjelp av navnet og bruk styling i henhold til dine preferanser:

    Tabell TD
    Grense: 3px Groove RGB (15, 11, 252);

    For å gjøre det, “grense”Er definert rundt tabelldataene.

    Som du kan se at grensen er lagt til med suksess utenfor tabelldataene:

    Trinn 7: Stilskjema

    Få tilgang til skjemaet og bruk CSS -egenskapene i henhold til ditt valg:

    form
    bakgrunnsfarge: RGB (140, 140, 245);

    Som vi har brukt “bakgrunnsfarge”Eiendom for å spesifisere fargen på baksiden av formelementet:

    Det handler om å lage skjemaet inne i bordet.

    Konklusjon

    For å lage et skjema inne i bordet, lag først et bord ved hjelp av "

    " stikkord. Legg deretter til rader ved å bruke "”Og data med“
    ”Element. Etter det, mellom "”Element, lag en form ved å bruke elementet og legge til attributter i henhold til dine preferanser. Dette innlegget har forklart metoden for å lage et skjema i en tabell.