HTML 표(Table) 완벽 가이드: 단계별로 배우는 표 만들기

HTML 표는 데이터를 행과 열의 형태로 보여주는 요소입니다. HTML에서 표를 만들려면 <table> 요소를 사용하며, <tr>로 행을, <td>로 열(셀)을, <th>로 표의 머리글을 생성할 수 있습니다.

HTML 표란 무엇인가?

표는 행과 열을 활용해 데이터를 이해하기 쉽게 정리해 보여주는 도구입니다. 우리는 일상에서 버스 도착 시간을 알려주는 시간표부터, 먹는 음식의 성분표까지 매일 다양한 형태의 표를 접합니다.

HTML에서도 표는 데이터를 체계적으로 보여주는 방법으로 널리 사용됩니다. 이 글에서는 HTML 표의 기본 개념부터 여러 행과 열에 걸친 셀 병합, 그리고 표 스타일링 방법까지 예제와 함께 차근차근 살펴보겠습니다. 이 글을 끝까지 읽으면 HTML 표를 자유자재로 다룰 수 있게 될 것입니다.

HTML 표 만들기

표는 행과 열로 구성된 데이터의 집합입니다. 표를 사용하면 데이터 값들 사이의 관계를 한눈에 파악할 수 있다는 장점이 있습니다.

HTML에서 표는 <table> 요소로 정의하며, 그 안에서 다음 태그들을 사용할 수 있습니다:

• <tr>: 행(row) 생성
• <td>: 열(셀) 생성
• <th>: 표 머리글 생성

예를 들어 커피숍에서 판매하는 커피와 가격을 나열하는 표를 만든다고 가정해 봅시다. 이 표는 '커피'와 '가격' 두 개의 열과 세 개의 데이터 행이 필요합니다. 다음 코드로 이 표를 정의할 수 있습니다:

<table>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

위 코드를 실행하면 다음과 같은 표가 만들어집니다:

이 예제에서는 머리글 한 줄, 두 개의 열, 세 개의 데이터 행으로 구성된 표를 만들었습니다. 이제 코드를 하나씩 살펴보겠습니다.

먼저 <table> 태그로 웹 페이지에 표를 생성하도록 지시했습니다. 그다음 <tr> 태그로 행을 만들고, <th> 태그로 표의 열 머리글을 정의했습니다. 여기서 머리글은 'Coffee'와 'Price'입니다.

이후 세 개의 <tr> 태그를 추가해 커피 이름과 가격을 담은 세 개의 데이터 행을 만들었습니다. 각 <tr> 안에는 표의 열 셀을 나타내는 <td> 태그가 포함됩니다. 예를 들어 첫 번째 항목에서는 'Espresso'와 '$2.00'이 각각 <td> 요소로 표현됩니다.

표 스타일링

HTML 표에는 다양한 방법으로 스타일을 적용할 수 있습니다.

테두리(Border)

기본적으로 HTML 표에는 테두리가 없습니다. 따라서 표에 테두리를 표시하려면 CSS를 사용해야 하며, CSS의 border 속성을 활용하면 HTML 표에 테두리를 추가할 수 있습니다.

앞서 만든 표에 검은색 실선 테두리를 추가하고 싶다면 다음 코드를 사용하면 됩니다:

table, th, td {
	border: 1px solid black;
}

이 스타일을 표 코드에 적용하면 표 전체와 각 셀에 테두리가 생깁니다. 수정된 표는 다음과 같습니다:

테두리가 생기면서 표의 데이터를 읽기가 훨씬 수월해졌습니다. 하지만 위 스타일은 모든 셀에 개별적인 테두리를 적용하기 때문에 선이 겹쳐 보일 수 있습니다. 테두리를 하나로 합치고 싶다면 border-collapse 속성을 사용하세요. 다음 코드를 사용하면 됩니다:

table {
	border-collapse: collapse;
}

새로운 표의 모습은 다음과 같습니다:

보시는 것처럼 이제 표 전체가 하나의 테두리를 갖게 되어 훨씬 깔끔하게 표시됩니다.

머리글 정렬

기본적으로 머리글은 셀의 가운데에 정렬됩니다. 머리글을 셀의 왼쪽이나 오른쪽으로 정렬하고 싶다면 <th> 태그에 text-align 속성을 지정하면 됩니다(참고로 <th> 태그는 머리글을 지정할 때 사용합니다).

사용 코드는 다음과 같습니다:

th {
	text-align: left;
}

이 스타일을 앞서 만든 표에 적용하면 다음과 같은 표가 만들어집니다:

위 표에서는 열 머리글이 표의 왼쪽으로 정렬된 것을 확인할 수 있습니다.

HTML 표에 적용할 수 있는 스타일은 이 외에도 매우 다양하지만, 이 글에서는 테두리와 테두리 병합에 초점을 맞췄습니다. 앞으로 소개하는 예제에서도 이 스타일을 계속 사용해 데이터를 더 읽기 쉽게 만들겠습니다.

