Las tablas que conformaban nuestras filmografías estaban confeccionadas con HTML. Este lenguaje tiene una serie de etiquetas para poder definir las características que tendrán las tablas: número de filas, número de celdas, tamaño de las celdas, etc. Vamos a verlas:
- <table>{filas y celdas}</table>: estas dos etiquetas delimitan el contenido de la tabla, que se compondrá de filas y celdas.
- <tr>{celdas}</tr>: estas otras definen las filas que contendrá la tabla.
- <td>{contenido de la celda}</td>: entre estas etiquetas se ubicará la información que contiene la tabla.
Cada una de estas etiquetas tiene una serie de modificadores para definir los atributos de cada uno de los elementos. Hablamos de anchura, altura, color, etc. Los modificadores de cada una de las tres etiquetas de las que estamos hablando son numerosos, pero no los vamos a usar todos (ni de lejos).
Los modificadores que vamos a tener en cuenta, por etiqueta, son:
- <table></table>:
• width: define el ancho de la tabla, en píxeles o en tanto por ciento.
• height: define la altura de la tabla, en píxeles.
• border: define el ancho de los bordes de las celdas de la tabla, en píxeles.
• cellpadding: define el espacio en blanco que habrá entre el borde de la celda y su contenido.
• cellspacing: define el espacio existente entre celda y celda.
• bgcolor: define el color del fondo de la tabla.
Si queremos una tabla de 450 píxeles de ancho, 188 de altura, borde de 2 píxeles, fondo blanco el código sería <table width="450" height="188" border="2" bgcolor="#FFFFFF">{filas y celdas}</table>
- <tr></tr>:
• height: define la altura de la fila, en píxeles.
• bgcolor: define el color del fondo de la fila.
Ahora tenemos que ponerle una fila de 20 píxeles de altura y fondo rojo, por lo que pondríamos <tr height="20" bgcolor="red">{celdas}</tr>
- <td></td>:
• width: define el ancho de la celda, en píxeles o en tanto por ciento.
• height: define la altura de la celda, en píxeles.
• align: define la alineación horizontal del contenido de la celda.
• colspan: este atributo permite que una celda ocupe dos o más columnas.
• rowspan: este atributo permite que una celda ocupe dos o más filas.
• bgcolor: define el color del fondo de la celda.
Para definir una celda de 150 píxeles de ancho, 30 píxeles de altura, cuyo contenido está centrado y con fondo de color verde escribiríamos <td width="150" height="30" align="center" bgcolor="green">{contenido de la celda}</td>
A pesar de que en las filmografías nos hemos topado con algunos modificadores más, hemos escogido por etiqueta sólo los modificadores más básicos para definir las etiquetas BBCode que sustituirán a las etiquetas HTML. Había que simplificar e ir al caso más general posible porque al definir un modificador en una etiqueta BBCode nos obligamos a tener que indicarlo cada vez que usemos esa etiqueta. Me explico. Si en dos o tres filmografías hubiéramos encontrado un determinado modificador que hace que la celda en la que se vuelca el dato del 'Best boy' parpadee y dé cinco saltos mortales hacia atrás con tirabuzón e incluyo dicho modificador en la etiqueta BBCode correspondiente obligaría a introducir un valor estúpido en las otras quinientas filmografías. Por ejemplo, la alineación vertical (valign) no está contemplada. Demandadme.
Ya que conocemos lo que tenemos entre manos veamos las equivalencias. Adjunto el código y una explicación al mismo en sendos cuadros.
Para sustituir a <table></table> tenemos tres posibilidades:
- Tabla en la que podemos definir la anchura, el tamaño del borde, el cellpadding, el cellspacing y el color de fondo (RECOMENDADA).
Código: Seleccionar todo
Tabla configurable: [tabla=ancho: px,borde,cellpadding,cellspacing,color]celdas[/tabla]
- Tabla en la que podemos definir la anchura, el tamaño del borde, el cellpadding, el cellspacing, el color de fondo y la altura.
Código: Seleccionar todo
Tabla (altura): [tableh=ancho: px,borde,cellpadding,cellspacing,color,altura: px]celdas[/tableh]
- Tabla simple, monda y lironda.
Código: Seleccionar todo
Tabla: [tabla]celdas[/tabla]
Código: Seleccionar todo
[tableh=450,2,1,1,#FFFFFF,188]celdas[/tableh]
Si no es necesario definir la altura usaremos
Código: Seleccionar todo
[tabla=450,2,1,1,#FFFFFF]celdas[/tabla]
Para sustituir a <tr></tr> tenemos tres posibilidades:
- Fila en la que podemos configurar el color de fondo (RECOMENDADA).
Código: Seleccionar todo
Fila configurable: [tra=color]celdas[/tra]
- Fila en la que podemos configurar la altura y el color de fondo.
Código: Seleccionar todo
Fila (altura): [trh=color,altura: px]celdas[/trh]
- Fila simple, monda y lironda.
Código: Seleccionar todo
Fila: [tra]texto[/tra]
Código: Seleccionar todo
[trh=#FF0000,20]celdas[/trh]
Código: Seleccionar todo
[tra=#FF0000]celdas[/tra]
Para sustituir a <td></td> tenemos tres posibilidades:
- Celda en la que podemos definir la anchura, el alineamiento, el colspan, el rowspan y el color de fondo (RECOMENDADA).
Código: Seleccionar todo
Celda configurable: [tda=ancho: px,alineamiento,colspan,rowspan,color]contenido de la celda[/tda]
Código: Seleccionar todo
Celda (altura): [tdh=ancho: px,alineamiento,colspan,rowspan,color,altura: px]contenido de la celda[/tdh]
Código: Seleccionar todo
Celda: [tda]texto[/tda]
Código: Seleccionar todo
[tdh=150,center,1,1,#008000,30][/b]contenido de la celda[/tdh]
Código: Seleccionar todo
[tda=150,center,1,1,#008000][/b]contenido de la celda[/tda]
A tener en cuenta:
- No se pueden anidar tablas. O no hemos sabido. Si alguien lo logra, que dé un toque.
- Repito, que es importante, hay que proporcionar todos los datos que pide la etiqueta BBCode. De no ser así, no funcionarán.
- No hay espacios en blanco entre los valores que le propocionamos a las etiquetas BBCode, sólo comas. Si hay espacios en blanco, no habrá tabla.
- Se han proporcionado plantillas de tablas para que nadie se tenga que romper la cabeza. ¿Cómo que dónde? Usa el Buscador...
- A pesar de que la altura es un atributo que algunos navegadores no interpretan se han creado tres etiquetas específicas para poder incluir el atributo de la altura. El motivo fue facilitar la conversión de las filmografías existentes.
- Existe un 'Laboratorio de Pruebas' monísimo y fuertemente acolchado.
¿Dudas? ¿Aportaciones? ¿Gelocatiles? ¿Morfina tal vez?