Cómo dar estilo a una tabla con CSS para lograr el máximo impacto y hacerse notar

How to Style Table with CSS for Maximum Impact and Get Noticed

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 utilizar para facilitar a los usuarios el escaneo, la comparación y el análisis de 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 todo el artículo. Puede utilizar CSS para dar estilo y cambiar el aspecto de sus tablas.

Estas son algunas de las razones por las que puede necesitar dar estilo a una tabla en su aplicación;

Mejorar el aspecto visual: Las tablas normales pueden resultar aburridas y simples. Estilizar dichas tablas mejorará su aspecto y las hará atractivas para los usuarios.
Mejorar la accesibilidad: Estilizar las tablas puede hacerlas accesibles incluso para las personas con discapacidades.
Mejorar la legibilidad: Puede utilizar diferentes técnicas de estilización para facilitar a los usuarios la lectura de los datos presentados en sus tablas.
Branding: Puede reforzar la identidad de su marca si aplica fuentes y colores coherentes a sus tablas en toda su aplicación.
Bueno para los motores de búsqueda: Organizar sus datos en formatos tabulares le resultará útil si desea que su sitio web ocupe un lugar destacado en los motores de búsqueda.

Crear una tabla básica con HTML

Para demostrar cómo funciona una tabla en HTML, crearemos una carpeta de proyecto, navegaremos dentro de 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 seguirnos, utilice estos comandos para empezar;

mkdir Styling-HTML-Tables

cd Styling-HTML-Tables

touch Styling-HTML-Tables

Ya tiene la carpeta del proyecto básico que le ayudará a crear tablas HTML. Quiero presentarle 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 estar encerrados en la etiqueta <table>...</table>.

En su archivo HTML, genere la estructura básica de un documento HTML. Añada este código dentro de la etiqueta <body>.

<table>

 <tr>

 <th>Idioma</th>

 <th>Usos comunes</th>

 <th>Empresas que utilizan</th>

 </tr>

 <tr>

 <td>Java</td>

 <td>Aplicaciones web, aplicaciones Android, aplicaciones empresariales</td>

 <td>Google, Amazon, LinkedIn</td>

 </tr>

 <tr>

 <td>Python</td>

 <td>Data science, web dev, automation</td>

 <td>Google, Dropbox,Spotify</td>

 </tr>

 <tr>

 <td>JavaScript</td>

 <td>Desarrollo web, front-end dev, scripting de navegador</td>

 <td>PayPal, Facebook, Netflix</td>

 </tr>

 <tr>

 <td>C </td>

 <td>Desarrollo de juegos, programación de sistemas, sistemas embebidos</td>

 <td>Tesla, Microsoft, Adobe</td>

 </tr>

 <tr>

 <td>Swift</td>

 <td>Desarrollo de iOS, desarrollo de macOS</td>

 <td>Apple</td>

 </tr>

 <tr>

 <td>PHP</td>

 <td>Desarrollo web, secuencias de comandos del lado del servidor, CMS</td>

 <td>WordPress, Wikipedia, Yahoo</td>

 </tr>

 </table&gt

Si observa detenidamente esta tabla, notará algunas etiquetas más encerradas dentro de la etiqueta <table>; <tr>, <th> y <td>.

Estas etiquetas hacen lo siguiente;

<tr>, fila de la tabla, se encierra dentro del elemento <table>. La etiqueta <tr> puede encerrar uno o más elementos <th> y <td>.
<th>, encabezado de tabla, está contenido dentro de la etiqueta <tr>. Por defecto, su contenido aparece en negrita.
<td>, datos de la tabla, describe el contenido de los datos en las celdas de la tabla.

Al renderizar el código que hemos escrito anteriormente, tendremos esto en nuestro navegador;

Propiedades CSS utilizadas para dar estilo a las tablas

La tabla que hemos creado anteriormente es totalmente funcional. Sin embargo, deja mucho que desear ya que no tiene un buen estilo. Para conseguir los estilos deseados y hacer que la tabla sea visualmente atractiva, utilizaremos CSS.

¿Recuerda el archivo CSS que hemos creado? Ahora es el momento de utilizarlo. Sin embargo, primero debe importar su archivo CSS a su archivo HTML para que el estilo funcione. Hemos llamado a nuestro archivo CSS styles.css. En la sección <head> de su documento HTML, añada lo siguiente;

<link rel="stylesheet" href="styles.css">

Ya estamos listos para aplicar estilo a nuestra tabla. Podemos darle el siguiente estilo;

#1. Borde

Podemos añadir un borde alrededor de las celdas de nuestra tabla. Para ello, definiremos una propiedad border en los elementos <th> y <td>. Podemos establecer el borde en 2px.

th, td {

 borde: 2px solid orange;

 }

Hemos establecido el valor del borde como 2 y añadido el naranja como nuestro color.

Cuando renderice la nueva página, verá lo siguiente;

#2. Border-collapse

Si examina la captura de pantalla anterior, observará 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, añada este código a su archivo CSS;

table {

 border-collapse: collapse;

}

Cuando renderice su página, podrá ver que las celdas comparten bordes de la siguiente manera;

Si desea que las celdas tengan bordes diferentes, añada esto a su archivo CSS;

table {

 border-collapse: separate;

}

La página renderizada aparecerá de la siguiente manera;

#3. Espacio entre bordes

