Encontrará muchos atributos y etiquetas cuando trabaje con HTML (Lenguaje de marcado de hipertexto) y otros lenguajes de marcado como XML. Las tablas son atributos que siempre debe usar para permitir que los usuarios exploren, comparen y analicen fácilmente grandes cantidades de datos.
Con las tablas, los usuarios pueden ver los puntos clave, las conclusiones o los resultados de un vistazo, incluso sin leer el artículo completo. Puede usar CSS para diseñar y cambiar la apariencia de sus tablas.
Estas son algunas de las razones por las que podría necesitar diseñar una tabla en su aplicación;
Mejorar la apariencia visual: Las mesas regulares pueden ser aburridas y simples. Diseñar estas tablas mejorará su apariencia y las hará atractivas para los usuarios.
Mejorar la accesibilidad: Las mesas de diseño pueden hacerlas accesibles incluso para personas con discapacidades.
Mejorar la legibilidad: Puede usar diferentes técnicas de estilo para facilitar a los usuarios la navegación por los datos presentados en sus tablas.
La imagen de marca: Puede reforzar la identidad de su marca cuando aplica fuentes y colores consistentes a sus tablas en toda su aplicación.
Bueno para los motores de búsqueda: Organizar sus datos en tablas será útil si desea clasificar su sitio web en los primeros lugares de los motores de búsqueda.
Contenido del sitio
Crear una tabla básica con HTML
Para demostrar cómo funciona una tabla en HTML, crearemos una carpeta de proyecto, navegaremos a la carpeta y crearemos dos archivos; index.html, que llevará nuestro código HTML, y styles.css, que llevará nuestro código CSS (estilo).
Si desea seguir, use estos comandos para comenzar;
mkdir Estilo-HTML-Tablas
cd Estilo-HTML-Tablas
toque Estilo-HTML-Tablas
Ahora tiene la carpeta del proyecto básico para ayudarlo a crear tablas HTML. Quiero presentar diferentes lenguajes de programación, sus casos de uso y ejemplos de empresas que utilizan estos lenguajes.
Para crear una tabla HTML, todos los datos deben colocarse en la etiqueta
…
.
En su archivo HTML, genere la estructura básica de un documento HTML. Agrega este código en la etiqueta
Si examina esta tabla detenidamente, notará algunas etiquetas adicionales incluidas en la etiqueta
;
,
Y
.
Estas etiquetas hacen lo siguiente;
fila de la tabla, se incluye en el elemento
. La etiqueta
puede contener uno o más elementos
Y
.
el encabezado de la tabla, está contenido en la etiqueta
. Por defecto, su contenido está en negrita.
datos de la tabla, describe el contenido de datos en las celdas de la tabla.
Cuando renderices el código que escribimos arriba, lo tendremos en nuestro navegador;
Propiedades CSS utilizadas para diseñar tablas
La tabla que creamos arriba es completamente funcional. Sin embargo, deja mucho que desear ya que no está bien diseñado. Para lograr los estilos deseados y hacer que la tabla sea visualmente atractiva, utilizaremos CSS.
¿Recuerdas el archivo CSS que creamos? Ahora es el momento de usarlo. Sin embargo, primero debe importar su archivo CSS a su archivo HTML para que funcione el estilo. Llamamos a nuestro archivo CSS estilos.css. En la sección
de su documento HTML, agregue lo siguiente;
Ahora estamos listos para darle estilo a nuestra mesa. Podemos diseñarlo de la siguiente manera;
#1. Borde
Podemos agregar un borde alrededor de las celdas de nuestra tabla. Para hacer esto, estableceremos una propiedad de borde en los elementos
Y
. Podemos establecer el borde en 2px.
th, td {
border: 2px solid orange;
}
Establecimos el valor del borde en 2 y agregamos naranja como color.
Cuando vea la nueva página, verá lo siguiente;
#2. Colapso del bordillo
Si examina la captura de pantalla anterior, notará que hay espacios entre los bordes de cada celda. La propiedad border-collapse determina si las celdas adyacentes de una tabla deben compartir un borde.
Si desea que las celdas compartan un borde, agregue este código a su archivo CSS;
table {
border-collapse: collapse;
}
Cuando ve su página, puede ver que las celdas comparten bordes de la siguiente manera;
Si desea que las celdas tengan bordes diferentes, agregue esto a su archivo CSS;
table {
border-collapse: separate;
}
La página renderizada aparecerá de la siguiente manera;
#3. Espaciado de bordes
Al usar la propiedad border-space, podemos crear un pequeño espacio entre las celdas de nuestra tabla. Definimos la regla dentro de la clase de tabla en nuestro archivo CSS.
Para que esta propiedad funcione, necesitamos usar border-collapse: separa; propiedad.
Podemos tener nuestra clase de tabla de la siguiente manera;
Los bordes de las celdas tienen un espacio de 3px.
Cuando represente la matriz, aparecerá de la siguiente manera;
#4. Plan de asientos
La propiedad Table-layout determina la naturaleza de la tabla. Puedes tener mesas que siempre tengan la misma longitud. Por otro lado, también puedes crear tablas que cambien según el contenido.
Si queremos tener celdas de tamaños similares, podemos establecer la propiedad de diseño de tabla como fija.
Si queremos celdas que cambien según el contenido, podemos cambiar la propiedad de diseño de la tabla a automática.
disposición de la mesa: automática;
La clase de tabla final en nuestro código CSS será;
Verifique la última celda de la tabla y observe que agregué estas palabras; MailChimp y mucho más.
Ahora puede ver que las celdas de la última fila son más grandes que las demás porque el diseño de la tabla es flexible según el contenido.
El estilo que hemos cubierto hasta ahora se ha centrado en toda la tabla. Ahora podemos centrarnos en clases individuales cambiando el color de fondo, la fuente y las propiedades de alineación del texto para filas, celdas o encabezados.
Podemos diseñar estas propiedades de la siguiente manera;
#5. Color de fondo
Podemos cambiar el fondo de nuestra fila superior a amarillo-verde. Podemos usar el selector de pseudoclase :first-child para lograr nuestros objetivos.
Agregue este código a su código CSS;
tr:first-child {
background-color: yellowgreen;
}
El código final mostrado aparecerá de la siguiente manera;
#6. Fuente de caracteres
Podemos cambiar el estilo de fuente o el tamaño de fuente de filas, columnas o celdas específicas en nuestra tabla.
Apuntaremos al contenido de la última columna de nuestra página (Empresas que usan) para cambiar el estilo de fuente.
Pondremos en cursiva todo en esta columna apuntando al selector de clase td:last-child. Puede agregar el siguiente código a su archivo CSS;
td:last-child {
font-style: italic;
}
El resultado final será el siguiente cuando vuelva a cargar la página renderizada;
También podemos cambiar el color y el tamaño de la fuente de la primera columna para que sea única.
Cuando vea su página, notará lo siguiente; el contenido de la primera columna (Idioma) tiene un tamaño de fuente más grande, es de color rojo y está más negrita.
Cómo hacer que la tabla responda
La tabla que creamos puede no ser adecuada para pantallas pequeñas. Puede usar las herramientas de desarrollo de Chrome o una herramienta externa como Este para probar si su código responde.
Hay varios enfoques que puede tomar, pero solo cubrirá uno.
CSS puede ser divertido una vez, especialmente cuando lo sabes. Estas son algunas de las mejores prácticas para asegurarse de obtener lo mejor al diseñar sus tablas.
Utilice una hoja de estilo externa: Teníamos la opción de usar el estilo en línea, pero elegimos una hoja externa. Pudimos reutilizar nuestro estilo en diferentes tablas, reduciendo el tiempo de desarrollo.
Mantenlo simple: Corre el riesgo de dejarse llevar y sobreestilizar sus mesas. Sin embargo, mantenga siempre el diseño simple y haga que sus tablas sean legibles y escaneables.
Agregue bordes a sus tablas: Un borde facilita la lectura y el escaneo de una tabla.
Usa colores consistentes: Si tiene varias tablas en sus páginas web, asegúrese de usar fuentes y colores uniformes. El uso de los colores de su marca puede mejorar la visibilidad de su marca.
Haga que sus tablas respondan: Es posible que nunca sepa el tamaño de pantalla de los dispositivos de los usuarios finales.
Use subtítulos para describir sus tablas: La leyenda describe brevemente de qué trata la pintura.
Use espacios en blanco para separar sus tablas: Si varias tablas se suceden, agregue espacios en blanco y etiquételos en consecuencia.
Conclusión
Creo que ahora puede crear y diseñar una tabla HTML básica. Es posible que no hayamos cubierto todo, ya que HTML y CSS son amplios. Puede crear tablas más pequeñas o más grandes, según la naturaleza de los datos que desee capturar.
Consulte las hojas de trucos de CSS si desea obtener más información sobre CSS y cómo usarlo para mejorar su interfaz de usuario.
