HTML DOM console.table() 메서드는 잘 구성된 표 형식으로 데이터를 표시하는 데 사용됩니다. 이 방법은 복잡한 배열이나 객체를 시각화하는 데 사용할 수 있습니다. 테이블은 배열의 각 요소가 테이블의 행이 되는 방식으로 구성됩니다. tabledata(필수) 및 tablecolumns(선택 사항)의 두 매개변수를 사용합니다.

구문

다음은 console.table() 메서드의 구문입니다. -

console.table( tabledata, tablecolumns );

여기 -

• Tabledata는 필수 매개변수 값입니다. 테이블을 채우는 데 사용할 데이터를 나타냅니다. 객체 또는 배열 유형일 수 있습니다.

• Tablecolumns는 선택적 매개변수 값입니다. 테이블에 표시되어야 하는 열을 지정하는 배열 매개변수입니다.

예시

HTML DOM console.table() 메서드의 예를 살펴보겠습니다. -

console.table() 메서드

아래 버튼을 클릭하여 콘솔 테이블 생성
TABLE

콘솔 탭에서 테이블 보기

출력

이것은 다음과 같은 출력을 생성합니다 -

TABLE 버튼을 클릭하고 콘솔 탭에서 볼 때 -

위의 예에서 -

먼저 사용자가 클릭하면 createTable() 함수를 실행할 버튼 테이블을 만들었습니다.

표

createTable() 메서드에는 내부에 생성된 세 개의 객체 배열이 있습니다. 객체 배열의 이름은 각각 fruit1, fruit2 및 fruit3입니다. 그런 다음 콘솔의 table() 메서드에 첫 번째 매개 변수(tableData)로 개체 배열의 이름을 전달합니다.

두 번째 선택적 매개변수에서 열 이름을 배열로 전달하고 테이블에 포함하고자 합니다. "이름"과 "가격" 열을 지정했기 때문에; 이 열은 표에 표시되며 "색상" 열은 없습니다. −

function createTable(){ var fruit1 ={ Name:"Mango", price:"100", color:"Yellow" } var fruit2 ={ Name:"Guava", price:"50", color:"Green " } var fruit3 ={ 이름:"딸기", 가격:"150", color:"빨간색" } console.table([과일1, 과일2, 과일3], ["이름","가격"]);}