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:

html
<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.

See also