Descripción de la mesa con HTML y CSS
Cuando un usuario diseña una base de datos para administrar los datos de los empleados en una empresa, la mayoría de los datos y registros no pueden caber en una sola hoja o tabla. Para administrar los datos, el usuario hace que la hoja sea desplazable. Hay dos tipos de "desplazable". El primero es verticalmente desplazable, y el segundo es horizontalmente desplazable. Scrustable horizontal permite al usuario desplazar el contenido de la ventana hacia la izquierda o hacia la derecha. Mientras que la barra de desplazamiento vertical permite al usuario desplazarse hacia arriba o hacia abajo del contenido.
Esta publicación indicará:
- Método 1: cómo desplazarse horizontalmente con HTML/CSS?
- Método 2: Cómo desplazarse verticalmente con HTML/CSS?
Método 1: cómo desplazarse horizontalmente con HTML/CSS?
Para hacer un desplazamiento de mesa horizontalmente con el HTML/CSS, primero diseñe una tabla utilizando el " Para implicaciones prácticas, pruebe el método de subsistado. Paso 1: Agregue un contenedor Div Con el fin de crear un contenedor Div, agregue el ""Elemento en el documento HTML. Paso 2: Diseñe una mesa A continuación, utilice el " Paso 3: Agregar datos en la tabla A continuación, agregue los siguientes elementos para agregar los datos: Se puede ver que la tabla se ha agregado con éxito: Paso 5: Estilo Div Contenedor Acceda al contenedor DIV utilizando el valor de atributo definido con el selector de atributos. Para hacerlo, el "#contenido principal"Se utiliza en este escenario: Luego, aplique estas propiedades CSS: Producción Paso 6: Haga una mesa horizontalmente desplazable Ahora, utilice el nombre de la clase para acceder a la tabla y aplique las propiedades declaradas a continuación para que la tabla se desplazara horizontalmente: Según el código dado: Producción Paso 7: mesa de estilo Con el fin de diseñar la mesa, acceda a la "mesa"Y datos de tabla con"TD": Aquí: Paso 6: encabezado de mesa de estilo Acceda a la tabla encabezando con la ayuda de "th": Aplica el "color de fondo"Propiedad para establecer el color en la parte trasera del elemento. Método 2: Cómo desplazarse verticalmente con HTML/CSS? Para desplazar la tabla verticalmente con el HTML/CSS, configure el ancho de la tabla, acceda a la tabla con la ayuda del nombre de la clase ".data de mesa"Y aplique las propiedades mencionadas a continuación en el fragmento de código: Aquí: Producción Eso es todo sobre el desplazamiento de la mesa con HTML y CSS. Conclusión Para hacer un desplazamiento de la mesa con HTML y CSS, primero, cree una tabla utilizando el "" elemento. Luego, configure el "altura" y "ancho"De la tabla en CSS y aplique el"Desbordamiento"Propiedad con el valor"Desplazarse".
"Etiqueta para diseñar una tabla para agregar datos a la página HTML. Luego, agregue el siguiente atributo dentro de la etiqueta de la tabla:
El elemento se utiliza para definir las filas en la tabla. El elemento determina una celda como el encabezado de un grupo de células de tabla. "Se usa para agregar los datos en la tabla: Miembros del equipo Sharqa Miembros del equipo Adnan Miembros del equipo de USAMA Sharqa Adnán Usama Hafsa Areej Zara Farah Minhal Zainab María Anees Faiza Umar Taimoor Awais Farhan Hamad Aliyan Rafia Aro Yumna Laiba Hadia Rafia Shahrukh Talha danés Nadia Mukh Nimra
Border: 3px Groove Blue;
margen: 30px 60px;
relleno: 30px;
Ancho: 250px;
Altura: 360px;
desbordamiento: desplazarse;
Color: RGB (66, 40, 233);
Color de fondo: RGB (243, 164, 164);
Color de fondo: RGB (193, 225, 228);
Ancho: 400px;
Altura: 150px;
desbordamiento: desplazarse;
" elemento. Luego, acceda a la tabla en CSS y aplique "la altura", Ancho, y"Desbordamiento"Propiedades en la mesa. Para ese propósito, el valor del "Desbordamiento"Se especifica como"Desplazarse", Que hace que el elemento sea desplazable si los datos del elemento son longitud. Este tutorial ha explicado el método para diseñar la tabla desplazable con la ayuda de HTML y CSS.