XHTML table support

This add-on adds support for XHTML tables to a Fonto editor.

This add-on exposes one function called configureAsXhtmlTableElements. This function configures all XHTML table elements. This eliminates the need for configuring any of the XHTML table elements separately.

The configureAsXhtmlTableElements function should be used in a configureSxModule file, like this:

configureAsXhtmlTableElements(sxModule, {
	// Priority of the selectors used to select the table elements (optional)
	priority: 2,

	// True if a th element should be used for defining a header. When this option and the useThead
	// options aren't set, th elements will be used by default.
	useTh: true,

	// True if a thead element should be used for defining a header. When only this option is set,
	// only thead elements will be used for defining a header.
	useThead: true,

	// True if a tbody element should be used.
	useTbody: true,

	// False if the borders attribute should not be used
	useBorders: true,

	// True if the table should include <col> elements by default
	shouldCreateColumnSpecificationNodes: false,

	// The namespace uri for the table element and its descendant elements (optional)
	table: {
		namespaceURI: ''

	// The default text container for the td element (optional)
	td: {
		defaultTextContainer: 'p'

	// The default text container for the th element (optional)
	th: {
		defaultTextContainer: 'p'

	// Widget area before columns. Any widget can be used, but only the {@link iconWidget} is supported here. Optional, defaults to an empty array.
	columnBefore: [
		createIconWidget('clock-o', {
			clickOperation: 'lcTime-value-edit',
			tooltipContent: 'Click here to edit the duration'

	// Widget are before rows. Any widget can be used, but only the {@link iconWidget} is supported here. Optional, defaults to an empty array.
	rowBefore: [
		createIconWidget('dot-circle-o', {
			clickOperation: 'do-nothing'

	// This will show buttons that insert a new column or row. Optional, defaults to false.
	showInsertionWidget: true,

	// This will show areas that can be hovered over to hightlight a column or row and that can be clicked to show a operations popover. Optional, defaults to false.
	showHighlightingWidget: true

To configure the markup labels and contextual operations, use the configureProperties function.

The cell element menu button widgets are added based on the existence of contextual operations on cell level. Make sure that only cell-specific operations are added to the cell widget, so that users are only given options relevant to them. Example on how you can add this element menu on the widget:

configureProperties(sxModule, 'self::td', {
	contextualOperations: [
		{ name: 'contextual-set-total-cell', hideIn: ['context-menu'] }


Fonto supports a subset of the XHTML 1.0 2nd edition table specification. The following parts are supported.

Element Attributes
table border
th rowspan, colspan, align, valign
td rowspan, colspan, align, valign

* Note that this add-on supports tables that contain col, colgroup, and tfoot elements. However, these elements are ignored by this add-on and these elements will not be inserted into new tables.

APIs in fontoxml-table-flow-xhtml

Was this page helpful?