table은 전체 표를 담당하는 태그이고, tr은 표의 가로줄을, td는 각 칸을 담당합니다. 칸을 구별하려고 칸별로 아이디를 붙였습니다. 3줄 3칸으로 이루어진 표이므로 td 태그들을 이차원 배열로 구성하면 다음과 같습니다.

[
  [td00, td01, td02], 
  [td10, td11, td12], 
  [td20, td21, td22],
]

앞의 코드는 실제 코드가 아니라 이러한 형식으로 데이터를 구성하면 된다는 것을 보여 주기 위 한 임의 코드입니다. td00부터 td22까지의 변수는 document.querySelector('아이디')의 결과물이라고 보면 됩니다. 이렇게 태그를 저장하고 태그 안 값은 textContent로 가져옵니다.

이제 화면에 표를 직접 그려 보겠습니다. 표를 그리면서 각 칸(td 태그)을 이차원 배열에 담아야 하니 script 태그 안에 다음과 같이 작성합니다. document.body는 구조분해 할당으로 작성합니다.