diff --git a/files/zh-cn/learn/mathml/first_steps/tables/index.md b/files/zh-cn/learn/mathml/first_steps/tables/index.md new file mode 100644 index 00000000000000..1696365f5602bb --- /dev/null +++ b/files/zh-cn/learn/mathml/first_steps/tables/index.md @@ -0,0 +1,311 @@ +--- +title: MathML 表格 +slug: Learn/MathML/First_steps/Tables +--- + +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps/Three_famous_mathematical_formulas", "Learn/MathML/First_steps")}} + +掌握了所有基本的数学符号后，接下来要考虑的是用于矩阵式表达和其他高级数学布局的表格布局。 + + + + + + + + + + + + +
前提： + 基本的计算机操作能力，安装基本软件，基本的文件操作知识，以及 HTML 基础知识（学习 HTML 简介和 HTML 表格） +
目标： + 了解 MathML 表格元素，并了解一些使用案例。 +
+ +## MathML 表格元素 + +MathML 表格元素与 [HTML 表格](/zh-CN/docs/Learn/HTML/Tables)的元素类似：`` 元素表示数学表格，它的子元素是 `` 元素（表示行），每个 `` 元素都有 `` 元素作为其子元素（表示单元格）。`` 元素可以在 MathML 公式的任何位置插入。`` 元素可以包含任意数量的 MathML 子元素，并将它们布局为 `` 容器。 + +表格通常用于矩阵式表达式（包括向量）。以下是一个基本示例，该示例取自[有关 CSS `matrix()` 函数的文章](/zh-CN/docs/Web/CSS/transform-function/matrix)： + +```html hidden + +``` + +```html + + + ( + + + + a + + + c + + + 0 + + + + t + x + + + + + + b + + + d + + + 0 + + + + t + y + + + + + + 0 + + + 0 + + + 1 + + + 0 + + + + + 0 + + + 0 + + + 0 + + + 1 + + + + ) + + +``` + +{{ EmbedLiveSample('MathML 表格元素', 700, 200) }} + +## 允许单元格跨多行多列 + +与 [HTML 表格](/zh-CN/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns)类似，`` 元素具有 `columnspan` 和 `rowspan` 属性，以指示单元格跨多行和多列。下面的内部矩阵跨越外部矩阵的两列： + +```html hidden + + + + + 横跨多列的矩阵 + + + + + + ( + + + + + ( + + + + a + + + c + + + + + b + + + d + + + + ) + + + + 0 + + + T + + + + + 0 + + + 0 + + + 1 + + + 0 + + + + + 0 + + + 0 + + + 0 + + + 1 + + + + ) + + + + +``` + +{{EmbedLiveSample('允许单元格横跨多行多列', 700, 200)}} + +> **备注：** 出于历史原因，MathML 中用于跨列的属性被称为 `columnspan` 而不是 `colspan`。 + +## 高级布局用法 + +除了表示类似矩阵的对象外，MathML 表格有时也用于数学公式中的高级布局，例如在[维基百科对勒让德符号的定义](https://zh.wikipedia.org/wiki/勒让德符号)中，公式被分隔在三行中，而值和条件则分隔于两列。 + +```html + + + + + 第一个矩阵 + + + + + + + ( + + a + b + + ) + + = + + { + + + + 1 + + + 如果  + a +  是模  + p +  的二次剩余且不是  + p +  的倍数  + ； + + + + + − + 1 + + + 如果  + a +  是模  + p +  的非二次剩余  + ； + + + + + 0 + + + 如果  + a +  是  + p +  的倍数  + 。 + + + + + + + + +``` + +{{ EmbedLiveSample('高级布局用法', 700, 200) }} + +> **警告：** [``](/zh-CN/docs/Web/MathML/Element/mtable) 文档中记录了更多高级布局选项，如对齐或间距等特殊属性。这些属性起源于 CSS 一类事物之前，最初设计用于不支持 CSS 的渲染器。然而，并非所有浏览器都实现了这些属性。将来，可能会用基于 CSS 的替代方案取代仅用于布局目的（即非实际矩阵对象）的 `` 的用法。 + +## 总结 + +在本文中，我们回顾了 ``、`` 和 `` 元素，它们是用于表格的 HTML 元素的等效元素。我们学习了如何使用它们表示类似矩阵的对象，以及如何用它们实现高级布局。 + +你已经接近完成本单元了——我们只剩下最后一件事要做。在[三个著名数学公式测验](/zh-CN/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas)中，你需要运用新学到的知识，使用 HTML 和 MathML 重写一个小型数学文章。 + +{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps/Three_famous_mathematical_formulas", "Learn/MathML/First_steps")}} + +## 参见 + +- [学习 HTML 表格](/zh-CN/docs/Learn/HTML/Tables) +- [`` 元素](/zh-CN/docs/Web/MathML/Element/mtable) +- [`` 元素](/zh-CN/docs/Web/MathML/Element/mtr) +- [`` 元素](/zh-CN/docs/Web/MathML/Element/mtd)