Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM console.table() Method
The HTML DOM console.table() method displays data in a well-organized tabular format in the browser's console. This method is particularly useful for visualizing complex arrays, objects, or arrays of objects in a readable table structure where each element becomes a row.
Syntax
Following is the syntax for the console.table() method −
console.table(tableData, tableColumns);
Parameters
The console.table() method accepts the following parameters −
-
tableData − A required parameter representing the data to display in the table. It can be an array, object, or array of objects.
-
tableColumns − An optional array parameter that specifies which columns to display in the table. If omitted, all properties are shown.
Using console.table() with Array of Objects
The most common use case is displaying an array of objects where each object becomes a table row.
Example
Following example demonstrates console.table() with an array of objects −
<!DOCTYPE html>
<html>
<head>
<title>console.table() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>console.table() Method Example</h1>
<p>Click the button to create a console table with fruit data:</p>
<button type="button" onclick="createTable()" style="padding: 10px 20px; font-size: 16px;">Create Table</button>
<p><strong>Note:</strong> Open the browser's Developer Tools (F12) and check the Console tab to view the table.</p>
<script>
function createTable() {
var fruit1 = { Name: "Mango", price: "100", color: "Yellow" };
var fruit2 = { Name: "Guava", price: "50", color: "Green" };
var fruit3 = { Name: "Strawberry", price: "150", color: "Red" };
console.table([fruit1, fruit2, fruit3], ["Name", "price"]);
}
</script>
</body>
</html>
When you click the button and check the console, you'll see a formatted table showing only the "Name" and "price" columns. The "color" column is excluded because it's not specified in the optional columns parameter.
???????????????????????????????????? ? (index) ? Name ? price ? ???????????????????????????????????? ? 0 ? "Mango" ? "100" ? ? 1 ? "Guava" ? "50" ? ? 2 ? "Strawberry" ? "150" ? ????????????????????????????????????
Using console.table() with Simple Arrays
The method also works with simple arrays, displaying each element with its index.
Example
<!DOCTYPE html>
<html>
<head>
<title>console.table() with Array</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>console.table() with Simple Array</h2>
<button onclick="showArrayTable()" style="padding: 8px 16px;">Show Array Table</button>
<p>Check the console to see the array displayed as a table.</p>
<script>
function showArrayTable() {
var colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
console.table(colors);
}
</script>
</body>
</html>
?????????????????????? ? (index) ? Values ? ?????????????????????? ? 0 ? "Red" ? ? 1 ? "Green" ? ? 2 ? "Blue" ? ? 3 ? "Yellow" ? ? 4 ? "Purple" ? ??????????????????????
Using console.table() with Objects
When used with a single object, console.table() displays the object's properties and values.
Example
<!DOCTYPE html>
<html>
<head>
<title>console.table() with Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>console.table() with Object</h2>
<button onclick="showObjectTable()" style="padding: 8px 16px;">Show Object Table</button>
<p>Check the console to see the object displayed as a table.</p>
<script>
function showObjectTable() {
var student = {
name: "John Doe",
age: 20,
grade: "A",
subject: "Computer Science"
};
console.table(student);
}
</script>
</body>
</html>
?????????????????????????????? ? (index) ? Values ? ?????????????????????????????? ? name ? "John Doe" ? ? age ? 20 ? ? grade ? "A" ? ? subject ? "Computer Science"? ??????????????????????????????
Browser Compatibility
The console.table() method is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, it only works when the browser's Developer Tools console is available and will be ignored in production environments where console methods are often disabled.
Key Points
-
The method only displays output in the browser's console, not on the webpage itself.
-
It automatically adds row indices for arrays and property names for objects.
-
The optional second parameter allows filtering which columns to display.
-
It's primarily used for debugging and development purposes.
-
The method gracefully handles various data types and structures.
Conclusion
The console.table() method is a powerful debugging tool that presents data in a clean, organized tabular format within the browser console. It's particularly useful for examining arrays of objects, simple arrays, and object properties during development, making complex data structures much easier to read and analyze.
304 Views
