표의 데이터 셀. tr 안에서 헤더(th) 외 모든 데이터 값을 담는다. 시리즈 #7에서 다룬 데이터 표의 핵심 단위.
SEO 관점에서 td의 내용이 검색의 표 데이터. 가격, 수치, 비교 항목이 모두 td 안에 있고 — Table Snippet에서 그대로 노출.
GEO 관점에서 AI 답변의 수치와 텍스트가 td에서 추출. "Basic 요금제 가격은?"에 Basic 행의 요금 열의 td 값이 답변. th + scope의 매핑으로 정확.
A11y 관점에서 스크린리더가 td 발화 시 해당 행/열의 th를 함께 발화. "Basic, 월 요금, 9900원". scope·headers로 헤더 매핑.
자주 보는 안티패턴: 헤더를 td로(시리즈 #7에서 다룬 — 첫 행/열은 th가 정답), rowspan·colspan 남용(복잡한 셀 병합은 시각·시맨틱·a11y 모두 복잡 — 진짜 필요한 경우에만), td 안 블록 요소가 너무 많음(p, ul, article이 들어가면 카드 그리드가 더 적절), 표 외부 td(부모 tr 없으면 무효).
rowspan과 colspan — 셀 병합. 시각적으로 같은 값이 여러 행/열에 걸침. 시맨틱은 한 셀이 여러 위치를 차지. 복잡한 표(여러 분기·지역의 다단계 헤더)에 활용.
headers 속성 — 복잡한 표의 셀과 헤더 명시 연결. scope만으로 부족할 때. <td headers="region q1">데이터</td> — 이 셀이 region과 q1 두 헤더에 속함.
td 안 콘텐츠 — flow content 모두 허용. 인라인부터 블록까지. 다만 너무 많은 콘텐츠가 들어가면 데이터 표가 아닌 카드 그리드가 시맨틱 정답.
빈 td — 데이터가 없거나 해당 없음일 때. CSS로 시각 처리(- 또는 빈 칸). 시맨틱은 빈 td. 접근성을 위해 <td><span class="sr-only">없음</span></td> 같이 명시도 가능.
<td> 안의 인터랙티브 — 셀 안의 버튼·링크. 표의 액션 열("편집", "삭제" 같은). 시맨틱 OK이지만 키보드 탐색이 복잡해질 수 있어 — 행 단위 액션은 행 끝에 한 액션이 단순.
도감의 상세 페이지에서 td 활용 가능성 — 4축(SEO/GEO/AEO/A11y) 점수를 표로 나타낼 수도 있지만 — 현재는 카드 4개로 처리. 시각적 카드가 더 명확하다는 디자인 결정. 만약 60개 태그 비교 표를 만든다면 — table + th + td가 정답.