Establecer espaciado celular en CSS - HTML
Se utilizan varias propiedades de CSS para diseñar la mesa en HTML, como color, borde, margen, acolchado y muchos más. Desafortunadamente, el "espacería" y "envasado celularLos atributos no son compatibles en HTML5. Sin embargo, el CSS "espacio fronterizo"La propiedad se usa para establecer el espacio celular y el CSS"relleno"La propiedad es para configurar el relleno celular de las celdas de la tabla.
Los resultados de la publicación son:
- Cómo crear tabla en html?
- Cómo configurar el relleno celular en CSS?
- Cómo establecer el espaciado celular en tablas HTML usando CSS?
Cómo crear tabla en html?
Para crear una tabla en HTML, siga las instrucciones que cotizan a continuación:
- En la página HTML, primero, agregue un HTML "
" elemento.
- Entonces, agregue el
etiqueta que se usa para especificar la fila de encabezado con el "colspan" valor de atributo "3". Este atributo hará que la celda sea igual a tres columnas. - Después de eso, agregue un poco
Etiquetas para crear filas en una mesa. - La primera fila contiene los encabezados con el
etiquetas. - Otras filas contienen el HTML
Etiquetas para especificar las columnas. Aquí está el código HTML para crear una tabla simple:
Mesa Rollo no El nombre del estudiante Cursos 1 John Fundamentos de C++ 2 Lisa Fundamentos de Java 3 Diana La interacción persona-ordenador Pasemos a la sección CSS para diseñar la mesa.
Elemento de estilo "Table" de estilo
mesa
margen: auto;
borde: 2px sólido #0e5e6f;
Color de fondo: #FDF3E1;
tamaño de fuente: 16px;
La explicación de las propiedades CSS anteriores se enumera a continuación:
- "margen"La propiedad agrega espacios alrededor del elemento.
- "borde"Es una propiedad abreviada que agrega un borde alrededor del elemento al especificar el ancho del borde, el estilo de borde y el color del borde.
- "color de fondo"La propiedad aplica el color al fondo del elemento.
- "tamaño de fuente"Es la propiedad para establecer el tamaño de fuente del elemento.
Elementos de estilo "th" y "td"
th, td
borde: 2px Solid #404258;
Color de fondo: #9ad2d8;
El html
y Los elementos se diseñan utilizando las propiedades de "borde" y "color de fondo". Producción
Vamos a dirigir para establecer el espacio celular y el relleno celular de la tabla HTML.
Cómo establecer el espacio celular en CSS?
Como sabemos, HTML5 no admite el "espacería" y "envasado celular"Atributos. Sin embargo, la propiedad CSS "espacio fronterizo"Puede establecer la distancia entre los bordes de la celda adyacente como esta:
mesa
espaciado fronterizo: 15px;
Aquí está el resultado que muestra el efecto del "espacio fronterizo"Propiedad en el elemento de tabla:
Cómo configurar el relleno celular en CSS?
Para establecer el relleno celular en la tabla HTML, el CSS "rellenoSe especifica la propiedad. La propiedad del relleno agrega espacio dentro del borde de la celda.
Ahora, aplique la propiedad de relleno CSS a la "th" y "TD"Elementos de la tabla de la siguiente manera:
th, td
relleno: 10px;
De la siguiente salida, se puede observar que los espacios se agregan alrededor del contenido de la celda:
Hemos compilado ejemplos para establecer espaciado celular y relleno celular en HTML usando CSS.
Conclusión
HTML5 no admite el espacio celular y los atributos de relleno celular. Para establecer estos factores, primero, cree una tabla en HTML y aplique el CSS "espacio fronterizo"Propiedad y"relleno" propiedad. Se utiliza la propiedad de espacio fronterizo CSS para establecer el espacio celular. Sin embargo, el relleno se usa para ajustar el relleno celular. Esta publicación ha proporcionado ejemplos detallados de cómo establecer el espaciado celular y el relleno celular en CSS.
- Entonces, agregue el