그림과 같은 4(행) × 4(열) 표를 만들려면 table 태그 안에 tr과 th, td 태그를 다음과 같이 작성합니다.
03/07/table-sample.html
<table>
<tr>
<th>번호</th>
<th>상품명</th>
<th>수량</th>
<th>가격</th>
</tr>
<tr>
<td>1</td>
<td>콜라</td>
<td>1개</td>
<td>1,500원</td>
</tr>
<tr>
<td>2</td>
<td>사이다</td>
<td>2개</td>
<td>1,000원</td>
</tr>
<tr>
<td>3</td>
<td>탄산수</td>
<td>3개</td>
<td>1,000원</td>
</tr>
</table>
수코딩의 조언
앞의 예제 코드를 작성해 실행하면 그림 3-34와는 다르게 테두리가 없는 상태로 출력됩니다. HTML에서 표는 기본으로 테두리가 없게 설정되어 있어서 그림 3-34처럼 보이게 하려면 CSS를 적용해야 합니다. 책에서는 이해를 돕기 위해 CSS를 적용한 실행결과를 보여 주지만, 아직 CSS를 배우지 않았으므로 따로 언급하지 않았습니다. CSS가 포함된 전체 코드가 보고 싶다면 이 책의 자료실에서 제공하는 예제 파일을 참고해 주세요.