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
- Internet Explorer 12.0
- Firefox 34.0
- Opera
- Safari