Página 1 de 1

Etiquetas BBCode para Tablas

Publicado: Dom 21 Mar, 2010 22:11
por m0ntaraz
Antes de empezar explicar las nuevas etiquetas BBCode creo que lo más conveniente es explicar de donde vienen y a qué pretenden sustituir. Si se conocen los orígenes tendremos más posibilidades de salir de ésta sin daños cerebrales graves.

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]
Por ejemplo, si queremos una tabla de 450 píxeles de ancho, 188 de altura, borde de 2 píxeles y fondo blanco el código sería

Código: Seleccionar todo

[tableh=450,2,1,1,#FFFFFF,188]celdas[/tableh]
Notad que los valores de cellpadding y cellspacing los tengo que poner sí o sí (por defecto pondremos 1 a estos modificadores).
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]
Si queremos ponerle a nuestra tabla una fila de 20 píxeles de altura y fondo rojo, por lo que pondríamos

Código: Seleccionar todo

[trh=#FF0000,20]celdas[/trh]
Si tan solo tenemos que definir el color, sería

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]
- Celda en la que podemos definir la anchura, el alineamiento, el colspan, el rowspan, el color de fondo y la altura.

Código: Seleccionar todo

Celda (altura): [tdh=ancho: px,alineamiento,colspan,rowspan,color,altura: px]contenido de la celda[/tdh]
- Celda simple, monda y lironda.

Código: Seleccionar todo

Celda: [tda]texto[/tda]
Una celda de 150 píxeles de ancho, 30 píxeles de altura, cuyo contenido está centrado y con fondo de color verde la definiríamos como

Código: Seleccionar todo

[tdh=150,center,1,1,#008000,30][/b]contenido de la celda[/tdh]
Si queremos prescindir del valor de la altura, se escribiría

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?

Re: Etiquetas BBCode para Tablas

Publicado: Lun 22 Mar, 2010 12:36
por Sarmale
Gracias.