Cómo diseñar tablas usando CSS
Este blog demostrará el procedimiento de estilo mesas usando CSS. Entonces empecemos!
¿Qué son las tablas en html?
Mesas se consideran un componente esencial de un Html documento. Se puede crear usando el " A continuación se dan algunas propiedades CSS importantes y básicas que ayudan en el estilo de la mesa de cambio: Ahora discutiremos todas las propiedades de CSS otorgadas anteriormente para estilo tablas HTML con ejemplos adecuados. Tablas de estilo utilizando la propiedad del borde CSS CSS ofrece una propiedad de "borde" que se utiliza para agregar bordes en una mesa. Para agregar un borde, puede adoptar el siguiente ejemplo. Ejemplo Producción Borde de la mesa de estilo utilizando la propiedad de ancho CSS En el ejemplo anterior, ha visto el método para insertar un borde alrededor de una tabla en CSS. Lo dado "borde"La propiedad no especifica el ancho, ya que es posible que desee ajustarlo de acuerdo con sus requisitos. Para hacerlo, consulte el ejemplo proporcionado. Ejemplo Anchura completa de la mesa Producción Tablas de estilo utilizando propiedad de colapso de borde CSS Como puede ver, la tabla creada en el ejemplo anterior tiene un borde separado para cada fila y columna que podría no dar una mirada decente en un sitio web. Sin embargo, CSS le permite colapsar el fronteras en un solo borde usando el "colapso de fronteras" propiedad. Ejemplo Colapso de bordes de mesa Producción Mesa de estilo con propiedades de ancho y altura de CSS En CSS, el "ancho" y "alturaLas propiedades se utilizan principalmente para el cambio las matrices de tabla. Por ejemplo, en el siguiente ejemplo, estableceremos la tabla ancho como "90%" y el altura de la celda de encabezado de la mesa como "90px": Tablas de estilo usando CSS Ejemplo para establecer altura y ancho: Producción Alineación de células de tabla de estilo utilizando la propiedad de alineación vertical CSS CSS "alinear verticalLa propiedad se utiliza para alinear el texto en la celda de la tabla desde la parte superior, inferior o media, pero debe seleccionar si alinear la fila o las columnas verticalmente. Verifiquemos el ejemplo proporcionado: Tablas de estilo en HTML Ejemplo de configuración de alineación vertical El ejemplo anterior alineará verticalmente el texto de la celda de la tabla con el fondo: Alineación de células de tabla de estilo utilizando la propiedad de alineación horizontal CSS CSS ofrece "alinearse horizontal"Propiedad con el propósito de alinear el texto horizontalmente. Esta propiedad puede ayudar a alinear el texto a la izquierda, a la derecha o al centro: Tablas de estilo en HTML Ejemplo de configuración de alineación horizontal El ejemplo anterior alineará el texto agregado en la celda de la tabla con respecto a abajo: Tablas de estilo que usan propiedad de relleno CSS El "rellenoSe utiliza la propiedad CSS para controlar los espacios entre las celdas de texto y el borde. Se usa principalmente para el Ejemplo Tablas de estilo en HTML Ejemplo de uso de la propiedad de relleno Las imágenes dadas a continuación significan que hemos agregado con éxito el relleno "20px" entre el borde y el texto de la celda: Tablas de estilo utilizando propiedad CSS de color de fondo CSS le permite definir los colores por separado para cada tabla cada columna, fila o celda. Por ejemplo, la siguiente tabla contendrá el fondo del encabezado de la mesa "th" como "naranja" color y todo "enésimo hijo (incluso)"Un número de filas"TR" tendrá "gris" color de fondo: Encabezado de mesa de color Producción Conclusión A Estilo html Tablas, puedes utilizar diferentes propiedades de CSS Para agregar y ajustar bordes, crear bordes de colapso, ajustar el ancho y la altura de la tabla, alinear el texto horizontal o verticalmente, agregar relleno o personalizar filas, columnas o celdas con los colores especificados. Este blog demostró el uso de diferentes propiedades CSS para tablas de estilo para una página web. Pruébalos y disfruten de diseñar mesas HTML de una manera nueva! "Etiqueta y las etiquetas de la sub-mesa"
"Para las filas," "Para columnas, y" "Para los encabezados de la mesa. Todas las etiquetas mencionadas son la etiqueta de tablas básicas; Sin embargo, las propiedades de estilo CSS se pueden usar para las tablas de estilo.
El ejemplo dado a continuación mostrará un sólido "negro"Border con"1px"Ancho para mesa completa"mesa", Encabezados"th", Y columnas"TD":Maestro Alumno Alicia Marca Lujoso Grifo
En este ejemplo, crearemos una tabla HTML y la peinaremos de una manera que abarcará el escaneo completo con ancho completo "100%":Maestro Alumno Alicia Marca Lujoso Grifo
Ahora, utilizaremos el "colapso de fronterasPropiedad para peinar la tabla creada con un solo borde para filas y columnas:Maestro Alumno Alicia Marca Lujoso Grifo
Maestro Alumno Alicia Marca Lujoso Grifo
Maestro Alumno Alicia Marca Lujoso Grifo
Maestro Alumno Alicia Marca Lujoso Grifo
y elementos. Maestro Alumno Alicia Marca Lujoso Grifo
Maestro Alumno Alicia Marca Lujoso Grifo