Print array in a table.
📦 Node.js-> Command Line
✨ The Prompt Phrase
console.table(petsArray);
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📊 console.table() Guide</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--cyan: #06b6d4;
--blue: #3b82f6;
--purple: #8b5cf6;
--pink: #ec4899;
--orange: #f97316;
--yellow: #fbbf24;
--green: #10b981;
--bg: #0f172a;
--card: #1e293b;
--text: #e2e8f0;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.6;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
/* Header */
header {
text-align: center;
padding: 50px 20px;
background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(59,130,246,0.2));
border-radius: 20px;
margin-bottom: 40px;
}
.logo {
font-size: 5rem;
margin-bottom: 20px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
h1 {
font-size: 2.5rem;
background: linear-gradient(135deg, var(--cyan), var(--blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
}
.subtitle {
color: #94a3b8;
font-size: 1.1rem;
}
/* Cards */
.card {
background: var(--card);
border-radius: 16px;
padding: 30px;
margin-bottom: 25px;
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card h2 {
color: var(--cyan);
margin-bottom: 15px;
font-size: 1.5rem;
}
.card p {
color: #94a3b8;
margin-bottom: 15px;
}
/* Code blocks */
.code {
background: #0a0f1a;
border-radius: 12px;
padding: 20px;
margin: 20px 0;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
overflow-x: auto;
border: 1px solid rgba(6,182,212,0.3);
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.code-lang {
color: var(--cyan);
font-weight: 600;
}
.copy-btn {
background: var(--cyan);
border: none;
padding: 8px 16px;
border-radius: 6px;
color: #000;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.copy-btn:hover {
transform: scale(1.05);
}
.kw { color: var(--purple); }
.str { color: var(--yellow); }
.num { color: var(--orange); }
.func { color: var(--cyan); }
.comment { color: #6b7280; }
.prop { color: var(--green); }
/* Table display */
.table-output {
background: #0a0f1a;
border-radius: 12px;
padding: 20px;
margin: 20px 0;
border: 2px solid var(--cyan);
overflow-x: auto;
}
.table-output table {
width: 100%;
border-collapse: collapse;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
}
.table-output th {
background: rgba(6,182,212,0.2);
padding: 12px;
text-align: left;
color: var(--cyan);
border: 1px solid var(--cyan);
}
.table-output td {
padding: 12px;
border: 1px solid rgba(255,255,255,0.2);
color: #94a3b8;
}
/* Info boxes */
.info {
padding: 20px;
border-radius: 12px;
margin: 20px 0;
border-left: 4px solid var(--cyan);
background: rgba(6,182,212,0.1);
}
.info strong {
color: var(--cyan);
display: block;
margin-bottom: 8px;
}
/* Playground */
.playground {
background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(139,92,246,0.1));
border-radius: 16px;
padding: 30px;
margin: 30px 0;
border: 2px solid var(--cyan);
}
.playground h3 {
color: var(--yellow);
text-align: center;
margin-bottom: 20px;
font-size: 1.3rem;
}
.input-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 15px;
}
.input-group label {
display: block;
color: var(--cyan);
font-size: 0.85rem;
margin-bottom: 5px;
font-weight: 600;
}
.input-group input {
width: 100%;
padding: 10px;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
color: var(--text);
font-family: 'Fira Code', monospace;
}
.btn-group {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn-primary {
background: linear-gradient(135deg, var(--cyan), var(--blue));
color: white;
}
.btn-secondary {
background: linear-gradient(135deg, var(--purple), var(--pink));
color: white;
}
.btn:hover {
transform: translateY(-2px);
}
.output {
background: #0a0f1a;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
min-height: 100px;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
}
/* Toast */
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--card);
padding: 15px 30px;
border-radius: 12px;
border: 2px solid var(--cyan);
transition: transform 0.4s;
z-index: 1000;
}
.toast.show {
transform: translateX(-50%) translateY(0);
}
@media (max-width: 768px) {
.input-row { grid-template-columns: 1fr; }
h1 { font-size: 2rem; }
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">📊</div>
<h1>console.table() Master Guide</h1>
<p class="subtitle">Print beautiful tables in Node.js console!</p>
</header>
<!-- What is it -->
<div class="card">
<h2>🎯 What is console.table()?</h2>
<p>console.table() is a Node.js method that displays arrays and objects as formatted tables in your console. It's perfect for debugging and visualizing structured data!</p>
<div class="info">
<strong>✨ Why Use It?</strong>
<p>Instead of messy array output, you get clean, organized tables with borders and columns - like a spreadsheet in your terminal!</p>
</div>
</div>
<!-- Basic Syntax -->
<div class="card">
<h2>📝 Basic Syntax</h2>
<div class="code">
<div class="code-header">
<span class="code-lang">JavaScript</span>
<button class="copy-btn" onclick="copy('console.table(data);')">Copy</button>
</div>
<span class="func">console</span>.<span class="func">table</span>(<span class="prop">data</span>);<br><br>
<span class="comment">// With column selection:</span><br>
<span class="func">console</span>.<span class="func">table</span>(<span class="prop">data</span>, [<span class="str">'column1'</span>, <span class="str">'column2'</span>]);
</div>
</div>
<!-- Simple Array -->
<div class="card">
<h2>1️⃣ Simple Array Example</h2>
<div class="code">
<div class="code-header">
<span class="code-lang">Node.js</span>
<button class="copy-btn" onclick="copy('const fruits = [\'apple\', \'banana\', \'cherry\'];\nconsole.table(fruits);')">Copy</button>
</div>
<span class="kw">const</span> fruits = [<span class="str">'apple'</span>, <span class="str">'banana'</span>, <span class="str">'cherry'</span>];<br>
<span class="func">console</span>.<span class="func">table</span>(fruits);
</div>
<div class="table-output">
<table>
<tr>
<th>(index)</th>
<th>Values</th>
</tr>
<tr>
<td>0</td>
<td>'apple'</td>
</tr>
<tr>
<td>1</td>
<td>'banana'</td>
</tr>
<tr>
<td>2</td>
<td>'cherry'</td>
</tr>
</table>
</div>
</div>
<!-- Array of Objects -->
<div class="card">
<h2>2️⃣ Array of Objects (Most Powerful!)</h2>
<div class="code">
<div class="code-header">
<span class="code-lang">Node.js</span>
<button class="copy-btn" onclick="copy('const users = [\n { name: \'Alice\', age: 25, city: \'NYC\' },\n { name: \'Bob\', age: 30, city: \'LA\' }\n];\nconsole.table(users);')">Copy</button>
</div>
<span class="kw">const</span> users = [<br>
{ <span class="prop">name</span>: <span class="str">'Alice'</span>, <span class="prop">age</span>: <span class="num">25</span>, <span class="prop">city</span>: <span class="str">'NYC'</span> },<br>
{ <span class="prop">name</span>: <span class="str">'Bob'</span>, <span class="prop">age</span>: <span class="num">30</span>, <span class="prop">city</span>: <span class="str">'LA'</span> }<br>
];<br>
<span class="func">console</span>.<span class="func">table</span>(users);
</div>
<div class="table-output">
<table>
<tr>
<th>(index)</th>
<th>name</th>
<th>age</th>
<th>city</th>
</tr>
<tr>
<td>0</td>
<td>'Alice'</td>
<td>25</td>
<td>'NYC'</td>
</tr>
<tr>
<td>1</td>
<td>'Bob'</td>
<td>30</td>
<td>'LA'</td>
</tr>
</table>
</div>
</div>
<!-- Column Selection -->
<div class="card">
<h2>3️⃣ Select Specific Columns</h2>
<div class="code">
<div class="code-header">
<span class="code-lang">Node.js</span>
<button class="copy-btn" onclick="copy('console.table(users, [\'name\', \'age\']);')">Copy</button>
</div>
<span class="comment">// Show only name and age columns</span><br>
<span class="func">console</span>.<span class="func">table</span>(users, [<span class="str">'name'</span>, <span class="str">'age'</span>]);
</div>
<div class="table-output">
<table>
<tr>
<th>(index)</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>0</td>
<td>'Alice'</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>'Bob'</td>
<td>30</td>
</tr>
</table>
</div>
</div>
<!-- Interactive Playground -->
<div class="playground">
<h3>🎮 Interactive Playground</h3>
<p style="text-align: center; color: #94a3b8; margin-bottom: 20px;">Build your own data and see console.table() in action!</p>
<div id="rows"></div>
<div class="btn-group">
<button class="btn btn-primary" onclick="addRow()">➕ Add Row</button>
<button class="btn btn-secondary" onclick="generate()">📊 Generate Table</button>
<button class="btn" style="background: #ef4444; color: white;" onclick="clear()">🗑️ Clear</button>
</div>
<div class="output" id="output">
<span style="color: #64748b;">Add rows and click "Generate Table" to see the output!</span>
</div>
</div>
<!-- Real Examples -->
<div class="card">
<h2>💼 Real-World Examples</h2>
<div class="code">
<div class="code-header">
<span class="code-lang">Product Catalog</span>
<button class="copy-btn" onclick="copy('const products = [\n { name: \'Laptop\', price: 999, stock: 15 },\n { name: \'Mouse\', price: 25, stock: 50 }\n];\nconsole.table(products);')">Copy</button>
</div>
<span class="kw">const</span> products = [<br>
{ <span class="prop">name</span>: <span class="str">'Laptop'</span>, <span class="prop">price</span>: <span class="num">999</span>, <span class="prop">stock</span>: <span class="num">15</span> },<br>
{ <span class="prop">name</span>: <span class="str">'Mouse'</span>, <span class="prop">price</span>: <span class="num">25</span>, <span class="prop">stock</span>: <span class="num">50</span> }<br>
];<br>
<span class="func">console</span>.<span class="func">table</span>(products);
</div>
<div class="info">
<strong>🎯 Perfect For:</strong>
<p>Database results, API responses, user lists, product catalogs, game scores, and any structured data!</p>
</div>
</div>
<!-- Tips -->
<div class="card">
<h2>💡 Pro Tips</h2>
<div class="info">
<strong>✨ Tip 1: Works with Objects Too!</strong>
<p>You can pass a plain object. Each key becomes a row!</p>
</div>
<div class="code">
<div class="code-header">
<span class="code-lang">Object Example</span>
<button class="copy-btn" onclick="copy('const scores = { Alice: 95, Bob: 87 };\nconsole.table(scores);')">Copy</button>
</div>
<span class="kw">const</span> scores = { <span class="prop">Alice</span>: <span class="num">95</span>, <span class="prop">Bob</span>: <span class="num">87</span> };<br>
<span class="func">console</span>.<span class="func">table</span>(scores);
</div>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
let rowCount = 0;
function copy(text) {
navigator.clipboard.writeText(text);
toast('Copied to clipboard!');
}
function toast(msg) {
const t = document.getElementById('toast');
t.textContent = msg;
t.classList.add('show');
setTimeout(() => t.classList.remove('show'), 2000);
}
function addRow() {
rowCount++;
const row = document.createElement('div');
row.className = 'input-row';
row.innerHTML = `
<div class="input-group">
<label>Name</label>
<input type="text" placeholder="e.g., Alice">
</div>
<div class="input-group">
<label>Age</label>
<input type="number" placeholder="e.g., 25">
</div>
<div class="input-group">
<label>City</label>
<input type="text" placeholder="e.g., NYC">
</div>
`;
document.getElementById('rows').appendChild(row);
toast('Row added!');
}
function generate() {
const rows = document.querySelectorAll('.input-row');
if (rows.length === 0) {
toast('Add some rows first!');
return;
}
let html = '<span style="color: var(--purple);">console.table(data);</span><br><br>';
html += '<table style="width: 100%; border-collapse: collapse; font-size: 0.8rem;">';
html += '<tr style="border-bottom: 1px solid var(--cyan);"><th style="padding: 8px; color: var(--cyan); text-align: left;">(index)</th><th style="padding: 8px; color: var(--cyan); text-align: left;">name</th><th style="padding: 8px; color: var(--cyan); text-align: left;">age</th><th style="padding: 8px; color: var(--cyan); text-align: left;">city</th></tr>';
rows.forEach((row, i) => {
const inputs = row.querySelectorAll('input');
const name = inputs[0].value || '-';
const age = inputs[1].value || '0';
const city = inputs[2].value || '-';
html += `<tr style="border-bottom: 1px solid rgba(255,255,255,0.1);"><td style="padding: 8px;">${i}</td><td style="padding: 8px;">'${name}'</td><td style="padding: 8px;">${age}</td><td style="padding: 8px;">'${city}'</td></tr>`;
});
html += '</table>';
document.getElementById('output').innerHTML = html;
toast('Table generated! 🎉');
}
function clear() {
document.getElementById('rows').innerHTML = '';
document.getElementById('output').innerHTML = '<span style="color: #64748b;">Add rows and click "Generate Table" to see the output!</span>';
rowCount = 0;
toast('Cleared!');
}
</script>
</body>
</html>
Live Preview