Cómo diseñar mesa con CSS
| Nombre | Curso | Marcas |
|---|---|---|
| Guillermo | Redes | 89 |
| Jacobo | Introducción a C++ | 97 |
| Joseph | Introducción a Java | 77 |
Para crear una tabla en HTML, se utilizan los siguientes elementos HTML:
- "
El elemento se usa para crear una tabla en HTML.
- "El elemento se utiliza para agregar una leyenda a la tabla.
- ""Se utiliza para especificar el encabezado de la tabla, que generalmente contiene los encabezados.
- "
"Se usa para agregar fila. - "
"Especifique el contenido de encabezado. - ""Especifica la parte del cuerpo de la tabla.
La mesa creada se ve así:
Avencemos para ver cómo diseñar esta mesa.
Paso 2: elemento de estilo "cuerpo" de estilo
cuerpo
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;
Color de fondo: RGB (233, 233, 233);
El elemento se aplica con las siguientes propiedades de estilo CSS:
- "Familia tipográfica"Propiedad con el valor"Verdana, Ginebra, Tahoma, Sans-Serif"Se utiliza para aplicar la fuente que es compatible con el navegador. Si el navegador no admite el primer estilo de fuente, el otro se utilizará.
- "color de fondo"La propiedad establece el color de fondo del elemento.
Paso 3: Elemento de estilo "subtítulo"
subtítulo
tamaño de fuente: 25px;
Text-Align: Center;
Color de fondo: #1C6758;
Color: Cornsilk;
El elemento tiene el estilo de la siguiente manera:
- "tamaño de fuenteLa propiedad se utiliza para la configuración del tamaño de la fuente.
- "texto alineado"La propiedad especifica la alineación del texto del elemento.
- "color"La propiedad se refiere al color de fuente del elemento.
Aquí está la salida del código proporcionado anteriormente:
Paso 4: Agregue el borde a la mesa
El "bordeLa propiedad se utiliza para agregar un borde alrededor del elemento. Es una propiedad abreviada que especifica el ancho de la frontera, el estilo de la frontera y el color del borde.Aplicemos el borde, junto con el relleno, y margen a la mesa:
tabla, th, td
borde: 2px Solid #1C6758;
relleno: 1px 6px;
margen: auto;
Aquí:
- "borde"La propiedad ajusta el borde alrededor de la mesa, al especificar el ancho del borde, el estilo del borde y el color del borde.
- "relleno"Especifica el espacio alrededor del contenido del elemento, donde el primer valor define el espacio en el fondo superior y el segundo valor agrega espacio en los lados derecha del contenido.
- "margen"Propiedad con el valor"auto"Agrega el mismo espacio alrededor del elemento.
Producción
Nota: Si no queremos los espacios entre los bordes de la mesa, use la propiedad de colapso de borde.
Paso 5: Espacio fronterizo de colapso de la mesa
Colapso de borde: colapso;
Los espacios entre los bordes de la mesa se pueden eliminar utilizando el "colapso de fronteras"Propiedad con el valor" colapso ":Paso 6: Ajuste el tamaño de la tabla
Thead th
Veamos cómo ajustar el tamaño de la tabla:
Ancho: 160px;
El agregado "ancho"Propiedad con el
El elemento ajustará automáticamente el tamaño de la tabla de acuerdo con él :: También podemos aplicar estilos a la celda de tabla específica. Discutamos!
Paso 7: Celdas de mesa específicas de estilo
Para peinar la celda de tabla específica, especifique el nombre de clase de esa celda en particular. Por ejemplo, el siguiente código representa que al tercer celda de la segunda fila se le asigna un nombre de clase "destacar":99 Ahora, acceda a la celda usando el nombre de clase en el archivo CSS:
.destacar
Color de fondo: #0f90d5;
El ".destacar"Se refiere al punto culminante de la clase del
elemento. Este elemento se aplica con el "color de fondo"Propiedad para especificar el color en el fondo. Como podemos ver, la celda de tabla especificada tiene con éxito:
Paso 8: Establezca la familia y el tamaño de la mesa
mesa
Font-Family: cursiva;
tamaño de fuente: 18px;
Text-Align: Center;
Las siguientes propiedades CSS se aplican al elemento de tabla:
- "Familia tipográfica"La propiedad establece el estilo de fuente del elemento.
- "tamaño de fuenteSe utiliza la propiedad para la configuración de la fuente del elemento.
- "texto alineadoLa propiedad se utiliza para ajustar la alineación del texto.
Aquí está la salida:
Paso 9: Filas de color en secuencia
\
También se le permite aplicar estilos a filas o columnas específicas. Por ejemplo, las filas uniformes tienen siguiendo el siguiente formato:
tbody tr: nth-child (incluso)
Color de fondo: #FFB200;
Aquí:
- El ": enésimo hijo (incluso)Se utiliza el pseudo selector para tomar un argumento que especifica el patrón en el que se aplicará el estilo.
- "color de fondoLa propiedad se utiliza para establecer el color de fondo del elemento.
Se puede observar que el color de fondo se aplica con éxito a las filas incluso:
Eso se trataba de diseñar mesas con CSS
Conclusión
Las tablas son una herramienta importante para mantener los datos organizados. La tabla se puede crear usando el HTML
,
, , y más elementos. Se utilizan varias propiedades de CSS para estilizar la tabla, como el borde, la propiedad de color de fondo, la propiedad de la familia y muchos más. Para una mejor comprensión, este artículo ha explicado un procedimiento paso a paso para diseñar una mesa con CSS. - « Cómo etiquetar una compromiso más antigua en Git?
- Cómo resolver -Squash solo es compatible con Docker Daemon con características experimentales habilitadas Error de Docker »