aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/console/tabla/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/es/web/api/console/tabla/index.html')
-rw-r--r--files/es/web/api/console/tabla/index.html212
1 files changed, 212 insertions, 0 deletions
diff --git a/files/es/web/api/console/tabla/index.html b/files/es/web/api/console/tabla/index.html
new file mode 100644
index 0000000000..53f57f5636
--- /dev/null
+++ b/files/es/web/api/console/tabla/index.html
@@ -0,0 +1,212 @@
+---
+title: Console.table()
+slug: Web/API/Console/tabla
+tags:
+ - API
+ - Consola
+ - DOM
+ - Depuración
+translation_of: Web/API/Console/table
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Muestra datos tabulares como una tabla.</span></p>
+
+<p>Esta función toma un argumento obligatorio: <code>data</code>, que debe ser un array o un objeto, y un parámetro adicional: <code>columns</code>.</p>
+
+<p>Muestra <code>data</code> como una tabla en la consola. Cada elemento en el array (o propiedad enumerable si <code>data</code> es un objeto) será una fila en la tabla.</p>
+
+<p>La primera columna de la tabla se identificará como <code>(index)</code>. Si <code>data</code> es un array, sus valores serán los índices del array. Si <code>data</code> es un objeto, entonces sus valores serán los nombres de las propiedades. Tenga en cuenta que (en Firefox) <code>console.table</code> está limitado a mostrar 1000 filas (la primera columna es la llamada <code>index</code>).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Colecciones_de_tipos_primitivos">Colecciones de tipos primitivos</h3>
+
+<p>El argumento <code>data</code> puede ser un array o un objeto.</p>
+
+<pre class="brush: js">// un array de strings
+
+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">// un objeto cuyas propiedades son strings
+
+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="Colecciones_de_tipos_compuestos">Colecciones de tipos compuestos</h3>
+
+<p>Si los elementos en el array, o propiedades en el objeto, son también arrays u objetos, sus elementos o propiedades serán enumeradas en la fila, una por columna:</p>
+
+<pre class="brush: js">// un array de arrays
+
+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">// un array de objetos
+
+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>Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad.</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">// un objeto cuyas propiedades son objetos
+
+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="Restringiendo_las_columnas_mostradas">Restringiendo las columnas mostradas</h3>
+
+<p>Por defecto, <code>console.table()</code> muestra todos los elementos de cada fila. Puedes emplear el parámetro opcional <code>columns</code>  para seleccionar un subconjunto de columnas que mostrar:</p>
+
+<pre class="brush: js">// an array of objects, logging only 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="Ordenando_columnas">Ordenando columnas</h3>
+
+<p>Se puede ordenar la tabla por una columna en particular pulsando en la etiqueta de dicha columna.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>La información a mostrar. Puede ser tanto un array como un objeto.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Un array que contenga los nombres de las columnas a incluir.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Especificación</th>
+ <th scope="col">Estado</th>
+ <th scope="col">Comentario</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName("Console API", "#table", "console.table()")}}</td>
+ <td>{{Spec2("Console API")}}</td>
+ <td>Definición inicial</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Soporte básico</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("34.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td>Disponible en workers</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatGeckoDesktop("38.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Edge</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Soporte básico</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("34.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td>Disponible en workers</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatGeckoMobile("38.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>