MathML Demo: <mtable> - tables and matrices 编辑

As a visual aid, the examples deliberately draw attention to the math axis and the baseline:
----------------------- this is the math axis
..................... this is the baseline

1. External vertical align is center $\text{---}\text{...}\begin{array}{|rcl|}\hline 1& 22& 333\\ \frac{4444}{x}& 55555& 666666\\ a& b& c\\ 7777777& 11& \\ \hline\end{array}\text{...}\text{---}$ , cols arg is "|r|c|l|", \hline's above and below. When align="center" or align="baseline", the middle of the table coincides with the baseline.
2. External vertical align is axis $\text{---}\text{...}\begin{array}{rcl}1& 22& 333\\ \frac{4444}{x}& 55555& \genfrac{}{}{0ex}{}{\underset{n\to \infty }{lim}{f}^{-1}\left(\bigcup _{i=1}^n{A}_i\right)}{\text{rowspan=2 here}}\\ \multicolumn{2}{c}{\genfrac{}{}{0ex}{}{\sqrt[n]{x^n+y^n}}{\text{columnspan=2 here}}}\\ 7777777& 11& \end{array}\text{...}\text{---}$, columnlines="solid", rowlines="dashed solid dashed". By default -- when the align attribute is not set, or when align="axis", the middle of the table coincides with the math axis.
3. External vertical align is top $\text{---}\text{...}\begin{array}{rcl}1& 22& 333\\ 4444& \frac{55555}{x+1}& 666666\\ a& b& c\\ 7777777& 11& \end{array}$ cols arg is"r|c:l".
4. External vertical align is bottom $\text{---}\text{...}\begin{array}{rcl}1& 22& 333\\ 4444& 55555& \frac{666666}{x^2}\\ a& b& c\\ 7777777& 11& \end{array}$ cols arg is "r|cl". MathML doesn't specify how to only display certain sides of the table border, as in "|rcl", but these can be obtained in Mozilla using the 'border' property of CSS, e.g., "|rcl" can be achieved with the CSS declaration "mtable { border-left: solid thin }".
5. Math axis test, using externally aligned arrays inside symmetric fences. $\text{---}\text{...}\left[\begin{array}{c}1\\ \frac{666666}{x^2}\\ c\\ \mathbf{\text{axis}}\end{array}\right]\left[\begin{array}{c}1\\ \frac{666666}{x^2}\\ c\\ \mathbf{\text{center}}\end{array}\right]+\lfloor \begin{array}{c}1\\ \frac{55555}{x+1}\\ c\\ \mathbf{\text{bottom}}\end{array}\rfloor +\lceil \begin{array}{c}1\\ \frac{4444}{x}\\ c\\ \mathbf{\text{top}}\end{array}\rceil +\parallel \begin{array}{c}1\\ \frac{4444}{\frac{4444}{{\displaystyle \frac{4444}{x}}}}\\ \mathbf{\text{center}}\end{array}\parallel$ post text.
6. Now for a display $$\text{---}\text{...}\begin{array}{|c|}\hline 1\\ \frac{4444}{\frac{4444}{{\displaystyle \frac{4444}{x}}}}\\ 7777777\\ \hline\end{array}$$ text after displayed math. Do you see which vertical alignment is set on that table?
7. Example of \begin{matrix} $\text{---}\text{...}\begin{array}{|cc|}\hline 0& 1\\ 1& 0\\ \hline\end{array}$ with 3 \hline's.
8. Example of \begin{smallmatrix} $\text{---}\text{...}\begin{array}{ccc}1& 2& 3\\ 4& 5& \end{array}$ obtained with scriptlevel="+1".
9. Example of \begin{pmatrix} $\text{---}\text{...}\left(\begin{array}{cc}0& -i\\ i& 0\end{array}\right)$ with an \hline after the first row.
10. Example of \begin{bmatrix} $\text{---}\text{...}\left[\begin{array}{cc}1& 0\\ 0& -1\end{array}\right]$
11. Example of \begin{vmatrix} $\text{---}\text{...}\left|\begin{array}{cc}a& b\\ c& d\end{array}\right|$
12. Example of \begin{Vmatrix} $\text{---}\text{...}\parallel \begin{array}{ccc}0& 1& 0\\ 11& 0& 111\\ 0& 1111& 0\end{array}\parallel$
13. Example of \begin{Bmatrix} $\text{---}\text{...}\left\{\begin{array}{ccc}1& 0& 1\\ 0& 11& \end{array}\right\}$
14. A fenced matrix and the equivalent \begin{bmatrix} $\text{---}\text{...}\left[\begin{array}{lr}a& bb\\ ccc& dddd\end{array}\right]\left[\begin{array}{cc}a& bb\\ ccc& dddd\end{array}\right]$ .
15. A table with align="axis2" to anchor the table externally w.r.t. the axis of the second row $\text{---}\text{...}\frac{a}{b}\begin{array}{cc}\alpha & \beta \\ \frac{a}{b}x& y\frac{a}{b}\\ \gamma & \delta \end{array}\frac{a}{b}\text{...}\text{---}$, but this is subject to variances due to style changes, e.g., from the scriptlevel. $\text{---}\text{...}\frac{a}{b}\begin{array}{cc}\alpha & \beta \\ \frac{a}{b}x& y\frac{a}{b}\\ \gamma & \delta \end{array}\frac{a}{b}\text{...}\text{---}$. Anyway, this is buggy in Mozilla because what you see above is a fallback to the rendering code used for the baseline case (see below).
16. A table with align="baseline -1" to anchor the table externally w.r.t. the baseline of the last row $\text{---}\text{...}\sqrt{d+p}\left(\begin{array}{cc}\alpha & \beta \\ \gamma & \delta \end{array}\right)\text{...}\text{---}$, neat isn't it? This would be pretty hard to obtain otherwise. Contrast it with the following which has align="bottom" $\text{---}\text{...}\sqrt{d+p}\left(\begin{array}{cc}\alpha & \beta \\ \gamma & \delta \end{array}\right)\text{...}\text{---}$, and with this one which has align="center -1" $\text{---}\text{...}\sqrt{d+p}\left(\begin{array}{cc}\alpha & \beta \\ \gamma & \delta \end{array}\right)\text{...}\text{---}$, but note that setting the baseline relative to a particular row is meaningless if the row doesn't have at least one cell with "rowalign=baseline" where to anchor the baseline (in which case Mozilla will behave as if it was align="center#rownumber").
17. These may sound like gimmicks until you want to get a damping effect such as this $\text{---}\text{...}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}$, or perhaps the reverse $\text{---}\text{...}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}\begin{array}{c}\frac{a}{b}\end{array}$, modulo pixel roundoff errors. Here 'a' and 'b' can be other combinations of possibly irregular boxes.
18. And making floating elements do a multiplication such as the following one which is anchored at a baseline is made simple by using align="baseline1" on both tables $$\left[\begin{array}{cccc}a& b& c& d\end{array}\right]\left[\begin{array}{c}a\\ b\\ c\\ d\end{array}\right]$$
19. To multiply a matrix A by a vector x, each row of the matrix has to be multiplied to the vector. So at the i-th step, it proceeds thus: $$i\text{-th row}\left[\begin{array}{ccccc}{a}_{11}& a_{12}& a_{13}& \dots & a_{1n}\\ ⋮& ⋮& ⋮& \dots & ⋮\\ a_{i1}& a_{i2}& a_{i3}& \dots & a_{in}\\ ⋮& ⋮& ⋮& & ⋮\\ a_{n1}& a_{n2}& a_{n3}& \dots & a_{nn}\end{array}\right]\left[\begin{array}{c}{x}_1\\ x_2\\ x_3\\ ⋮\\ x_n\end{array}\right]$$