여러 행과 열에 걸친 셀 만들기

표를 작업하다 보면 하나의 셀이 여러 행이나 여러 열에 걸쳐야 하는 경우가 종종 있습니다.

예를 들어 앞서 만든 가격 열이 두 개의 열에 걸치도록 만들고 싶다면 colspan과 rowspan 속성을 사용하면 됩니다. rowspan은 여러 행에 걸친 셀을 만들 때, colspan은 여러 열에 걸친 셀을 만들 때 사용합니다.

다음은 colspan을 사용해 'Price' 열이 두 열에 걸치도록 만든 표의 예제입니다:

<table>
    <tr>
        <th>Coffee</th>
        <th colspan="2">Price</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>$2.00 (new)</td>
        <td>$2.00 (old)</td>
    </tr>
</table>

실행 결과는 다음과 같습니다:

'Price' 머리글이 두 열에 걸쳐 표시되는 것을 확인할 수 있습니다. 마찬가지로 rowspan을 같은 방식으로 사용하면 여러 행에 걸친 셀을 만들 수 있습니다.

예를 들어 메뉴에 있는 특정 커피의 상세 정보를 담은 표가 있다고 가정해 봅시다. 매월 마지막 날 고객 유치를 위해 적용되는 할인 가격과 일반 가격을 같은 'Price' 머리글 아래에 배치하고, 라벨로 두 가격을 구분해 표시하고 싶다면 다음 코드를 사용할 수 있습니다:

<table>
        <tr>
            <th>Coffee</th>
            <td>Espresso</td>
        </tr>
        <tr>
            <th rowspan="2">Price</th>
            <td>$2.00 (regular)</td>
        </tr>
        <tr>
            <td>$1.80 (discounted)</td>
        </tr>
</table>

실행 결과는 다음과 같습니다:

이 예제에서 'Price' 라벨이 두 행에 걸쳐 표시되는 것을 볼 수 있습니다.

표 머리글, 본문, 바닥글 정의하기

표를 작업할 때 데이터를 더 체계적으로 구조화하는 데 도움이 되는 세 가지 태그가 있습니다.

<thead> 태그는 표의 머리글을, <tbody> 태그는 표의 본문 내용을, <tfoot> 태그는 표의 바닥글을 정의할 때 사용합니다.

첫 번째 예제의 표를 활용해 어떻게 작동하는지 살펴보겠습니다. 커피숍에서 판매하는 모든 커피를 나열하는 표를 만들면서, 코드의 가독성을 높이기 위해 표의 머리글, 본문, 바닥글을 분리하고 싶다고 가정해 봅시다. 이 경우 다음과 같이 작성할 수 있습니다:

<table>
	<thead>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Last Updated</th>
			<td>January 9th, 2020</td>
		</tr>
	</tfoot>
</table>

이 표에서는 <thead>, <tbody>, <tfoot> 태그를 사용해 각각 표의 머리글, 본문, 바닥글을 정의했습니다.

<thead> 태그는 'Coffee'와 'Price' 머리글이 포함된 머리글 행을 구분하는 역할을 합니다. <tbody> 태그는 표의 주요 데이터인 커피 가격 정보가 담긴 행들을 저장합니다.

<tfoot> 태그는 표가 마지막으로 업데이트된 날짜를 나타내는 행을 저장합니다. 이 정보는 커피와 가격 목록의 항목이 아니기 때문에 바닥글 태그에 배치했습니다.

이 태그들은 선택 사항이지만, HTML 표를 더 체계적이고 명확하게 구조화하는 데 큰 도움이 됩니다.

HTML 표 제목(Caption) 추가하기

<caption> 태그는 표에 제목(caption)을 추가할 때 사용합니다.

<caption> 태그는 반드시 <table> 시작 태그 바로 뒤에 위치해야 합니다. 다음은 'Coffee Menu'라는 제목을 커피 목록 표에 추가하는 예제입니다:

<table>
	<caption>Coffee Menu</caption>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

실행 결과는 다음과 같습니다:

코드에서 <caption> 태그를 사용해 표에 'Coffee Menu'라는 제목을 추가했습니다.

마무리

표는 원하는 만큼 간단하게도, 복잡하게도 만들 수 있으며, 이 글에서는 HTML 표의 기본기를 익히는 데 필요한 거의 모든 내용을 다뤘습니다.

지금까지 HTML에서 표를 만드는 방법, 기본 스타일을 적용하는 방법, 표를 구조화하는 방법, 여러 행과 열에 걸친 셀을 만드는 방법, 그리고 표에 제목을 추가하는 방법을 알아봤습니다.

이제 여러분도 프로처럼 HTML 표를 다룰 준비가 되었습니다!