Skip to main content

HTML Tables

  • Updated

HTML Tables

Basic HTML Table structures are one method of laying out content in Logi report pages. Tables provide a consistent arrangement of rows and columns that can contain text, data, charts, etc. This topic discusses the use of HTML tables.

About HTML Tables

An HTML table consists of a collection of rows and columns; the intersection of a row and a column is called a "cell". A single row contains one cell for each column. HTML tables in Logi applications follow the HTML standard specifications: rows must contain at least one column cell to display content within the table.

HTML tables in Logi Studio are created using one or more Rows, Row, and Column Cell elements.

At runtime, as shown above, the Rows element produces an HTML <TABLE> tag set in the report output, the Row element produces a child <TR> tag set, and the Column Cell element produces a child <TD> tag set.

HTML tables are very useful for spacing report content horizontally. Report content can be added to any Column Cell element and any number of Column Cell elements can exist in a single row.

In the example shown above, a basic table structure creates a 2 x 2 layout that aligns two charts with their titles.

Generally, all rows must have the same number of columns in them and the first, or top, row sets the number and sizes of columns for the rest of the table. See the section below about merging and spanning cells for special situations.

Tables can also be used to provide overall formatting for an entire report page. In the example shown above, the definition includes four rows: one each for header, menu, a spacer, and the main page content.

Responsive Design Elements

Responsive Design elements, including Responsive Row and Responsive Column, were introduced in v11.4.046. These row and column elements may provide an improved viewing experience; they can dynamically re-arrange their change their size and arrangement depending on the viewport size. For more information, see Responsive Design Elements.

Use Nested Tables

A nested table is a table that is completely enclosed by another table. Nested tables provide developers with a means to structure report content even further.
 

Column Cell elements can contain their own separate HTML tables. In the example shown above, the parent table has two columns with green borders and the tables nested within each column have gray borders.

Here's the element arrangement used to create the example. Nested tables allow for a further degree of layout control on your report page.

Work with Automatic Layouts

In general, HTML table layout is concerned with size, alignment, and spanning. The layout type is configured by setting the Rows element's Layout attribute to Auto (the default) or Fixed.

Automatic table layouts rely on the web browser's ability to automatically calculate the column widths required to fit its contents, while fixed layouts restrict column widths to the values the developer specifies.

There's even a hybrid mode: when using automatic layouts developers can specify the size of some columns and let the browser figure out the rest. Column widths, when specified, can be an exact number of pixels or percentages of the overall table width.
 

     

In the example above, the parent table's width is set to 30% of the total browser window's width. If the Width attribute value is too small, the browser will automatically calculate the amount of space needed to display the table's contents on a single line.

The element arrangement used to create the previous example is shown above.

In general, the three elements used with tables, Rows, Row, and Column Cell, are all "container" elements and all have a Class attribute that allows you to apply style classes to them (and to the elements they contain). This can very useful when formatting content. For example, a table column can have style applied to it that centers everything within the column, sets a default font size, or creates padding that provides a small area of white space between the edges of the column and its content.

Table alignment is controlled by style sheet classes when automatic layouts are used. Developers can use the text-align and vertical-align style attributes to align table contents. Define a class selector or ID selector class to align a specific table. Logi reporting products support CSS and developers are encouraged to use style classes to control the layout and appearance of report content when it makes sense to do so.
 

     


    TABLE {
       vertical-align: middle;
       text-align: center;
    }

    TR {
       vertical-align: middle;
       text-align: center;
    }

    TD {
       vertical-align: middle;
       text-align: center;
    }

     


When using element selector classes, developers can define a class for any of the three HTML tags that comprise a table, as shown above.

Developers can control overall table height by defining the height property in a style class.

Merge Table Cells

Merging table cells, also known as cell spanning, is a great way to control table layout even further. Cell spanning merges multiple cells together horizontally or vertically. A vertical span is called row span and a horizontal span is called column span. The Row Span and Column Span attributes are only available for the Column Cell element. Set these attributes to a numeric value that specifies the number of rows or columns to be spanned.

Setting a column or row span value in excess of the total physical columns and rows present may cause the table to stretch horizontally or vertically. Remove extra Column Cell elements to fix alignment issues when using column and row span.

Related articles