HTML Table에도 API가 있다는 사실을 아시나요?

• HTMLTableElement API는 오래전부터 존재하지만 거의 사용되지 않는 HTML 테이블 조작용 내장 인터페이스임
• 이 API를 사용하면 tbody, thead, tfoot, caption, row, cell 등을 직접 생성·접근할 수 있으며, 변경 시 전체 테이블을 다시 렌더링할 필요 없음
• 예시 코드에서는 중첩 배열 데이터를 테이블로 변환하고, insertRow()와 insertCell()을 통해 행과 셀을 추가하는 방법을 보여줌
• t.rows[1].cells[1]처럼 인덱스로 셀에 접근하거나, insertRow(-1)로 마지막 행 추가 등 다양한 조작 가능
• 작성자는 이 API가 데이터 구조로서의 테이블 기능 확장 가능성을 지니며, 폼(form)처럼 이벤트나 추가 기능을 부여할 여지가 있다고 언급

HTML 테이블 API 개요

• 대부분의 개발자는 DOM 메서드(createElement 등) 또는 innerHTML 문자열 삽입으로 테이블을 생성하지만, 후자는 보안 위험이 존재
• HTML에는 오래된 HTMLTableElement API가 있으며, 이를 통해 테이블의 본문, 행, 셀, 머리글, 바닥글, 캡션, 요약(summary) 등을 다룰 수 있음
• 이 API는 테이블 전체를 다시 렌더링하지 않고도 개별 요소를 조작할 수 있음

코드 예시: 배열로 테이블 생성

• 예시에서는 다음과 같은 중첩 배열을 테이블로 변환
  • [['one','two','three'], ['four','five','six']]
• document.createElement('table')로 테이블을 만들고, 각 행(insertRow)과 셀(insertCell)을 반복문으로 추가
• 각 셀의 내용은 innerText로 설정

셀 접근 및 수정

• 생성된 테이블의 셀은 인덱스 기반 접근 가능
  • 예: t.rows[1].cells[1] → <td>five</td>
• 행과 셀을 삭제하거나 새로 추가할 수도 있음
  • 예: t.insertRow(-1)로 마지막에 행 추가
  • t.rows[2].insertCell(0)으로 새 셀 생성 후 innerText = 'foo'로 값 지정

API의 한계

• insertRow(-1)처럼 비직관적인 인덱스 규칙 존재
• TH 요소를 직접 생성할 방법이 없음, 모든 셀이 TD로 처리됨

향후 확장 가능성

• 작성자는 테이블 생성이 번거로운 현실을 지적하며, 이 API를 재검토해 기능을 확장할 필요성을 제시
• HTML 폼에 formData나 change 이벤트가 추가된 것처럼, 테이블에도 이벤트나 고급 기능을 도입할 수 있다고 언급
• 이를 통해 테이블이 단순한 레이아웃 도구가 아닌 데이터 구조로서의 지위를 가질 수 있음