HTML | DOM console.table() Method
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
Please Login to comment...