Formar dentro de una tabla html

Formar dentro de una tabla html
El modelo de tabla HTML permite a los autores organizar datos en forma de imágenes, campos de formularios, imágenes, texto formateado, mini tablas y muchas más. Cada tabla puede tener una descripción correspondiente que proporcione una breve discusión de la función de la tabla. Además, si los usuarios desean organizar los datos de manera inteligente en los sitios web, pueden agregar formularios dentro de las celdas de la tabla.

Esta publicación explica el método para crear un formulario dentro de la mesa.

Cómo crear un formulario dentro de una mesa?

Puede crear una tabla usando el "

"Etiqueta, luego defina filas de tabla con la ayuda de"" y use "
"Para agregar datos dentro de la tabla. En el medio del ""Etiqueta, utilice el""Elemento para crear una forma en la tabla.

Para crear un formulario dentro de una tabla, siga las instrucciones dadas.

Paso 1: Haz un contenedor Div

Inicialmente, haga un contenedor Div utilizando el "" etiqueta. Además, agregue un "identificaciónAtribuye y especifique un nombre a la identificación de ID.

Paso 2: Diseñe una mesa

A continuación, diseñe una mesa utilizando el "

" etiqueta. Luego, defina las filas de la tabla y los datos de la tabla dentro de la tabla. Para hacerlo, siga los pasos establecidos:

  • "
"Se usa para insertar las filas de la tabla dentro de la tabla.
  • "
  • "Se implementa para colocar los datos dentro de las filas de la tabla.

    Paso 3: Crear forma

    A continuación, dentro del "

    "Etiqueta de apertura y cierre, cree un formulario con la ayuda del""Elemento y defina el siguiente elemento en el formulario:

    • "El elemento "especifica la etiqueta para un campo en una interfaz de usuario.
    • ""Se utiliza para realizar controles efectivos para formularios basados ​​en la web para aceptar datos de usuario. Para hacerlo, agregue "tipo" y "marcador de posición"Atributos.
    • "tipo"El atributo determina el tipo indicado de la entrada definida.
    • "marcador de posiciónEl atributo se utiliza para agregar el valor en el campo Formulario para mostrar:




















    Datos de tabla

    Producción

    Paso 5: diseñe el contenedor Div

    Acceda al contenedor Div con la ayuda del "identificación"Selector y el valor de la" ID "como"#mesa principal". Luego, aplique las propiedades CSS mencionadas a continuación en el bloque de código:

    #mesa principal
    borde: 4px sólido RGB (35, 238, 8);
    Color: RGB (29, 7, 230);
    Color de fondo: RGB (248, 233, 192);
    relleno: 30px;
    margen: 20px 40px;

    En el fragmento de código anterior:

    • "borde"Se usa para definir un límite alrededor del elemento en una página HTML.
    • "color"Especifica el color del texto dentro del elemento.
    • "color de fondo"Se utiliza para asignar el color en la parte posterior del elemento definido.
    • "relleno"Agrega espacio alrededor del elemento dentro del límite definido.
    • "margen"Determina el espacio fuera del borde definido.

    Producción

    Paso 6: Aplicar el estilo en los datos de la tabla

    Acceda a los datos de la tabla con la ayuda de su nombre y aplique el estilo de acuerdo con sus preferencias:

    tabla TD
    borde: 3px Groove RGB (15, 11, 252);

    Para hacerlo, el "borde"Se define alrededor de los datos de la tabla.

    Como puede ver, el borde se ha agregado con éxito fuera de los datos de la tabla:

    Paso 7: Forma de estilo

    Ahora, acceda al formulario y aplique las propiedades CSS de acuerdo con su elección:

    forma
    Color de fondo: RGB (140, 140, 245);

    Como, hemos aplicado el "color de fondoPropiedad para especificar el color en la parte posterior del elemento de formulario:

    Eso se trata de crear el formulario dentro de la mesa.

    Conclusión

    Para crear un formulario dentro de la tabla, primero, cree una tabla con la ayuda del "

    " etiqueta. Luego, agregue filas usando el ""Y datos con el"
    " elemento. Después de eso, entre el ""Elemento, cree un formulario utilizando el elemento y agregue atributos de acuerdo con sus preferencias. Esta publicación ha explicado el método para crear un formulario dentro de una mesa.