XUL has a set of elements for creating tabular grids.

XUL Tabular Layout

HTML pages typically use tables for layout or for displaying a grid of data. XUL has a set of elements for doing this type of thing. The ref_gridgrid element is used to declare a grid of data. It has some similarities to the HTML table tag.

A grid contains elements that are aligned in rows just like tables. Inside a ref_gridgrid, you declare two things, the columns that are used and the rows that are used. Just like HTML tables, you put content such as labels and buttons inside the rows. You do not put content inside the columns but you can use them to specify the size and appearance of the columns in a grid. Alternatively, you can put content inside the columns, and use the rows to specify the appearance. We'll look at the case of organizing elements by row first.

To declare a set of rows, use the ref_rowsrows tag, which should be a child element of grid. Inside that you should add ref_rowrow elements, which are used for each row. Inside the ref_rowrow element, you should place the content that you want inside that row.

Similarly, the columns are declared with the ref_columnscolumns element, which should be placed as a child element of the ref_gridgrid. Inside that go individual ref_columncolumn elements, one for each column you want in the grid.

This should be easier to understand with an example.

Two rows and two columns have been added to a grid. Each column is declared with the ref_columncolumn tag. Each column has been given a flex attribute. Each row contains two elements, both buttons. The first element in each ref_rowrow element is placed in the first column of the grid and the second element is each row is placed in the second column. Note that you do not need an element to declare a cell. (there is no equivalent of the HTML td element). Instead, you put the contents of cells directly in the ref_rowrow elements.

You can use any element besides a ref_buttonbutton element of course. If you wanted one particular cell to contain multiple elements, you can use a nested ref_boxbox. A box is a single element but you can put as many elements that you want inside it. For example:

Notice in the image how the first column of elements containg the labels has only a single element in each row. The second column contains a box in its second row, which in turn contains two elements, a ref_textboxtextbox and a ref_buttonbutton. You could add additional nested boxes or even another grid inside inside a single cell.

If you resize the window of the last example, you will see that the textboxes resize, but no other elements do. This is because of the flex attributes added to the textboxes and the second column. The first column does not need to be flexible as the labels do not need to change size.

The initial of a column is determined by the largest element in the column. Similarly, the of a row is determined by the size of the elements in a row. You can use the CSS properties min- and max- and related properties to further define the size.

You can also place the elements inside the ref_columncolumn elements instead of the rows. If you do this, the rows are just declared to specify how many rows there are.