HTML 테이블 모델은 작성자의 도움을 받아 사용자 에이전트가 렌더링을 시작하기 전에 모든 데이터를 기다릴 필요 없이 점진적으로(즉, 테이블 행이 도착할 때) 테이블을 점진적으로 렌더링할 수 있도록 설계되었습니다. CSS를 사용하여 전체 테이블 또는 개별 테이블 셀(또는 둘 다)에 테두리를 추가할 수 있습니다. 테이블에 추가하면 테이블 외부의 테두리가 생성되지만 각 셀 주위에는 테두리가 생성되지 않습니다. 따라서 그리드와 같은 효과를 얻지 못합니다. 패딩을 지정하지 않으면 테이블 셀이 패딩 없이 표시됩니다. 사용자는 또한 하나 이상의 셀에 대한 정보를 원할 수 있으며, 이 경우 헤더 수준에서 제공된 헤더 정보(헤더, 범위 및 abbr)는 적절한 컨텍스트를 제공하지 않을 수 있습니다. 며칠 동안 두 위치(산호세와 시애틀)에서 식사, 호텔 및 운송 비용을 분류하는 다음 표를 고려하십시오: HTML 테이블 구성은 시작 테이블 태그,

및 끝 사이의 표를 설명하는 것으로 구성됩니다. 테이블 테이블 태그,
. 이러한 태그 사이에 는 행의 각 행과 각 셀을 생성합니다.

이렇게 하려면 먼저 시작 행 태그, 로 행을 시작한 다음 시작 셀 태그를 사용하여 각 셀을 만들고 해당 셀에 대한 데이터를 추가한 다음 끝 셀 태그로 셀을 닫아. 행에 대한 모든 셀을 완료하면 행을 종료 행 태그로 닫고. 그런 다음 각 새 행에 대해 행을 시작하고 행의 각 셀을 빌드하고 행을 닫는 과정을 반복합니다. 이 모듈에서는 CSS에 중점을 두지 않지만 스타일 지정 없이 테이블을 기본값보다 더 읽기 쉽게 만들 수 있는 최소한의 CSS 스타일시트를 제공했습니다. 여기에서 스타일시트를 찾을 수 있으며 스타일시트를 적용하는 HTML 템플릿을 찾을 수도 있습니다. 그러나 테이블에 고정 너비가 없는 경우 사용자 에이전트는 테이블에 필요한 가로 공간을 결정하기 전에 모든 테이블 데이터를 수신해야 합니다. 그런 다음에야 이 공간을 비례 열에 할당할 수 있습니다. 이 행이 자라지 않도록 하고 후속 셀을 두 번째 행에 배치하려면
요소(`tr`는 `테이블 행`을 의미합니다)를 사용해야 합니다.

지금 이것을 조사해 봅시다. 다른 테이블 안에 하나의 테이블을 사용할 수 있습니다. 테이블 데이터 태그 내부의 거의 모든 태그를 사용할 수 있습니다. 다음 예제에서 cellspacing 특성은 셀을 서로 분리하고 테이블 프레임에서 20픽셀씩 분리해야 한다고 지정합니다. 셀패딩 특성은 셀의 위쪽 여백과 셀의 맨 아래 여백이 각각 사용 가능한 수직 공간의 10%(총 20%)로 셀내용과 분리되도록 지정합니다. 마찬가지로, 셀의 왼쪽 여백과 셀의 오른쪽 여백은 각각 사용 가능한 수평 공간의 10%(총 20%)로 셀의 내용물으로부터 분리됩니다.