Utilizando la propiedad border-space, podemos crear un pequeño espacio entre las celdas de nuestra tabla. Establecemos la regla dentro de la clase table en nuestro archivo CSS.

Para que esta propiedad funcione, necesitamos utilizar la propiedad border-collapse: separate;.

Podemos tener nuestra clase table como sigue

table {

 border-collapse: separate;

 border-spacing: 3px;

 }

Los bordes de las celdas tienen un espacio de 3px.

Cuando renderice la tabla, aparecerá de la siguiente manera;

#4. Disposición de la tabla

La propiedad Table-layout determina la naturaleza de la tabla. Puede tener tablas que tengan siempre la misma longitud. Por otro lado, también puede crear tablas que cambien en función del contenido.

Si queremos tener celdas que tengan tamaños similares, podemos establecer la propiedad table-layout como fixed.

table-layout: fixed;

Nuestro código final en la clase table será;

table {

 border-collapse: collapse;

 border-spacing: 3px;

 table-layout: fixed;

 }

Si queremos celdas que cambien en función del contenido, podemos cambiar la propiedad table-layout a auto.

table-layout: auto;

La clase final de la tabla en nuestro código CSS será;

Compruebe la última celda de la tabla y observe que he añadido estas palabras; MailChimp y mucho más.

Ahora puede ver que las celdas de la última fila son más grandes que el resto, ya que la disposición de la tabla es flexible en función del contenido.

El estilo que hemos cubierto hasta ahora se centraba en toda la tabla. Ahora podemos centrarnos en clases individuales cambiando las propiedades de color de fondo, fuente y alineación del texto para filas, celdas o encabezados.

Podemos aplicar estilo a estas propiedades de la siguiente manera;

#5. Color de fondo

Podemos cambiar el fondo de nuestra fila superior a amarillo-verde. Podemos utilizar el selector de pseudo-clase :first-child para lograr nuestros objetivos.

Añada este código a su código CSS;

tr:first-child {

 color de fondo: amarillo-verde;

 }

El código final mostrado será el siguiente

#6. Fuente

Podemos cambiar el estilo de fuente o el tamaño de fuente de filas, columnas o celdas específicas de nuestra tabla.

Nos centraremos en el contenido de la última columna de nuestra página (Empresas mediante) para cambiar el estilo de fuente.

Pondremos en cursiva todo el contenido de esta columna apuntando al selector de clase td:last-child. Puede añadir el siguiente código a su archivo CSS;

td:last-child {

 font-style: italic;

}

El resultado final será el siguiente cuando recargue la página renderizada;

También podemos cambiar el color y el tamaño de la fuente de la primera columna para hacerla única.

Añada el siguiente código a su archivo CSS;

tr td:first-child {

 color: rojo;

 font-size: x-large;

 font-weight: bolder;

 }

Cuando renderice su página, observará lo siguiente; el contenido de la primera columna (Idioma) tiene un tamaño de fuente mayor, es de color rojo y está más negrita.

Cómo hacer que la tabla sea responsiva

Es posible que la tabla que hemos creado no sea responsiva para pantallas pequeñas. Puede utilizar las Herramientas para desarrolladores de Chrome o una herramienta externa como ésta para comprobar si su código es responsivo.

Hay varios enfoques que usted puede tomar, pero vamos a cubrir sólo uno.

Siga estos pasos;

Establezca la anchura del elemento <table> en su código;

table {

 width: 100%;

 border-collapse: collapse;

 table-layout: fixed;

}

Establezca el salto de palabra en td y th para que las palabras sean largas en la celda.

th, td {

 borde: 2px solid orange;

 word-break: break-word;

 }

Mejores prácticas para dar estilo a las tablas

CSS puede ser divertido una vez, sobre todo cuando se conoce. Éstas son algunas de las mejores prácticas para asegurarse de obtener lo mejor al estilizar sus tablas;

Utilice una hoja de estilo externa: Teníamos la opción de utilizar el estilo en línea, pero optamos por una hoja externa. Hemos podido reutilizar nuestro estilo en diferentes tablas, reduciendo así el tiempo de desarrollo.
Mantenga la sencillez: Puede dejarse llevar y aplicar un estilo excesivo a sus tablas. Sin embargo, mantenga siempre un diseño sencillo y haga que sus tablas sean escaneables y legibles.
Añada bordes a sus tablas: Un borde hace que una tabla sea fácil de leer y escanear.
Utilice colores coherentes: Si tiene varias tablas en sus páginas web, asegúrese de utilizar colores y fuentes coherentes. Utilizar los colores de su marca puede mejorar la visibilidad de la misma.
Haga que sus tablas sean responsivas : Es posible que nunca conozca el tamaño de la pantalla de los dispositivos de los usuarios finales.
Utilice pies de foto para describir sus tablas: El pie de foto describe brevemente de qué trata la tabla.
Utilice espacios en blanco para separar sus tablas: Si se suceden varias tablas, añada un poco de espacio en blanco y póngales el título correspondiente.

Conclusión

Creo que ahora ya puede crear y aplicar estilo a una tabla HTML básica. Puede que no lo hayamos cubierto todo, ya que HTML y CSS son muy amplios. Puede crear tablas más pequeñas o más grandes, dependiendo de la naturaleza de los datos que desee capturar.

Eche un vistazo a las hojas de trucos CSS si quiere aprender más sobre CSS y cómo utilizarlo para mejorar su interfaz de usuario.

Tito Kamunya

Autor