HTML | DOM console.table() 方法

HTML 中的console.table()方法用于在控制台视图中以表格形式写入数据。表数据作为参数发送到console.table()方法，该方法必须是一个对象或包含要填充到表中的数据的数组。

句法：

console.table( tabledata, tablecolumns );

参数：此方法接受上面提到和下面描述的两个参数：

• tabledata：强制参数，指定要写入表中的信息。
• tablecolumns：它是一个可选参数，用于指定表中包含的列的名称。

下面的程序说明了 HTML 中的 console.table() 方法：

示例 1：

  

    DOM console.table( ) Method in HTML
    
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

    GeeksforGeeks
    DOM console.table( ) Method
    
       To view the message in the console
       press the F12 key on your keyboard.
    
    
       To view the message, double click 
       the button below:
    
    
    
      View Table
    
    
        function table_console() {
            console.log
                ("GeeksforGeeks offers the following courses :");
            console.table
                ["fork python", "fork cpp", "fork java"]);
        }
    

  

输出：

控制台视图：

示例 2：通过 console.table() 方法使用对象数组。

  

    DOM console.table( ) Method in HTML
    
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

    GeeksforGeeks
    DOM console.table() Method
    
      To view the message in the console 
      press the F12 key on your keyboard.
    
    
        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]);
    

  
  

输出：

控制台视图：

示例 3：使用 console.table() 方法仅显示特定列

  

    DOM console.table( ) Method in HTML
    
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

    GeeksforGeeks
    DOM console.table( ) Method
    
       To view the message in the console
       press the F12 key on your keyboard.
    
    
        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"]);
    

  
   

输出：

控制台视图：

支持的浏览器： console.table()方法支持的浏览器如下：

• 谷歌浏览器
• 浏览器 12.0
• 火狐 34.0
• 歌剧
• 苹果浏览器