MathML- Matrix and Table

Written by @m_k_amin 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 https://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>&hellip;</mn>
				</mtd>
				<mtd>
					<msub>
						<mi>a</mi>
						<mrow>
							<mn>1</mn>
							<mo>&InvisibleComma;</mo>
							<mn>n</mn>
						</mrow>
					</msub>

				</mtd>
			</mtr>
			<mtr>
				<mtd>
					<mn>&vellip;</mn>
				</mtd>
				<mtd>
					<mn>&dtdot;</mn>
				</mtd>
				<mtd>
					<mn>&vellip;</mn>
				</mtd>
			</mtr>
			<mtr>
				<mtd>
					<msub>
						<mi>a</mi>
						<mrow>
							<mn>n</mn>
							<mo>&InvisibleComma;</mo>
							<mn>1</mn>
						</mrow>
					</msub>
				</mtd>
				<mtd>
					<mn>&hellip;</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='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300