initial commit

1 files changed, 151 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/console/table/index.html b/files/zh-cn/web/api/console/table/index.html
new file mode 100644
index 0000000000..85d5ba2822
--- /dev/null
+++ b/files/zh-cn/web/api/console/table/index.html
@@ -0,0 +1,151 @@
+---
+title: Console.table()
+slug: Web/API/Console/table
+tags:
+  - API
+  - Web 开发
+  - 控制台
+  - 方法
+  - 调试
+translation_of: Web/API/Console/table
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>将数据以表格的形式显示。</p>
+
+<p>这个方法需要一个必须参数 <code>data</code>，<code>data</code> 必须是一个数组或者是一个对象；还可以使用一个可选参数 <code>columns</code>。</p>
+
+<p>它会把数据 <code>data</code> 以表格的形式打印出来。数组中的每一个元素（或对象中可枚举的属性）将会以行的形式显示在表格中。</p>
+
+<p>表格的第一列是 <code>index</code>。如果数据 <code>data</code> 是一个数组，那么这一列的单元格的值就是数组的索引。 如果数据是一个对象，那么它们的值就是各对象的属性名称。 注意（在 FireFox 中）<code>console.table</code> 被限制为只显示1000行（第一行是被标记的索引（原文：labeled index））。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="打印单一参数类型">打印单一参数类型</h3>
+
+<p>数据的参数类型可以是数组或是对象。</p>
+
+<pre class="brush: js">// 打印一个由字符串组成的数组
+
+console.table(["apples", "oranges", "bananas"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p>
+
+<pre class="brush: js">// 打印一个属性值是字符串的对象
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p>
+
+<h3 id="打印复合的参数类型">打印复合的参数类型</h3>
+
+<p>如果需要打印的元素在一个数组中，或者需要打印的属性在一个对象，并且他们本身就是一个数组或者对象，则将会把这个元素显示在同一行，每个元素占一列：</p>
+
+<pre class="brush: js">// 二元数组的打印
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);</pre>
+
+<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p>
+
+<pre class="brush: js">// 打印一个包含对象的数组
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);</pre>
+
+<p>请注意，如果数组包含对象，则列将使用属性名称进行标记。</p>
+
+<p>结果显示，如果数组中包含该对象，打印出来的列标签将是该对象的属性名</p>
+
+<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p>
+
+<pre class="brush: js">// 打印属性名是对象的对象
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);</pre>
+
+<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p>
+
+<h3 id="选择要隐藏的列">选择要隐藏的列</h3>
+
+<p><code>console.table()</code> 会把所有元素罗列在每一列，你可以使用 <code>columns</code> 参数选择要显示的列的子集：</p>
+
+<pre class="brush: js">// 一个对象数组，只打印 firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);</pre>
+
+<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p>
+
+<h3 id="按列重新排序">按列重新排序</h3>
+
+<p>你可以点击每列的顶部标签来重排输出的表格。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>要显示的数据。必须是数组或对象。</dd>
+ <dt><code>columns</code></dt>
+ <dd>一个包含列的名称的数组。</dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#table", "console.table()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.table")}}</p>
+</div>