Open In App
Related Articles

HTML DOM console table() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The console.table() method in HTML is used for writing data in tabular form in the console view. The table data is sent as a parameter to the console.table() method which must be an object or an array containing the data to be filled in the table. 

Syntax:

console.table( tabledata, tablecolumns );

Parameters: This method accepts two parameters as mentioned above and described below:

  • tabledata: It is a mandatory parameter that specifies the information to be written in the table.
  • tablecolumns: It is an optional parameter that specifies the names of the columns included in the table.

Example 1: The below program illustrates the console.table() method in HTML: 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>DOM console.table( ) Method in HTML</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM console.table( ) Method</h2>
    <p>
        To view the message in the console
        press the F12 key on your keyboard.
    </p>
    <p>
        To view the message, double click
        the button below:
    </p>
    <br>
    <button ondblclick="table_console()">
        View Table
    </button>
    <script>
        function table_console() {
            console.log
                ("GeeksforGeeks offers the following courses :");
            console.table
            (["fork python", "fork cpp", "fork java"]);
        }
    </script>
</body>
 
</html>

                    

Output:

 Example 2: Using an array of objects with the console.table() method

html

<!DOCTYPE html>
<html>
 
<head>
    <title>DOM console.table( ) Method in HTML</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM console.table() Method</h2>
    <p>
        To view the message in the console
        press the F12 key on your keyboard.
    </p>
    <script>
        let Product1 = {
            Product: "Coca Cola",
            Type: "Beverage"
        }
        let Product2 = {
            Product: "Lays",
            Type: "Potato Wafers"
        }
        let Product3 = {
            Product: "Walnut Brownie",
            Type: "Dessert"
        }
        let Product4 = {
            Product: "KitKat",
            Type: "Chocolate"
        }
        console.table
            ([Product1, Product2, Product3, Product4]);
    </script>
</body>
 
</html>

                    

Output: 

 Example 3: Displaying only specific columns with the console.table() method 

html

<!DOCTYPE html>
<html>
  
<head>
    <title>DOM console.table( ) Method in HTML</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM console.table( ) Method</h2>
    <p>
        To view the message in the console
        press the F12 key on your keyboard.
    </p>
    <script>
        let Product1 = {
            Product: "Coca Cola",
            Type: "Beverage"
        }
        let Product2 = {
            Product: "Lays",
            Type: "Potato Wafers"
        }
        let Product3 = {
            Product: "Walnut Brownie",
            Type: "Dessert"
        }
        let Product4 = {
            Product: "KitKat",
            Type: "Chocolate"
        }
        console.table
            ([Product1, Product2, Product3, Product4], ["Product"]);
    </script>
</body>
   
</html>

                    

Output:

Supported Browsers: The browsers are supported by the console.table() Methods are listed below:

  • Google Chrome 27 and above
  • Edge 13 and above
  • Firefox 34 and above
  • Opera 11 and above
  • Safari 7 and above


Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads