Tablas En XHTML

3 views
Skip to first unread message

Janae Nowinski

unread,
Dec 23, 2023, 8:02:10 AM12/23/23
to PartKeepr Users

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.

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 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.

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.

Each of the attributes defined in an XHTML attribute collection is available for use when their corresponding module is included in an XHTML Host Language or an XHTML Integration Set. In such asituation, the attributes are available for use in the definition of elements that are NOT in the XHTML namespace when they are referenced using their namespace-qualified identifier (e.g., xhtml:class). The semantics of the attributes remain the same regardless of whether they are referenced using their qualified identifier or not. It is an error to use an XHTMLnamespace-qualified attribute on elements from the XHTML Namespace.

The second concrete syntax is XML. When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is treated as an XML document by web browsers, to be parsed by an XML processor. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent a document labeled as XML from being rendered fully, whereas they would be ignored in the HTML syntax.

Administrar un sitio maquetado con tablas es una pesadilla. Unvez construidas es muy difícil y laborioso modificar suaspecto visual. Hacer pequeños cambios implica laedición de muchas líneas de código. LasCSS permitenhacer todo más fácil y rápido. Recomendamosusarlas desde el principio y acostubrarse a ellas, sinimportar lo que puedan hacer otros. Pensamos que el uso combinado de un documentoHTML bien estructurado que haga uso de las hojas de estilo, son la combinación perfectapara conseguir una excelente página web.

Las tablas son entidades complejas que vale la pena conocerbien. Aquí veremos sus aspectos más comunes yutilizados. Serán suficientes para la mayoría denuestras necesidades. Los elementos que debemos conocer son:

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

XHTML Basic es un subconjunto de XHTML 1.1, definido usando modularización XHTML, e incluyendo un conjunto reducido de módulos para la estructura, imágenes, formularios, tablas básicas, y soporte de objetos. XHTML Basic está diseñado para teléfonos móviles, PDAs, lectores, y TVs interactivas. También reemplazó a WML y C-HTML.

Las tablas se emplean para tabular datos, es decir organizarlos en filas y columnas. Son un recurso muy utilizado, aunque a veces se les da un mal uso. Hace muchos años atrás, cuando todavía no había soporte por parte de los navegadores a las hojas de estilos CSS, los programadores recurrían a las tablas para maquetar o estructurar todo el contenido en una página web, gracias a que permitían ocultar sus bordes.

The org.xhtmlrenderer.extend.NamespaceHandler interface provides the renderer with knowledge about a document that is specific to that document type. The renderer just knows that its input is XML; it doesn't know how that particular XML format might include CSS styles, for example (XML and XHTML have different mechanisms for that).

The org.xhtmlrenderer.extend.UserAgentCallback interface allows some control over the "user agent", a concept introduced by the W3C to abstract the notion of the "agent" responsible for rendering content to a user; you can think of the "user agent" in Flying Saucer as the UI component rendering a document.

You can provide a new UserAgentCallback instance in a constructor for the BasicPanel. Note that for PDF output, if you are going to use your own UAC, you should take a look at org.xhtmlrenderer.pdf.ITextUserAgent in the source codebase; this class has some special handling for images to ready them for PDF output.

The org.xhtmlrenderer.extend.ReplacedElementFactory provides XML-element replacement during the layout and render cycle. Only block-level (or equivalent) elements are replaced; see the CSS 2.1 Specification, chapter 9, for example 9.2, for details. The most obvious use for replaced elements is for elements that point to content which is not itself part of the document, like images; with just an element, the library has no way to actually render an image (or an icon, or whatever). To do this, it uses a ReplacedElementFactory, which resolves the to, for example, a Swing ImageIcon, and returns this (wrapped in an interface) as a pre-sized component that the library can render in-place. In our SVG demo, this same technique is used to render specific elements referencing SVG data files as images in the document. It is also used to render XHTML form elements as Swing components when using the XHTMLPanel.

Flying Saucer is meant to be easy to get started with. Make sure you set your classpath before continuing. To make life easier for our end-users, we have created a special Java package, org.xhtmlrenderer.simple, which contains classes you can use to get up and running without any hassle.

Once we've matched CSS, we run through a layout phase, where we calculate the size and position, as well as display attributes, of all visible elements. The layout tree is then used to render to some output sink calculations . The standard output sink is a Swing JPanel subclass we call org.xhtmlrenderer.swing.BasicPanel, or its extended (and more powerful) child, XHTMLPanel.

In fact, to make it really easy, both org.xhtmlrenderer.swing.BasicPanel, and its child org.xhtmlrenderer.simple.XHTMLPanel, allow you to set the document in one call. In fact, to display a page in a Swing JFrame, the code is very simple. Take a look at out our JPanelRender example in the demos/samples directory. The important stuff happens in the run() method.

If you don't provide a DOM Document instance yourself, parsing of XML documents is delegated to a class called org.xhtmlrenderer.XMLResource. You will probably never use this class yourself. However, you should realize that the XML parser which XMLResource uses to load a document defaults to the XML parser shipping with your version of the JDK; this parser implementation has varied over time, and some versions may have bugs. You can specify another parser to use instead of the JDK default by using our configuration system. Parsers must be instances of org.xml.sax.XMLReader. Alternately, you can write your own UserAgentCallback (described above) to direct how XML is loaded by implementing the getXMLResource() method.

XHTMLPanel supports callbacks for hyperlinks using a org.xhtmlrenderer.swing.LinkListener which extends org.xhtmlrenderer.swing.FSMouseListener. A LinkListener monitors mouse events and calls back throught the panel ( BasicPanel ) to locate any boxes at that location. Different mouse events are then used to change cursor or process a click event if the box is a link. When a link is clicked, the panel's setDocumentRelative(String uri) is called to have the panel load the document (relative to the current base URL, if necessary).

Like support for hyperlinks, XHTMLPanel also supports reacting as the mouse hovers over elements. The CSS :hover pseudo-selector assigns properties to an element where the mouse is currently hovering. The org.xhtmlrenderer.swing.HoverListener class, like the LinkListener class, is an FSMouseListener that tracks mouse movements, and, when entering or leaving a box, calls back to the render routines to update the box's style on screen.

0aad45d008
Reply all
Reply to author
Forward
0 new messages