MathML- Matrix and Table
Written by 31 May 2013
When data are categorized, they are usually shown in tables and matrices. In fact these things act a special role in dealing with data. So a mathematician must know how to write them in computer and web. By HTML5 MathML features, there is no worry about the matrices and tables. Its different features help you to easily make what you want. The following code shows how different tables with different styles can come for different usages. You can also use special dots in some cells and put a complex equation there. So try to practice from simple to complicated examples below.
Code Snippet:
<!-- this script is provided by www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<body style="font-size: 16pt;">
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<mfenced open='[' close=']' separators=''>
<mtable>
<mtr>
<mtd>
<mn>1</mn>
</mtd>
<mtd>
<mn>2</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>3</mn>
</mtd>
<mtd>
<mn>4</mn>
</mtd>
</mtr>
</mtable>
</mfenced>
<mspace width="80px"/>
<mfenced open='{' close='' separators=''>
<mtable>
<mtr>
<mtd>
<mrow>
<mo>a</mo>
<mi>x</mi>
<mo>+</mo>
<mo>b</mo>
<mi>y</mi>
<mo>=</mo>
<mo>c</mo>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow>
<mo>e</mo>
<mi>x</mi>
<mo>+</mo>
<mo>f</mo>
<mi>y</mi>
<mo>=</mo>
<mo>g</mo>
</mrow>
</mtd>
</mtr>
</mtable>
</mfenced>
</math>
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<mfenced open='|' close='|' separators=''>
<mtable>
<mtr>
<mtd>
<mn>1</mn>
</mtd>
<mtd>
<mn>…</mn>
</mtd>
<mtd>
<msub>
<mi>a</mi>
<mrow>
<mn>1</mn>
<mo>⁣</mo>
<mn>n</mn>
</mrow>
</msub>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>⋮</mn>
</mtd>
<mtd>
<mn>⋱</mn>
</mtd>
<mtd>
<mn>⋮</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<msub>
<mi>a</mi>
<mrow>
<mn>n</mn>
<mo>⁣</mo>
<mn>1</mn>
</mrow>
</msub>
</mtd>
<mtd>
<mn>…</mn>
</mtd>
<mtd>
<mn>1</mn>
</mtd>
</mtr>
</mtable>
</mfenced>
<mspace width="50px" height="80px"/>
<mtable columnlines='dashed' rowlines="solid" columnwidth="30px" frame="solid">
<mtr rowalign="center">
<mtd>
<mn>1</mn>
</mtd>
<mtd>
<mn>2</mn>
</mtd>
<mtd>
<mn>3</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>1</mn>
</mtd>
<mtd>
<mn>2</mn>
</mtd>
<mtd>
<mn>3</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>1</mn>
</mtd>
<mtd>
<mn>2</mn>
</mtd>
<mtd>
<mn>3</mn>
</mtd>
</mtr>
</mtable>
</math>
</body>
<div style="text-align: center"><font face="Tahoma"><br><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!