MathML tables
Once all basic math notations are known, it remains to consider tabular layout which can be used for matrix-like expressions and other advanced math layout.
| Prerequisites: | Basic software installed , basic knowledge of working with files , and HTML basics (study Introduction to HTML . and HTML tables ) |
|---|---|
| Objective: | To get familiar with MathML tabular elements and be aware of some use cases. |
MathML tabular elements
The MathML tabular elements are similar to the ones for HTML tables
: the <mtable >
element represents a mathematical table, it has <mtr >
elements as its children (representing rows), each of them having <mtd >
elements as its children (representing cells). An <mtable >
element can be inserted anywhere in a MathML formula. The <mtd >
element can contain any number of MathML children and will lay them out as an <mrow >
container.
Tables are typically used for matrix-like expressions (including vectors). Here is a basic example taken from the
article about the CSS matrix()
function
:
<
math
display
=
"
block"
>
<
mrow
>
<
mo
>
(
</
mo
>
<
mtable
>
<
mtr
>
<
mtd
>
<
mi
>
a
</
mi
>
</
mtd
>
<
mtd
>
<
mi
>
c
</
mi
>
</
mtd
>
<
mtd
>
<
mn
>
0
</
mn
>
</
mtd
>
<
mtd
>
<
msub
>
<
mi
>
t
</
mi
>
<
mi
>
x
</
mi
>
</
msub
>
</
mtd
>
</
mtr
>
<
mtr
>
<
mtd
>
<
mi
>
b
</
mi
>
</
mtd
>
<
mtd
>
<
mi
>
d
</
mi
>
</
mtd
>
<
mtd
>
<
mn
>
0
</
mn
>
</
mtd
>
<
mtd
>
<
msub
>
<
mi
>
t
</
mi
>
<
mi
>
y
</
mi
>
</
msub
>
</
mtd
>
</
mtr
>
<
mtr
>
<
mtd
>
<
mn
>
0
</
mn
>
</
mtd
>
<
mtd
>
<
mn
>
0
</
mn
>
</
mtd
>
<
mtd
>
<
mn
>
1
</
mn
>
</
mtd
>
<
mtd
>
<
mn
>
0
</
mn
>
</
mtd
>
</
mtr
>
<
mtr
>
<
mtd
>
<
mn
>
0
</
mn
>
</
mtd
>
<
mtd
>
<
mn
>
0
</
mn
>
</
mtd
>
<
mtd
>
<
mn
>
0
</
mn
>
</
mtd
>
<
mtd
>
<
mn
>
1
</
mn
>
</
mtd
>
</
mtr
>
</
mtable
>
<
mo
>
)
</
mo
>
</
mrow
>
</
math
>
Allowing cells to span multiple rows and columns
This is again similar to HTML tables
. The <mtd >
element accepts the columnspan
and rowspan
attributes to indicate that the cell spans multiples rows and columns. Below the inner matrix spans two columns of the outer matrix:
Note:
For historical reason, the MathML attribute for column spanning is called columnspan
not colspan
.
Usage for advanced layout
Besides representing matrix-like objects, MathML tables are sometimes used for advanced layout inside mathematical formulas, for example in Wikipedia's definition of Legendre symbol . Here, the different cases are written on three different rows while the values and conditions are placed on two different columns.
Warning:
The
<mtable >
article
provides more advanced layout options via special attributes such as alignment or spacing. These originated before CSS equivalents and were originally designed and intended for renderers which were not-CSS aware. However, these attributes may not be implemented in all browsers. In the future, it is likely that usages of <mtable >
for layout-only purpose (i.e. not actual matrix-like objects) can be replaced with CSS-based alternatives.
Summary
In this article, we've reviewed the <mtable >
, <mtr >
and <mtd >
elements which are the equivalent of HTML elements for tables. We have seen how to use them for representing matrix-like objects and how it is sometimes used for advanced layout.
You've nearly finished this module — we only have one more thing to do. In the three famous mathematical formulas assessment you'll use your new knowledge to rewrite a small mathematical article using HTML and MathML.