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 accepts two parameters as mentioned above and described below:
- tabledata: It is a mandatory parameter that specifies the information to be written in the table.
- tablecolumns: It is an optional parameter that specifies the names of the columns included in the table.
Example 1: The below program illustrates the console.table() method in HTML:
HTML
<!DOCTYPE html> < html > < head > < title >DOM console.table( ) Method in HTML</ title > < style > h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ 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 ("w3wiki offers the following courses :"); console.table (["fork python", "fork cpp", "fork java"]); } </ script > </ body > </ html > |
Output:
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; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >DOM console.table() Method</ h2 > < p > To view the message in the console press the F12 key on your keyboard. </ p > < script > let Product1 = { Product: "Coca Cola", Type: "Beverage" } let Product2 = { Product: "Lays", Type: "Potato Wafers" } let Product3 = { Product: "Walnut Brownie", Type: "Dessert" } let Product4 = { Product: "KitKat", Type: "Chocolate" } console.table ([Product1, Product2, Product3, Product4]); </ script > </ body > </ html > |
Output:
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; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >DOM console.table( ) Method</ h2 > < p > To view the message in the console press the F12 key on your keyboard. </ p > < script > let Product1 = { Product: "Coca Cola", Type: "Beverage" } let Product2 = { Product: "Lays", Type: "Potato Wafers" } let Product3 = { Product: "Walnut Brownie", Type: "Dessert" } let Product4 = { Product: "KitKat", Type: "Chocolate" } console.table ([Product1, Product2, Product3, Product4], ["Product"]); </ script > </ body > </ html > |
Output:
Supported Browsers: The browsers are supported by the console.table() Methods are listed below:
- Google Chrome 27 and above
- Edge 13 and above
- Firefox 34 and above
- Opera 11 and above
- Safari 7 and above
Contact Us