[컴퓨터언어] 태그로 표 만들기 (HTML 공부하기!) - 7

태그를 이용해서 표를 만들 수 있다는 사실을 알고 계셨나요? 뭐 항상 하는 말이지만, 대부분의 에디터에는 표를 만드는 기능이 들어가 있어서 우리가 직접 태그를 이용해서 표를 작성하는 경우는 많이 없습니다. 또한 표의 테두리를 만들려면 CSS까지 알아야 하기 때문에 여간 복잡한 게 아닙니다. 그렇기에 오늘은 표 중에서도 기본표를 만드는 태그에 대해 알아보겠습니다. 표에 대해서는 다룰 수 있는 사항은 많지만 천리길도 한 걸음씩 간다는 생각으로 굉장히 쉬운 부분부터 시작하겠습니다. 이번 포스팅뿐만 아니라 몇 번의 포스팅을 더 써서 표에 대해 더 어려운 내용까지 알려드리도록 하겠습니다.

 

목차
1. 표에 대해 알아야 하는 사실
2. 기본표 만들기
3. 조금만 더 확장하기

---

◆ 표에 대해 알아야 하는 사실

			빨강빨강빨강빨강
파랑파랑파랑파랑	파랑파랑파랑파랑	파랑파랑파랑파랑	파랑파랑빨강빨강	파랑파랑파랑파랑
			빨강빨강빨강빨강
	4행 2열		빨강빨강빨강빨강

위 표에서 행과 열이 무엇인지 알고, 셀의 개수를 구하실 수 있으신가요? 기본적으로 행과 열의 개념은 엑셀에 대해 조금이라도 공부를 하신 분이라면 알고 계신 그대로입니다.

행은 파란색으로 표시된 부분이고 열은 빨간색으로 표시된 부분이며 셀은 저 표의 한 칸 그 자체입니다. 위의 표의 경우에는 행이 4개. 열이 5개 셀은 20개라고 답하시면 됩니다. 그렇기에 '4행 2열'이라고 글자가 적인 셀은 '4행 2열의 위치에 있는 셀'이라고 표현할 수 있습니다.

 

추가적으로 오늘 배운 태그만을 사용해서 표를 작성하실 경우, 아마 테두리가 만들어지지 않고 레이아웃만 있는 표가 만들어질 것입니다. 이는 지극히 정상적인 것으로, 만약 테두리를 설정하고 싶으시다면 CSS를 이용해서 설정하셔야 합니다. 아직 CSS에 대해서는 다루지 않기 때문에 나중에 CSS포스팅을 참고해주시면 감사하겠습니다.

 

 

◆ 기본표 만들기

표에 대한 기초개념을 알았다면 이제는 태그를 이용하셔서 표를 만들 수 있습니다. 표를 만드는 단계는 크게 4가지 단계입니다. 우리가 일반적으로 표를 그릴 때를 생각해보면 쉽게 단계를 이해하실 수 있습니다. 평소에 표를 그리려면 가로줄 몇 개인지 세로줄 몇 개인지 생각을 한 후 자를 이용해서 필요한 개수만큼 줄을 긋습니다. 그리고 만들어진 표 위에 글자를 씁니다. 웹에서 표를 쓸 때도 이 과정과 아주 크게 다르지는 않습니다.

1. <table> 태그를 사용해 표를 만들 자리를 만든다.
2. <tr> 태그를 사용해 행을 만들고
3. <td> 태그를 사용해 행마다 몇 개의 셀이 들어가는지 적고
4. <td> 태그 사이에 텍스트를 입력한다.

백문이 불여일견. 크게 어렵지 않으니 아래의 표를 만드는 소스코드를 통해 감을 잡으시기 바랍니다.

 

텍스트1	텍스트2	텍스트3
텍스트1	텍스트2	텍스트3

 

 

<table>
	<tr>
		<td>텍스트1</td>
		<td>텍스트2</td>
		<td>텍스트3</td>
	</tr>
	<tr>
		<td>텍스트4</td>
		<td>텍스트5</td>
		<td>텍스트6</td>
	</tr>
</table>

---

◆ 조금만 더 확장하기

1. 제목 셀 만들기

표를 작성하다 보면 첫 번째 행이나 열의 텍스트를 굵게 표시하고 가운데 정렬을 하는 경우가 많습니다. 우리는 텍스트를 굵게 표시하고 가운데 정렬이 해야 하는 셀을 제목 셀이라고 부르겠습니다.

이 태그에 대해 알지 못하시는 분들은 표를 만들고 제목 셀을 직접 바꾸어서 설정합니다. 하지만, 제목 셀을 태그 하나만 수정해서 만들 수 있습니다. 바로 제목 셀로 사용할 셀을 <td> 태그가 아니라 <th> 태그로 작성할 경우입니다. <th> 태그를 작성하면 해당 셀은 자동으로 제목 셀로 설정되어 텍스트가 굵고 가운데 정렬이 됩니다.

 

2. 열 합치기

그렇다면, 열을 합치고 싶은 경우에는 어떻게 해야 할까요? 바로 <td> 태그나 <th> 태그 안에 <colspan> 속성을 작성해 넣는 방법을 사용합니다. <colspan> 속성은 열을 합치는 속성입니다. 사용방법이 그리 어렵지 않기 때문에, 아래의 표를 만드는 소스코드를 보고 감을 잡으시면 될 것 같습니다. 아래 태그에서 <td> 태그 대신 <th> 태그를 사용해도 무방합니다. 텍스트 스타일만 달라질 뿐입니다.

~~	~~
~~	~~	~~

<table>
	<tr>
		<td> ~~ </td>
		<td colspan="2"> ~~ </td>
	</tr>
	<tr>
		<td> ~~ </td>
		<td> ~~ </td>
		<td> ~~ </td>
	</tr>
</table>

 

3. 행 합치기

열을 합쳤다면, 이제는 행을 합치는 속성입니다. 열을 합치는 것과 다른 것은 모두 동일하고 속성 태그만 다릅니다. 열을 합치는 속성 태그는 <rowspan> 태그입니다. 행을 합치고 싶으면 <colspan> 태그를. 열을 합치고 싶으면 <rowspan> 태그를 사용하면 됩니다. 참고로 열은 영어로 Column이고 행은 영어로 Row이기 때문에 태그의 이름이 이렇게 지어졌습니다. 마찬가지로 소스코드를 통해 감을 잡으시면 될 것 같습니다.

~~	~~	~~
	~~	~~

<table>
	<tr>
		<td rowspan="2"> ~~ </td>
		<td> ~~ </td>
		<td> ~~ </td>
	</tr>
	<tr>
		<td> ~~ </td>
		<td> ~~ </td>
	</tr>
</table>

 

---

태그로 표를 만드는 방법에 대해 알아보았습니다. 정말 기본표에 대해서만 알아보았지만, 추후에 좀 더 난이도가 있는 내용을 다룰 예정이니 기대해주셔도 됩니다. 계속해서 말하는 것이지만, 에디터를 사용할 경우 HTML에 직접 소스를 작성해서 사용하실 필요는 없습니다. 에디터에 없는 기능만 집중적으로 공부해두시고 활용하시면 될 것 같습니다. 오늘 내용에서는 제목 셀을 지정하는 <th> 태그에 대해서만 알아가셔도 큰 이득이라 생각합니다.