Cómo se usa
- Abre la pestaña Tabla para crear una tabla, o la pestaña Sombra de caja para una sombra.
- Para una tabla, fija el número de filas y columnas, el ancho de la tabla y el grosor del borde. Para una sombra, mueve los controles de desplazamiento, desenfoque y expansión.
- Revisa la vista previa y usa el icono de copiar sobre el bloque de código.
La pestaña Tabla crea una tabla HTML con una fila de encabezado y el número de filas y columnas de cuerpo que fijes. Las celdas de encabezado se rellenan con texto como Header 1 y las de cuerpo con texto como Cell 1-1, que sustituyes por tu propio contenido. El campo de ancho acepta cualquier valor de ancho CSS, con 100% por defecto, y el campo de borde fija el grosor del borde en píxeles. El código copiado empieza con un bloque style para una clase llamada gen-table que define bordes colapsados, relleno de celdas, un encabezado sombreado, filas pares con rayas y un color al pasar el cursor, seguido del marcado de la tabla.
La pestaña Sombra de caja genera una única declaración box-shadow. Controlas el desplazamiento horizontal y el vertical (de -50 a 50 px), el radio de desenfoque (de 0 a 100 px), la expansión (de -50 a 50 px), el color de la sombra como valor de color CSS y una opción inset para una sombra interior. El color por defecto es un negro transparente claro. El cuadro de vista previa se actualiza mientras mueves los controles.
Ambas pestañas muestran el código en un bloque con un botón de copiar. El número de filas y de columnas debe ser al menos 1 y el valor del borde al menos 0.
El código se genera en tu navegador y no se sube nada.
Preguntas frecuentes
¿La tabla incluye estilos?
Sí. La salida incluye un bloque style para la clase gen-table, con bordes, relleno, un encabezado sombreado, filas con rayas y un color al pasar el cursor. Puedes editarlo o quitarlo.
¿Puedo combinar celdas o añadir títulos?
No. El generador crea una cuadrícula sencilla con una fila de encabezado. Edita el marcado copiado si necesitas más.
¿Qué hace el valor de expansión en una sombra?
Agranda o reduce la sombra antes de desenfocarla. Los valores positivos la hacen más grande y los negativos más pequeña.
¿Puedo hacer una sombra interior?
Sí. Marca la opción inset y la salida termina con la palabra clave inset.
¿Se envía mi entrada a algún sitio?
No. El código se crea en tu navegador.