Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML | DOM console.table() Method

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 13 Jul, 2022
Improve Article
Save Article

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 accept two parameters as mentioned above and described below:

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

Below program illustrates the console.table() method in HTML: 

Example 1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM console.table( ) Method in HTML</title>
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </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:
  
Console View:
  
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;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </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>
        var Product1 = {
            Product: "Coca Cola",
            Type: "Beverage"
        }
        var Product2 = {
            Product: "Lays",
            Type: "Potato Wafers"
        }
        var Product3 = {
            Product: "Walnut Brownie",
            Type: "Dessert"
        }
        var Product4 = {
            Product: "KitKat",
            Type: "Chocolate"
        }
        console.table
            ([Product1, Product2, Product3, Product4]);
    </script>
</body>
 
</html> 
Output: 
 
Console View:
  
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;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </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>
        var Product1 = {
            Product: "Coca Cola",
            Type: "Beverage"
        }
        var Product2 = {
            Product: "Lays",
            Type: "Potato Wafers"
        }
        var Product3 = {
            Product: "Walnut Brownie",
            Type: "Dessert"
        }
        var Product4 = {
            Product: "KitKat",
            Type: "Chocolate"
        }
        console.table
            ([Product1, Product2, Product3, Product4], ["Product"]);
    </script>
</body>
 
</html>  
Output:
  
Console View:
  
Supported Browsers: The browsers supported by console.table() Method are listed below:
  • Google Chrome 27 and above
  • Edge 13 and above
  • Internet Explorer not supported
  • Firefox 34 and above
  • Opera 11 and above
  • Safari 7 and above

My Personal Notes
arrow_drop_up
Related Articles
1.
HTML | DOM HTML Object
2.
HTML DOM isEqualNode() Method
3.
HTML | DOM History go() Method
4.
HTML | DOM Input Date stepUp() Method
5.
HTML | DOM console.warn() Method
6.
HTML | DOM console.clear() Method
7.
HTML | DOM blur() Method
8.
HTML | DOM createElement() Method
9.
HTML DOM queueMicrotask() Method
10.
HTML | DOM Location replace() Method
Previous
HTML | DOM createTextNode() Method
Next

HTML DOM appendChild() Method
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
Shubrodeep Banerjee
@Shubrodeep Banerjee
Vote for difficulty
Current difficulty :
Basic





Improved By :
Article Tags :
Practice Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!