Formulário dentro de uma tabela-html

Formulário dentro de uma tabela-html
O modelo de tabela HTML permite aos autores organizar dados na forma de imagens, formas campos, imagens, texto formatado, mini tabelas e muito mais. Cada tabela pode ter uma descrição correspondente que fornece uma breve discussão sobre a função da tabela. Além disso, se os usuários desejam organizar os dados inteligentes em sites, eles podem adicionar formulários dentro das células da tabela.

Este post explica o método para criar um formulário dentro da tabela.

Como criar um formulário dentro de uma mesa?

Você pode criar uma tabela usando o “

”Tag, então defina linhas de tabela com a ajuda de“" E use "
”Para adicionar dados dentro da tabela. No meio do “”Tag, utilize a“”Elemento para criar um formulário na tabela.

Para criar um formulário dentro de uma mesa, siga as instruções fornecidas.

Etapa 1: faça um contêiner div

Inicialmente, faça um contêiner div usando o “" marcação. Além disso, adicione um “eu ia”Atribua e especifique um nome ao ID para identificação.

Etapa 2: Projete uma tabela

Em seguida, projete uma tabela usando o “

" marcação. Em seguida, defina as linhas de tabela e os dados da tabela dentro da tabela. Para fazer isso, siga as etapas declaradas:

  • ““
Ӄ usado para inserir as linhas de tabela dentro da tabela.
  • ““
  • ”É implantado para colocar os dados dentro das linhas da tabela.

    Etapa 3: Crie formulário

    Em seguida, dentro do “

    ”Abertura e fechamento da tag, crie um formulário com a ajuda do“”Elemento e defina o seguinte elemento no formulário:

    • ““”Elemento especifica o rótulo para um campo em uma interface de usuário.
    • ““”É usado para fazer controles eficazes para formulários baseados na Web para aceitar dados do usuário. Para fazer isso, adicione “tipo" e "espaço reservado" atributos.
    • ““tipo”O atributo determina o tipo declarado da entrada definida.
    • ““espaço reservado”O atributo é utilizado para adicionar o valor no campo do formulário para exibir:




















    Dados da tabela

    Saída

    Etapa 5: estilo o contêiner div

    Acesse o contêiner Div com a ajuda do “eu ia"Seletor e o valor do" id "como"#mesa principal”. Em seguida, aplique as propriedades CSS abaixo mencionadas no bloco de código:

    #mesa principal
    borda: 4px RGB sólido (35, 238, 8);
    Cor: RGB (29, 7, 230);
    Background-Color: RGB (248, 233, 192);
    preenchimento: 30px;
    margem: 20px 40px;

    No trecho de código acima:

    • ““fronteira”É usado para definir um limite ao redor do elemento em uma página HTML.
    • ““cor”Especifica a cor do texto dentro do elemento.
    • ““cor de fundo”É utilizado para alocar a cor na parte traseira do elemento definido.
    • ““preenchimento”Adiciona espaço ao redor do elemento dentro do limite definido.
    • ““margem”Determina o espaço fora da borda definida.

    Saída

    Etapa 6: aplique o estilo nos dados da tabela

    Acesse os dados da tabela com a ajuda de seu nome e aplique o estilo de acordo com suas preferências:

    Tabela TD
    borda: ranhura de 3px RGB (15, 11, 252);

    Para fazer isso, o “fronteira”É definido em torno dos dados da tabela.

    Como você pode ver, a fronteira foi adicionada com sucesso fora dos dados da tabela:

    Etapa 7: formulário de estilo

    Agora, acesse o formulário e aplique as propriedades do CSS de acordo com sua escolha:

    forma
    cor de fundo: RGB (140, 140, 245);

    Como, aplicamos o “cor de fundo”Propriedade para especificar a cor na parte traseira do elemento de formulário:

    Isso se trata de criar o formulário dentro da mesa.

    Conclusão

    Para criar um formulário dentro da tabela, primeiro, crie uma tabela com a ajuda do “

    " marcação. Em seguida, adicione linhas usando o “”E dados com o“
    " elemento. Depois disso, entre os “”Elemento, crie um formulário utilizando o elemento e adicione atributos de acordo com suas preferências. Este post explicou o método para criar um formulário dentro de uma mesa.