Grids CSS
HTML tables or CSS grids?
The HTML markup for grids has changed over time. The following table summarizes the changes.
Until 2016.1
<table>
<table>
<table>
<table>
<table>
2016.2 until 2017.1
<div>
<table>
<table>
Same as runtime
Same as runtime
2017.2 to 2019.2
<div>
<table>
<table>
<div> with CSS grids
Same as runtime
2020.1 to 2021.1
<table>
<table>
<table>
<div> with CSS grids
<table>
From 2022.1 (grid-markup="html-table")
<table>
<table>
<table>
<div> with CSS grids
<table>
From 2022.1
<div> with CSS grids
<div> with CSS grids
<div> with CSS grids
<div> with CSS grids
<table>
Starting Orbeon Forms 2022.1
Introduction
Starting with Orbeon Forms 2022.1, by default, Orbeon Forms uses CSS grids for all grids, repeated or not repeated, at runtime as well as at design-time. Previously, the default was to use HTML tables at runtime except for non-repeated grids without rowspans. This is made possible with the drop of Internet Explorer support.
It is possible to change the default back to using HTML tables at runtime with the following property:
<property
as="xs:string"
name="oxf.xforms.xbl.fr.grid.markup.*.*"
value="html-table"/>Non-repeated grids without column or row spanning
Non-repeated grids with column or row spanning
Repeated grids over a single row
Repeated grids over two or more rows
HTML markup until Orbeon Forms 2021.1
Non-repeated grids without rowspans
[SINCE Orbeon Forms 2016.2]
Grids which are not repeated and do not include rowpans do not use a <table> element but use instead <div>s:
Non-repeated grids with rowspans
Grids which are not repeated and do include rowpans use a <table> element with role="presentation":
Repeated grids
Repeated grids:
include a header row
include a left or right column with icons and menus
produce repeated rows following the Orbeon Forms XForms
<xf:repeat>outputuse a
<table>element
Example:
Last updated