HTML에서는 테이블 셀 안에 다른 HTML 태그를 손쉽게 추가할 수 있습니다. 핵심 규칙은 간단합니다. 추가하려는 태그는 반드시 <td> 태그 내부에서 열고 닫아야 한다는 것입니다.
예를 들어, 셀 안에 문단을 넣고 싶다면 <p>...</p> 태그를, 목록을 넣고 싶다면 <ul>...</ul> 태그를 <td>와 </td> 사이에 작성하면 됩니다.
사용 가능한 주요 태그
<td> 안에는 다음과 같은 다양한 태그를 자유롭게 사용할 수 있습니다.
- <p> : 문단(텍스트 블록) 삽입
- <ul>, <ol>, <li> : 순서 없는/있는 목록 삽입
- <a> : 하이퍼링크 삽입
- <img> : 이미지 삽입
- <span>, <div> : 인라인 또는 블록 요소로 텍스트 그룹화
예제
다음 코드를 실행하면 HTML 테이블의 셀(<td>) 안에 목록 태그인 <ul>...</ul>을 사용하는 방법을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; width: 400px; }
</style>
</head>
<body>
<h1> Total Points</h1>
<table>
<tr>
<th>Technologies</th>
<th>Points</th>
</tr>
<tr>
<td>Programming Languages
<ul>
<li>C++</li>
<li>Java</li>
<li>C</li>
</ul>
</td>
<td>100</td>
</tr>
<tr>
<td>Database
<ul>
<li>MySQL</li>
<li>Oracle</li>
<li>CouchDB</li>
</ul>
</td>
<td>50</td>
</tr>
</table>
</body>
</html>실행 결과 설명
위 예제를 브라우저에서 실행하면 두 개의 행으로 구성된 테이블이 출력됩니다.
- 첫 번째 행: 'Programming Languages' 셀 안에 C++, Java, C 세 항목으로 이루어진 글머리 기호 목록이 표시되며, 점수로는 100점이 나타납니다.
- 두 번째 행: 'Database' 셀 안에 MySQL, Oracle, CouchDB 목록이 표시되며, 점수로는 50점이 나타납니다.
이처럼 <td> 태그 안에 다른 HTML 태그를 중첩하면, 단순한 텍스트뿐 아니라 목록·링크·이미지 등 풍부한 콘텐츠를 테이블 안에 배치할 수 있습니다.