`<tabular>`

A simple tabular layout of cells

<tabular> is a Sectional component that contains the data and style specifications for a <table>. Nested inside a <tabular> component are the <row> and <cell> components.

Attributes and Properties

Attributes for `<tabular>`

Other (8)

bottom

keyword. Border style for the bottom edge of the layout.

Value	Description
`none` (default)	Do not render a border.
`minor`	Render a thin border line.
`medium`	Render a medium-weight border line.
`major`	Render a thick border line.

halign

keyword. Default horizontal alignment for cells.

Value	Description
`left` (default)	Left-align cell content.
`center`	Center cell content horizontally.
`right`	Right-align cell content.
`justify`	Justify cell content across the full cell width.

height

componentSize. Display height of the tabular layout.

left

keyword. Border style for the left edge of the layout.

Value	Description
`none` (default)	Do not render a border.
`minor`	Render a thin border line.
`medium`	Render a medium-weight border line.
`major`	Render a thick border line.

right

keyword. Border style for the right edge of the layout.

Value	Description
`none` (default)	Do not render a border.
`minor`	Render a thin border line.
`medium`	Render a medium-weight border line.
`major`	Render a thick border line.

top

keyword. Border style for the top edge of the layout.

Value	Description
`none` (default)	Do not render a border.
`minor`	Render a thin border line.
`medium`	Render a medium-weight border line.
`major`	Render a thick border line.

valign

keyword. Default vertical alignment for cells.

Value	Description
`top`	Align cell content to the top.
`middle` (default)	Center cell content vertically.
`bottom`	Align cell content to the bottom.

width

componentSize. Default value: {"size":100,"isAbsolute":false}. Display width of the tabular layout.

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<tabular name="t">`

Other (12)

$t.bottom

text. Border style for the bottom edge of the layout.

$t.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$t.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$t.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$t.halign

text. Default horizontal alignment for cells.

$t.height

componentSize. Display height of the tabular layout.

$t.hidden

boolean. Whether this component is hidden from the rendered output.

$t.left

text. Border style for the left edge of the layout.

$t.right

text. Border style for the right edge of the layout.

$t.top

text. Border style for the top edge of the layout.

$t.valign

text. Default vertical alignment for cells.

$t.width

componentSize. Display width of the tabular layout.

Common to all components (4)

$t.doenetML

text. The DoenetML source code that produced this component.

$t.hide

boolean. Whether to hide this component from the rendered output.

$t.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$t.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: Default `<tabular>` without attributes

A <tabular> can be used alone, without attributes, simply to organize content in a regular structure.

Example: Specifying borders and dividing lines

Borders and dividing lines within a <table> can be specified within the <tabular> component using the attributes: top, bottom, left, and right. If subsequent <row> or <cell> components also have the same attribute specified, the attribute corresponding to the lowest hierarchical level takes precedence. All border/dividing line attributes accept either major, medium, minor, or none (default).

Example: Specifying vertical alignment with `<tabular>`

The height and vAlign attributes within a <tabular> can control the height and vertical alignment of individual rows for the entire table.

Example: Specifying horizontal alignment with `<tabular>`

The width and hAlign attributes within a <tabular> can control the width and horizontal alignment of individual rows for the entire table.

Attribute Examples

Attribute Example: width/height

The width and height attributes for the <tabular> component accept measurements for the extents of the <tabular>. Width is specified as a percentage of screen width, and height is specified in absolute measurements. Individual rows and cells are then scaled in proportion to these extents.

Attribute Example: hAlign

The hAlign attribute within a <tabular> controls the horizontal alignment of individual rows for the entire table. Valid values are left (default), center, right, and justify.

Attribute Example: vAlign

The vAlign attribute within a <tabular> controls the vertical alignment of individual rows for the entire table. Valid values are top, middle (default) and bottom.

Attribute Example: top/bottom/left/right

Property Examples

Property Example: Attributes as properties

The above-listed attributes of the <tabular> component are also accessible as properties.

table tag

<tabular>