JMiur [E]

Las tablas están compuesta por filas y columnas, la intersección de una fila y una columna determinan una celda, un lugar donde pude colocarse un dato. En HTML, una fila se crea mediante el tag TR y una celda mediante el tag TD ¿Y las columnas?

Generalmente, decimos que un código como este, creará dos filas con tres columnas:
<tr>
<td> 11 </td> <td> 12 </td> <td> 13 </td>
</tr>
<tr>
<td> 21 </td> <td> 22 </td> <td> 23 </td>
</tr>
es cierto, y podemos controlar las propiedades de cada fila en forma individual mediante CSS pero, no podemos controlar las columnas ya que TD sólo es una celda. Para controlar las columnas como grupo, necesitamos utilizar el tag COL:
<col atributos /> <col atributos /> <col atributos />
<tr>
<td> 11 </td> <td> 12 </td> <td> 13 </td>
</tr>
<tr>
<td> 21 </td> <td> 22 </td> <td> 23 </td>
</tr>

11121314
21222324
31CELDA3334
41424344
51525354
61626364

De esta manera, con <COL style="... propiedades..." /> establecemos las propiedades de toda la columna y con <TR style="... propiedades..." />; las de toda la fila.

Es probable que también hayan visto que, al crear una tabla, la mayoría de los editores agrega el tag <TBODY>; inmediatamente después de <TABLE> y un tag de cierre </TBODY> antes de </TABLE>. Parece algo caprichoso, una obligación sintáctica sin uso práctico. Cuando la tabla es simple, esto es bastante cierto pero el tag TBODY no permite agrupar filas y establecer sus propiedades una sola vez. De forma similar, el tag COLGROUP nos permite agrupar columnas:


11121314
21222324
31CELDACELDA34
41CELDACELDA44
51525354
61626364
71727374

Este sería el esquema básico del código:
<table ... >
<col ... />
<colgroup ... >
<col ... /> <col ... /> <col ... />
</colgroup>
<tr>
<td>... 11 ...</td> <td>... 12 ...</td> <td>... 13 ...</td> <td>... 14 ...</td>
</tr>
<tbody ... >
<tr>
<td>... 21 ...</td> <td>... 22 ...</td> <td>... 23 ...</td> <td>... 24 ...</td>
</tr>
<tr>
<td>... 31 ...</td> <td>... 32 ...</td> <td>... 33 ...</td> <td>... 34 ...</td>
</tr>
</tbody>
<tr>
<td>... 41 ...</td> <td>... 42 ...</td> <td>... 43 ...</td> <td>... 44 ...</td>
</tr>
</table>
Las celdas de una tabla pueden ser tratadas en forma individual, como un grupo incluido en una fila o como un grupo contenido en una columna pero, además, hay dos atributos que nos permiten combinar celdas adyacentes, estos son:
<td rowspan = cantidad de filas>
<td colspan = cantidad de columnas>
11121314 + 24 + 34
21 + 2223
313233
41424344
51 + 52
61 + 62
71 + 72
5354
6364
73 + 74

<td colsapan = 2>... 21 + 22 ...</td> <td>... 23 ...</td>
nos salteamos la celda 22

<tr>
<td rowspan = 2>... 31 + 41 ...</td> <td>... 32 ...</td> <td>... 33 ...</td>
</tr>
<tr>
<td>... 42 ...</td> <td>... 43 ...</td>
</tr>
nos salteamos la celda 41

8 comentarios:

Nicar  

Hola JMiur.
Si no lo veo, no lo creo. Una entrada sin comentarios.Je,je. Bueno, ahora ya hay uno.
Tengo un problema con una entrada que hice con unas tablas.
Lo que me resulta extraño es que la misma entrada, en un blog de pruebas no tiene ningún problema. Es más, en el blog principal antes de publicarla hice vista previa y también todo correcta.
El problema es que los datos de las tablas no aparecen.
Si puedes me miras el blog (deje la entrada por el momento)y lo ves. También puedes ver la entrada correcta en el otro blog. http://barparaprobar.blogspot.com/
Gracias por todo y perdón por explicarlo tan mal.

Responder
JMiur  

NKR:
Los datos están allí y se muestran pero ... son de color blanco y como las celdas tienen ese color de fondo, no se ven.
Agrégale al style de la tabla color:#000; o el color que quieras y se mostrarán perfectametne.

Responder
Nicar  

Hola JMiur.
El que no sabe es como el que no ve. Y eso, que parece tan fácil, no lo vi.
Muchisimas gracias por la ayuda.

Responder
JMiur  

Es uno de esos errores que nos ocurren a todos :D

Responder
Unknown  

|o No me interesan las tablas y como se llama la web....
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡MALDITAAAAS TABLAAAAAAAAAASSSS!!!!!!!! LAS ODIO TANTO COMO LAS ALMEJAS CON ARENA Y PIEDRAS!!!!!.

Responder
JMiur  

Pues ... no son otra cosa más que herramientas así que amarlas u odiarlas es una tontera sin sentido. Mejor dejar esos sentimientos para cosas un poco más interesantes :)

Responder
SATNET  

Hola JMiur un gusto de escribir mi primer comentario aquí por más que hace mucho tiempo vengo siguiendo todos tus articulos que son por demás ilustrativos y prácticos. Esta vez dije, es hora de decir algo.

Mira, use como base tus explicaciones y ejemplos. Un dia por esas casualidades se me ocurrio transportar mi insipida tabla de 3x4 :) a Dreamweaver y me di cuenta que la leyó perfectamente. Claro tuve que sacar todas las sentencias iniciales deje solo la tabla, me di cuenta que podia manipularla sin problemas. Al transportarla al blog, sin problemas, funcionó de maravillas. Eso si no hay que tocar ni retocar mucho porque ahi el Dreamweaver comienza a poner parte de su codificación que no es compatible con Blogger.

Me gustaría escuchar tu opinión experta y si lo has intentado que sugerencias tienes al respecto. Aprovecho para enviarte un deseo de FELIZ NAVIDAD !! mucho progreso y mucha paz para ti. Un coridal saludo.

Julio

Responder
JMiur  

En realidad, no uso Deamweaver ni ningún otro soft pero, si el HTML es "puro" no hay ningún problema en usarlos para manipular cosas; Blogger acepta cualquier tipo de código HTML válido por lo tanto, puedes usar el programa para definir cosas o probarlas; difícilmente tengas un inconveniente.

Feliz Navidad, SATNET, un gusto leerte :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR