如何创建带有描述的 table 方程式？

Question

我想创建一个无边界的 table 方程式，方程式已编号且等号对齐：
代替等号，我想插入彩色和缩放的 Unicode 字符 - 即更大的红色 ⬌ （等价）。最后，描述与方程式一致 - 最好在右边。

我试过居中方程，但等号和编号没有按预期对齐 - 并且对齐其中一个或另一个需要 row-specific 间距：

<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>

（在没有乱码的情况下添加描述并没有走得太远。）

如何实现？

Answer 1

可以使用一些 HTML & CSS 创建这样的 table。

从基本的 table 开始，加入一些 CSS 来设置 table 宽度、添加边框和对齐文本：

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 占用更多 space；为了平衡，仅将内联样式添加到 顶部列:

<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] 垂直 space 行，添加 td {padding-top: 6px;} [Result]
要添加样式化的 Unicode，请将 = 替换为 & #11020 ;（无 space），并将 .ctr 修改为

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

[Above result]（text-align: center 将符号与文本的其余部分垂直对齐，由于 font-resize 而脱轨）

以 header 和描述结束，我们添加额外的行和列，并调整宽度：

<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 很容易发现和编辑，并且可以通过 copy/pasting 和 five-line 块创建新行。）

... 我们完成了。希望有用。

现在开始练习数学 tables。

注意：请参阅 scraaappy 的答案，了解使用 MathJax 数组的可能更简单的替代方法。

Answer 2

你应该探索 mathjax (latex) 强大的对齐功能

<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="width:100%;text-align:center;">
\(\begin{alignat}{3}
&[1]\hspace{63px}&&&{3-2} &&\ = 1 \hspace{63px}&&\text {More arithmetic}
\&[2]&&&{E} &&\ = mc^2 &&\text {Feel the energy}
\&[3]&&&{x+1} &&\ \color{red}{\unicode{x2B0C}} 5 &&\text{description}
\end{alignat}\)
</p>

编辑

.unicode{
  transform-origin:50% 50%;  
  transform:scale(1.6,1.5);
}

<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="width:100%;text-align:center;">
\(\begin{alignat}{3}
 \[2pt]\hline
&[1]\hspace{63px}&&&{3-2} &&\ = 1 \hspace{63px}&&\text {More arithmetic}
 \[2pt]\hline
 &[2]&&&{E} &&\ = mc^2 &&\text {Feel the energy}
  \[2pt]\hline
&[3]&&&{x+1} &&\ \color{red}{\class{unicode}{\unicode{x2B0C}}}\ 5 &&\text{description}
 \[2pt]\hline
 \end{alignat}\)
</p>

您可以使用 \class{className} 设置文本样式（但使用字体大小会产生偏移，您必须使用 css 规则进行更正。我不确定这是您想要的）和您可以用 \hline 分隔行（然后调整垂直 space 如下：\[2pt]\hline.

正如@Xufox 在评论中所建议的那样，您还可以探索 \array 功能来构建 table。但是，不要这样： https://math.meta.stackexchange.com/questions/2016/tabular-in-mathjax?answertab=active#tab-top（另请参阅问题上方关于如何使用数组的评论）

因此，根据您想要实现的目标（例如响应式的东西），您的解决方案可能是最容易设置的。

如何创建带有描述的 table 方程式？

How to create a table of equations with descriptions?

html

css

html-table

alignment

mathjax