top of page
Search
utcotempcon1981

Tablas en XHTML: ejemplos y consejos para mejorar la presentación de tus datos



De todos los atributos disponibles para las celdas, los más utilizados son rowspan y colspan, que se emplean para construir tablas complejas como las que se ven más adelante. Entre los demás atributos, sólo se utiliza de forma habitual el atributo scope, sobre todo con las celdas de cabecera que se ven a continuación.




Tablas en XHTML




Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila más alta que las demás. Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.


Sin embargo, si se utiliza el código anterior, el navegador visualiza de forma incorrecta la tabla, ya que las tablas en HTML deben disponer de una estructura regular. En otras palabras, todas las filas de una tabla HTML deben tener el mismo número de columnas. Por lo tanto, si se quieren mostrar menos columnas en una fila, se fusionan mediante el atributo colspan, que indica el número de columnas simples que va a ocupar una determinada celda.


De forma análoga a la fusión de columnas del ejemplo anterior, la fusión de filas debe indicarse de forma especial. Como las tablas HTML tienen que ser regulares, todas las columnas deben tener el mismo número de filas. Así, si en el ejemplo anterior se utilizara el siguiente código:


Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.


Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno y pueden contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.


Hasta hace algún tiempo, las tablas también se utilizaban para definir la estructura de las páginas web y aunque hoy en día hay diseñadores que siguen utilizando este método, se trata de una técnica poco recomendable ya que se complica en exceso el código HTML. La solución correcta para definir la estructura de las páginas consiste en la utilización de hojas de estilos CSS.


De todos los atributos disponibles para las celdas, los más utilizados son rowspan y colspan, que se emplean para construir tablas complejas como las que se ven más adelante. Entre los demás atributos, sólo se utiliza de forma habitual el atributo scope, sobre todo con las celdas de cabecera que se ven a continuación.


Sin embargo, si se utiliza el código anterior, el navegador visualiza de forma incorrecta la tabla, ya que las tablas en HTML deben disponer de una estructura regular. Por lo tanto, si se quieren mostrar menos columnas en una fila, se fusionan mediante el atributo colspan, que indica el número de columnas simples que va a ocupar una determinada celda.


De forma análoga a la fusión de columnas del ejemplo anterior, la fusión de filas debe indicarse de forma especial. Como las tablas HTML tienen que ser regulares, todas las columnas deben tener el mismo número de filas. Así, si en el ejemplo anterior se utilizara el siguiente código,


Algunas tablas complejas están formadas por más elementos que filas y celdas de datos. Así, es común que las tablas más avanzadas dispongan de una sección de cabecera, una sección de pie y varias secciones de datos. Además, también es posible agrupar varias columnas de forma lógica para poder aplicar estilos similares a un determinado grupo de columnas.


Las partes que componen las tablas complejas se definen mediante las etiquetas , y . La cabecera de la tabla se define con la etiqueta , el pie de la tabla se define mediante y cada sección de datos se define con una etiqueta .


Las tablas son una interesante herramienta para el marcado deinformación tabular, otros usos y abusos (como maquetación ydiseño) se desaconsejan encarecidamente. De nuevo: mantener porseparado, el diseño del contenido.


Cuando validas la web de las tablas saca un error, dicho error es debido a que utilizas el & y ese simbolo no deberias usarlo y ademas deberias filtrarlo en los comentarios para que el validador te lo coga bien, por que queda algo feo una web de XHTML y que no pase los test de XHTML de W3C.org


Muchos desaconsejan utilizar atributos como valign y align para las celdas, sin embargo en xhtml, incluso en Strict, esos atributos están vigentes para los TD, a diferencia de otros elementos, p. ej. div alingn="center" no validaría. Pregunto:que es lo más correcto?saludos


Pues la solución que encontre ... no se por que , fue cambiar un campo de la tabla en la base de datos (En mi caso un AI ) para que me refrescara los datos en el xhtml aun no se por que, sigo buscando una solución mas practica y eficiente .


Las tablas en las presentaciones web tienen y sobre todo han tenido una gran importancia debido a que se han venido usando para presentaciones de páginas (barras y menús laterales, cabeceras de páginas, etc.), lo que suele denominarse "layout". Sin embargo con la llegada de CSS esto ha ido cambiando, pues estas presentaciones con estilos consiguen los mismos efectos y son más fáciles de mantener. Aún así el uso de las tablas es importante.


La facilidad de CSS para configurar elementos de tabla existe debido a que podemos crearlos en documentos XML sin necesidad de que sean los específicos de XHTML. Aunque no vamos a adentrarnos en esto, la lista anterior si nos sirve para buscar las propiedades de estilo que se aplican a las tablas y sus elementos incluídos, pues no hemos encontrado una especificación que aclare este extremo. De esta forma los tipos de elementos declarados con la propiedad de estilo display en CSS se corresponden con los siguientes de XHTML:


Estos son, mediante atributos, todos los bordes y zonas que pueden configurarse. Los elementos interiores como filas, celdas, etc. no permiten configuraciones para bordes individuales. Sólo con puede mostrarse o ocultarse los bordes en columnas, filas o grupos de las mismas. Como resumen podemos declarar lo siguiente que hay que tener en cuenta en relación con tablas y sus bordes:


Con los navegadores Internet Explorer 7, Firefox 2.0 y Opera 9.24 hicimos pruebas hace un par de años y ahora en el año 2010 nos volvemos a encontrar que esta forma diferente de tratar el color en las tablas por distintos navegadores no ha cambiado. Vea unas capturas de pantallas que hemos realizado con los navegadores señalados (versiones actualizadas en junio 2010):


La mejor forma es declarar en estilo interno en la cabecera del documento (o en externo) los tipos de tablas que deseamos para nuestro documento. Por ejemplo, en este documento hemos declarado con el elemento dos clases de tablas: "abierta" y "cerrada" para albergar tablas de uno u otro modelo que contemplen o no la separación entre bordes internos de la tabla. En la clase abierta también definimos una clase "d" para celdas que necesitemos con borde doble.


Hemos capturado la imagen de las pantallas de las tablas de este ejemplo agrupándolas por cada uno de los cuatro navegadores consultados, los cuales tiene versiones actualizadas en Junio 2010. Se observa que todos se comportan igual ahora usando estilos (comparar con la nota del tema anterior). Bueno, hay pequeñas diferencias en la presentación del borde cincelado, pero es una cuestión menor.


Tal como se expuso en reformateo dinámico de una tabla, cuando no se indican anchos de elementos, el navegador debe recibir todo el contenido de la tabla para calcular los anchos necesarios. Con tablas muy largas esto puede evitarse con una presentación incremental, pues se va presentando la tabla a medida que se van recibiendo datos. Sin embargo para ello es necesario dar información acerca del número y anchura de columnas antes de empezar a recibir los datos contenidos en las filas. Si las anchuras de columnas recibidas resultaran estrechas para mostrar el contenido, el navegador puede optar por modificar el ancho de la columna.


En XHTML Transicional se indican algunos atributos desaprobados en la versión estricta y que tampoco exponemos aquí, pues pueden usarse estilos tal como se comenta a continuación. De todas formas vea los estilos aplicables a tablas y sus elementos en estilo CSS y tablas XHTML. 2ff7e9595c


0 views0 comments

Recent Posts

See All

Tap.az clash of clans

Tap.az Clash of Clans: como jogar, dicas e truques Você está procurando uma maneira divertida e emocionante de passar seu tempo livre?...

Comments


bottom of page