Cómo construir correctamente una tablilla

Flerex

En estas líneas explico los errores más comunes que comete la gente a la hora de crear fichas. Muchos de estos errores se pueden aplicar a codificación genérica en HTML y CSS.

Aquellos que han hablado un mínimo de veces conmigo conocen mi postura ante las tablillas de los foros de rol. Son elementos decorativos totalmente innecesarios, puesto que ya existen por defecto contenedores en los mensajes que se pueden, en caso de que sea necesario, decorar de manera individual. Si a esto le sumamos el mal uso que se le suelen dar en cuestiones de diseño, considero mi oido hacia ellas totalmente justificado.

Sin embargo, si algo odio más que las tablillas son las tablillas mal construidas. Si hay personas que hacen burradas en cuestiones de diseño no os podéis ni imaginar la de cosas horribles que uno se puede encontrar en el código. Y de esto trata esta entrada, en hablar sobre los errores más comunes que veo a la hora de construir tablillas.

Si creas tablillas asiduamente o alguna vez has creado una te recomiendo que prestes atención a las siguiente lineas, puesto que no solo van a ayudarte en tus próximas creaciones, sino que también son consejos genéricos de HTML y CSS aplicados a Foroactivo que te puedan ser de ayuda.

Nota: Acompañado de esta guía hay una serie de ejemplos que, por motivos de claridad, están correctamente indentados. En Foroactivo, cada salto de línea es sustituido por una etiqueta br por lo que tanto el HTML como el CSS que esté dentro de una etiqueta style deberá ser comprimido para que aparezca en una línea. Existen múltiples herramientas en línea que hacen esto por ti automáticamente.

El lugar del CSS

Una tablilla es, comúnmente, una estructura HTML a la que se le da diseño mediante un CSS que la acompaña. El error más común que he encontrado a la hora de diseñar tablillas es encontrarte el CSS directamente en el HTML. Tal que así:

<div style="border: 1px solid red; padding: 10px; margin: 2em auto; font-family: 'Arial', sans-serif">
	<!-- Contenido -->
</div>

En general, nunca vas a querer utilizar un atributo style. Nunca. Hay contadas excepciones a esto, pero no creo que merezca la pena comentarlas. De manera resumida, utilizar style para aplicar CSS no solo añade complejidad innecesaria al código, sino que no permite cachear el CSS, va en contra del principio de separación de intereses y hace que tengas que repetir CSS.

¿Qué ocurre entonces con el CSS? Con lo que respecta a las tablillas, hay dos casos de uso de las mismas a tener en cuenta. Dependiendo del caso de uso, se deberá utilizar un método u otro para aplicar CSS.

Tablillas creadas por administradores para su foro

Las tablillas que crees tú como administrador (fichas de personaje, adornos decorativos para textos administrativos, tablillas de uso libro para los usuarios…) deben tener el CSS junto al CSS del foro. Obviamente, para hacer esto nos ayudaremos en el uso de clases.

<div class="ficha">
	<div class="ficha__nombre"></div>
	<!-- Resto de cosas -->
</div>

Y luego en el CSS:

/* El CSS de nuestro foro iría por aquí. */

.ficha {
	border: 1px solid red;
	padding: 10px;
	margin: 2em auto;
	font-family: 'Arial', sans-serif;
}

.ficha__nombre {
	color: #FF00FF;
}

¿Por qué utilizar este método?

  • El CSS no está en el HTML, lo que hace que el HTML sea más simple y la gente no se lie tanto con su uso.
  • Permite al CSS ser cacheado por los navegadores, lo cual es mas eficiente.
  • En caso de que en un futuro quieras cambiar el diseño de la tablilla (o corregirlo) podrás cambiarlo en un mismo sitio. Imagínate que cambias el diseño del foro y el nuevo utiliza tonos claros y el viejo oscuro. Tendrás que adaptar el diseño de las tablillas también. De esta manera evitas tener que ir mensaje por mensaje a mano haciendo cambios.

Tablillas creadas para uso en cualquier foro

Obviamente si vamos a crear una tablilla para que otras personas las utilicen en cualquier foro no podemos acceder al CSS. Por ejemplo, la tablilla de afiliaciones.

Antes de comentar cómo se debería actuar en estas situaciones, quiero recordar por qué el uso de tablillas de afiliación se debería evitar: Cada foro tiene su propio CSS. Algunas veces unos foros son claros y otras veces oscuros. Hacer una tablilla que se vaya a ver en cualquier foro, sea claro o oscuro o para las infinitas posibilidades de combinaciones de CSS que esos foros tengan y que puedan romper tu tablilla es muy difícil. ¿Qué prefieres, quedar mal porque tu tablilla se ve como el culo o simplemente hacer una pequeña lista con BBCodes para dejar tus datos?

Si estas razones no son suficientes, vamos a ver cómo actuaríamos. Claramente queremos conservar las ventajas que teníamos con el método anterior pero no podemos acceder al CSS de foros que no son nuestros. ¿Qué hacemos?

En realidad no se puede hacer mucho. Una alternativa es utilizar la etiqueta style, tal que así:

<div class="miTablilla">
	<!-- Contenido -->
</div>

<style type="text/css">
	.miTablilla {
		border: 1px solid #FF00FF;
	}
</style>

De esta forma mantenemos la ventaja de mantener el HTML limpio, pero seguimos sin poder cachear el CSS en los navegadores o hacer cambios en todos los uso de la tablilla. Para tener estas ventajas tendremos que utilizar un pequeño truco que se considera mal HTML. Me lo pensaría dos veces si voy a querer utilizar este método:

El método consiste en guardar todo el CSS de la tablilla en un archivo .css y subirlo a algún tipo de servidor. A partir de ahí podremos enlazarlo con una etiqueta link. Claramente aquí es donde está el error HTML: no podemos utilizar etiquetas link fuera de la etiqueta head. Deberás utilizar este método bajo tu propia responsabilidad.

<div class="miTablilla">
	<!-- Contenido -->
</div>
<link href="https://example.com/miTablilla.css" rel="stylesheet">

Las fuentes

Oh, sí. Sé lo que estás pensando. Hasta ahora habías estado utilizando el método de link para importar tus fuentes de Google Fonts y poder utilizarlas en tu tablilla.

<div class="miTablilla">
	<!-- Contenido -->
</div>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

En efecto, este método está muy mal. No solo por lo que comenté anteriormente de que no es HTML válido. Al fin y al cabo, los navegadores son conscientes de tu error e intentan entender lo que querías decir e importan de igual manera el CSS. Sin embargo, en el caso de las fuentes hay que tener en cuenta de que son elementos pesados, que afectan a la carga de la página. Si empiezas a añadir fuentes por doquier es posible que estés cargando fuentes que incluso ya han podido ser cargadas por el foro en cuestión para su diseño.

Obviamente esto no es un problema si el foro es tuyo, puesto que la forma de corregir el problema sería igual que con el CSS, poniéndolo directamente en código del foro, en este caso en overall_header, dentro de la etiqueta head e, idealmente, después del CSS principal del foro.

¿Qué ocurre si el foro no es tuyo? Bueno, en este caso pues no nos queda otra que dejarlo así, aunque sepamos que está mal. Si te preocupa la corrección de tu código y no te importa perder las ventajas de cachear el CSS y poder editarlo una vez para cambiar todas las tablillas, puedes utilizar la at rule de CSS @import.

<div class="miTablilla">
	<!-- Contenido -->
</div>
<style type="text/css">
	@import url('https://fonts.googleapis.com/css?family=Open+Sans');
</style>

Uso de IDs

No es para nada raro encontrarse con alguna tablilla definida de una forma similar a esta:

<div id="miTablilla">
	<!-- Contenido -->
</div>

No hace falta decir que esto está muy mal. En HTML no se puede tener más de un elemento con la misma ID en la misma página. Por ejemplo, las tablillas de uso libre por los usuarios pueden aparecer más de una vez en la misma página (e.g. un usuario responde a otro en un tema con la misma tablilla).

Esto no quiere decir que tablillas cómo por ejemplo las de las fichas de personaje se libran de este problema. ¿Por qué? Pues aunque estas tablillas solo aparezcan una vez por tema, solo hace falta que un administrador (o cualquier otro usuario) cite el mensaje que contiene la tablilla para que aparezca repetida en el [quote].

Para curar en salud y porque no hay necesidad alguna que nos obligue a utilizar IDs, como norma general, vamos a utilizar siempre clases en las tablillas, aunque sepamos con total certeza que no van a repetirse nunca dentro de la misma página (e.g. tablillas que adornan los temas de ambientación, los cuales están cerrados).

<div class="miTablilla">
	<!-- Contenido -->
</div>

Centrar la tablilla

Oh, sí, lo sé. Nunca me cansaré de decirlo. No es la primera tablilla que veo así:

<center>
	<div class="miTablilla">
		<!-- Contenido -->
	</div>
</center>

Recordemos de mi anterior entrada « Centrado Horizontal y Vertical “Like a Boss”» que la etiqueta center está obsoleta. Hay métodos más sencillos con tan solo CSS de centrar algo. Pásate por la anterior entrada para aprender a centrar.

Etiquetas mal cerradas

Otro error muy común. Encontrarte con tablillas con etiquetas mal cerradas. Muy seguramente debido a que, como en Foroactivo el HTML tiene que estar en una línea, el creador se haya echo un lio la cabeza y la liase parda.

<div class="miTablilla">
	<div class="miTablilla__titulo">
		<!-- Título -->
	<!-- aquí debería cerrarse el div del título -->
	<div class="miTablilla__contenido">
	<!-- Contenido -->
	</div>
</div>

Aunque normalmente esto normalmente implica que todo el foro se descuadre, a lo mejor no se percibe tan bien y el error continua. ¿Cómo evitar este tipo de errores? Muy sencillo, codifica las tablillas en un editor de código como Visual Studio Code y luego pasa el código por el minificador que he enlazado más arriba.

Separar utilizando saltos de línea

Como también he comentado en la nota inicial, Foroactivo automáticamente utiliza los salto de línea en el editor de mensaje para reemplazarlos por br en el resultado final del mensaje.

