Html / css for brackets around a mathematical matrix - prefer easy

Question

I am writing math in html. I want to do it in a small and easy way. This is what I still have. This makes the matrices accurate, but is there a way to make the brackets that are usually visible around the matrices?

For example, if <b>A</b> is the matrix <br> <br> <div align=center> <table> <tr> <td>1+3i</td> <td>2+i</td> <td>10</td> </tr> <tr> <td>4-3i</td> <td>5</td> <td>-2</td> </tr> </table> </div> <br> 

Answer 1

Demo: http://jsfiddle.net/NQ6ww/38/

Performed using CSS using :before and :after pseudo-elements to simulate square brackets.

HTML

 <div align=center> <table class="matrix"> <tr> <td>1+3i</td> <td>2+i</td> <td>10</td> </tr> <tr> <td>4-3i</td> <td>5</td> <td>-2</td> </tr> </table> </div> 

CSS

 .matrix { position: relative; } .matrix:before, .matrix:after { content: ""; position: absolute; top: 0; border: 1px solid #000; width: 6px; height: 100%; } .matrix:before { left: -6px; border-right: 0; } .matrix:after { right: -6px; border-left: 0; } 

Answer 2

MathJax based solution (with jsfiddle ):

 <script src= "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> </script> \[\begin{bmatrix} 1+3\mathrm{i} & 2+\mathrm{i} & 10\\ 4-3\mathrm{i} & 5 & -2 \end{bmatrix}\] 

It seems that MathJax is increasingly being used to display mathematical formulas on web pages. The above example uses a version of the LaTeX approach. MathJax is based on client-side JavaScript, but this drawback is probably outweighed by the benefits.

Using \bmatrix creates a matrix with parentheses. The primary entry for matrices, according to ISO 80000-2, uses parentheses; to do this, use \pmatrix instead.

I used \mathrm{i} to create an unialized "i" according to the standard. Many mathematicians still prefer italics here, achievable, using only i instead, since LaTeX highlights identifiers by default. Please note that LaTeX automatically applies the correct distance around the operators and turns the hyphen "-" into a minus sign.