html - 如何创建带有描述的方程式表？

我想创建一个无边界的方程表，方程编号，等号对齐：
代替等号，我想插入彩色和缩放的Unicode字符-即更大的红色⬌（等价）。最后，描述与方程一致-最好在右边。
我试着将等式居中，但等号和数字并没有按预期对齐，而对齐一个或另一个需要行特定的间距：

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<center><p>
\([1]\hspace{63px} 1 + 2 = 3\)<br>
\([2]\ \ 1 + 3 + 5= 9 + 0\)
</p></center>

（在添加描述时没有出现混乱的代码。）
如何才能做到这一点？

最佳答案

可以使用一些HTML和CSS创建这样的表。
从基本表格开始，输入一些CSS来设置表格宽度、添加边框和对齐文本：

table {width: 300px;border-collapse: collapse;}
table, td, th {border-bottom: 1px solid black;}
.ctr {text-align: center;}
.lft {text-align: right;}
.rgt {text-align: left}

<table>
    <tr><td>[1]</td>
    <td class="lft">3 - 2</td>
    <td class="ctr">=</td>
    <td class="rgt">1</td></tr>

    <tr><td>[2]</td>
    <td class="lft">4 + 1 - 3</td>
    <td class="ctr">=</td>
    <td class="rgt">6 - 4</td></tr>
</table>

LHS比RHS占用的空间要大得多；要平衡它，只需在顶部列中添加内联样式：

<tr><td style="width: 10%">[1]</td>
<td class="lft" style="width: 40%">3 - 2</td>
<td class="ctr" style="width: 10%">=</td>
<td class="rgt" style="width: 40%">1</td></tr>

<tr><td>[2]</td>
<td class="lft">4 + 1 - 3</td>
<td class="ctr">=</td>
<td class="rgt">6 - 4</td></tr>

[Above result]若要垂直分隔行，请添加td {padding-top: 6px;}
[Result]
若要添加样式化Unicode，请将=替换为& #11020 ;（无空格），并将.ctr修改为

.ctr {text-align: center; line-height: 100%; font-size: 150%; color: red}

[Above result]（text-align: center在因font-resize而脱轨后，将符号与文本的其余部分垂直对齐）
以标题和说明结束，我们添加额外的行和列，并调整宽度：

<tr style="border-bottom: 1px solid black; font-weight: bold">
<td style="width: 10%">Eq</td>
<td class="lft" style="width:20%">LHS</td>
<td style="10%"></td>
<td class="rgt" style="width:20%">RHS</td>
<td>Description</td></tr>

<tr><td>[1]</td>
<td class="lft">3 - 2</td>
<td class="ctr">&#11020;</td>
<td class="rgt">1</td>
<td>More arithmetic</td>
</tr>

<tr><td>[2]</td>
<td class="lft">4 + 1 - 3</td>
<td class="ctr">&#11020;</td>
<td class="rgt">6 - 4</td>
<td>Wider arithmetic</td></tr>

[Above result]要去掉边框，请从CSS中删除

table, td, th {border-bottom: 1px solid black;}

最后，进一步增强想象力，添加一个数学库并定义一个新命令，以便轻松设置枚举的样式：

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<p style="display:none">\(\newcommand{b}[1]{\boldsymbol{[#1]}}\)</p>

成品：

table {
    width: 400px;
    border-collapse: collapse;
}
table, td, th {border-bottom: 1px solid black;}
.ctr {text-align: center; line-height: 100%; font-size: 150%; color: red}
.lft {text-align: right;}
.rgt {text-align: left}
 td {padding-top: 6px;}

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<p style="display:none">\(\newcommand{b}[1]{\boldsymbol{[#1]}}\)</p>

<table>

<tr style="border-bottom: 1px solid black; font-weight: bold">
<td style="width: 10%">\(Eq\)</td><td class="lft" style="width:18%">
LHS
</td><td class="ctr" style="width: 13%"></td><td class="rgt" style="width:20%">
RHS
</td><td>Description</td></tr>

<tr><td>\(\b{2}\)</td><td class="lft">
\(3 - 2\)
</td><td class="ctr">&#11020;</td><td class="rgt">
\(1\)
</td><td>More arithmetic</td></tr>

<tr><td>\(\b{4}\)</td><td class="lft">
\(E\)
</td><td class="ctr">&#11020;</td><td class="rgt">
\(mc^2\)
</td><td><i>FEEL THE ENERGY</i></td></tr>

</table>

（另外，为了简单起见，我重写了HTML；这样，LHS和RHS很容易识别和编辑，并且可以通过复制/粘贴五行块来创建新行。）
... 我们结束了。希望有用。
现在去锤一些数学表。
注意：关于使用MathJax数组的可能更简单的替代方法，请参见scraaappy的答案。