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:
<!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.
<!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
<!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
- Apple Safari
- Firefox 34.0
- Opera
- Internet Explorer 12.0
leave a comment
0 Comments