Esto hace que mucha gente utilice esto para separar las cosas con saltos de línea. No lo hagas, es un caos y los tamaños son siempre fijos dependiendo de la altura de una línea.

Véase, si los mensajes de un foro tienen un line-height: 20px;, esos saltos de línea medirán cada uno 20px de altura. Si luego utilizas la plantilla en otro foro, este tamaño es muy probable que no se garantice, por lo que la tablilla se verá de distinta manera en ambos foros.

Para corregir este problema es tan sencillo como separar los elementos con la propiedad margin de CSS y sus variantes margin-top y margin-bottom.

De manera similar, lo mismo se aplica a utilizar directamente <br> en la tablilla. No lo hagas, utiliza los métodos anteriores.

Negritas y cursivas

El uso de las etiquetas strong y b o em y i no es con el propósito del uso de negritas o cursivas. La etiqueta em (énfasis, del inglés emphasis) se utiliza para que la lectura de una palabra o parte de una frase se lea con énfasis, lo mismo strong, solo que con un efecto mayor a em. Casualmente, los navegadores presentan el contenido de estas etiquetas con tanto negrita como cursiva, pero eso no quiere decir que se deban utilizar para esto.

En el caso de que queramos poner alguna palabra en un texto en negrita o cursiva se deberían utilizar las etiquetas b (negrita, del inglés bold) e i (itálica, del inglés italic —para el objetivo de esta guía podemos considerar itálica y cursiva sinónimos).

Sin embargo, las etiquetas anteriores deben ser utilizadas solo para cuando el propio texto requiera que se visualicen palabras o conjuntos de palabras en negrita o cursiva. Si es el diseño el que lo requiere (como por ejemplo en el caso de las tablillas) no debemos utilizarlas. Deberemos, en su lugar, utilizar las propiedades font-weight o font-style de CSS. Es decir, en vez de:

<div class="miTablilla">
	<div class="miTablilla__titulo">
		<b><i><!-- Título --></i></b>
	</div>
	<div class="miTablilla__contenido">
	Este es una frase y esta parte de la frase <b>quiero que aparezca en negrita</b> y esta otra como es muy importante quiero que los lectores de pantalla que utilizan personas con problemas de visión la lean de manera distinta, con <em>énfasis</em>.
	</div>
</div>

Debemos hacer:

<div class="miTablilla">
	<div class="miTablilla__titulo">
		<!-- Título -->
	</div>
	<div class="miTablilla__contenido">
	Este es una <i>frase</i> y esta parte de la frase <b>quiero que aparezca en negrita</b> y esta otra como es muy importante quiero que los lectores de pantalla que <strong>utilizan</strong> personas con problemas de visión la lean de manera distinta, con <em>énfasis</em>.
	</div>
</div>

Y luego en el CSS:

.miTablilla__titulo {
	font-weight: bold;
	font-style: italic;
}

Fíjate que las etiquetas strong, em, b e i se conservan en el «después». A pesar de que su uso sea bastante forzado, se conservan porque esa parte no es parte del diseño, sino un lugar donde aparecerá texto y, por lo tanto, conserva las etiquetas.

Uso de tablas

La etiqueta table y sus hijas tr, td y th (entre otras) se deben utilizar solamente para mostrar información tabulada. Mi truco es el siguiente, si en el Microsoft Office Word utilizarías una tabla, en HTML también. Es decir, en lugares donde estés escribiendo algo (por ejemplo, como parte de un artículo como este) y quieres mostrar información tabulada.

Si solo las usas por razones de diseño, existen otro tipo de herramientas mucho más simples y lógicas. Es un caso similar al anterior, al de las etiquetas de negrita.

Para saber qué hacer te recomiendo echarle un vistazo a mis guías «Columnas “like a boss”» y «Aprendiendo a utilizar Flexbox».

Soy consciente de que otros autores han recomendado el uso de tablas para hacer tablillas. Aunque parezca lógico (al fin y al cabo tablas y tablillas comparten raíz), necesito que me creas de que es una muy mala práctica. Puedes buscar en internet razones en Internet de por qué no se deben utilizar para cuestiones de diseño (básicamente las tablillas son elementos de decoración —diseño), pero voy a dejar esta pregunta de Stack Exchange (en inglés) porque resume muy bien las razones.


Hasta aquí los errores más comunes que he encontrado a la hora de hacer tablillas. Espero que, a pesar de lo extenso que me ha salido el artículo, hayas llegado hasta el final y, lo más importante, que hayas tomado nota para evitar cometerlos.

Dependiendo de lo bien que se reciba este artículo es posible que en un futuro cree yo una guía de cómo codificaría yo una tablilla (en ese mundo paralelo en el que Flerex hace tablillas), aplicando los conocimientos aquí explicados de manera teórica, junto con un par de técnicas más que me saco yo de la manga.

por Flerex

Estudiante de Ingienería del Software con experiencia en el desarrollo web y la plataforma Foroactivo desde hace más de 8 años. Me encanta todo lo relacionado con el diseño de UI/UX.