HTML 기초강좌, 테이블 만들기 [테이블 여백지정, 병합태그, 배경지정]

HTML 기초강좌, 테이블 만들기 [테이블 여백지정, 병합태그, 배경지정]

쿠쿠리의 HTML 기초강좌! 

오늘은 예고를 해드린대로 테이블 태그에 대해서 알아보도록 하겠습니다.

테이블 태그는 홈페이지를 제작할 때 기본으로 사용되는 태그라고도 할 수 있습니다.

테이블을 통해서 구획을 나누고 구획별로 컨텐츠를 넣게 되는거죠.

지금은 간단한 테이블 만들기를 하겠지만 

나중에 홈페이지 제작 강좌를 쓸 때에는 그 활용도가 굉장히 높아질 태그라고 할 수 있겠습니다.

자 그럼 가장 기초적으로 테이블을 만드는 방법을 알아보겠습니다.

<table> <tr> <td>

테이블을 만들때 가장 기초가 되는 태그가 바로 <table> <tr> <td> 태그입니다.

<table> 태그는 테이블을 생성하는데 사용되며 가장 처음과 끝에 위치하게 됩니다. 

<tr>행 열기 태그라고 보시면 됩니다. <tr></tr> 사이에 들어가는 내용이 한 행에 표시됩니다.

<td>태그는 table date의 약자로 셀이라고 보시면 되는데요. 테이블의 블럭 하나를 셀이라고 부릅니다.

보통 <tr>태그 안에 <td>태그가 속해있습니다. 

위의 예시를 보시면 am 10:30으로 시작해서 학교운동장으로 끝나는 가로 줄이 1행입니다.

<tr></tr>태그 사이에 저 컨텐츠들이 들어가 있는거 보이시죠?

am10:30 / 수요일 / 학교운동장 이렇게 세가지 컨텐츠가 각각의 <td></td> 태그 안에 들어갑니다.

<th> col / row

보통 우리가 테이블을 이용해서 목록을 만들려면 머리말이 필요합니다.

<th>태그는 테이블의 머릿말을 만들 때 사용합니다.

<th>태그는 col 과 row 두가지가 있는데요.

열의 머리말을 만들때는 col 행의 머리말을 만들때는 row를 사용합니다.

위의 예시에 행의 머리말으로 col을 사용해서 시간 / 요일 / 장소를 지정해줬죠?

여기서 한가지! 머리말 왼쪽에 비어있는 공간 보이시죠? 표가 겹쳐지는 부분인데요.

저부분은 <th></th> 이렇게 채워주시면 됩니다. 텍스트 없이 그냥 빈 공간을 표현 할 수 있습니다.

열 병합하기 colspan

엑셀이나 워드 프로그램에서 표를 만들때에는 단축 기능들이 있어서 아주 간단하게

행과 열을 병합할 수 있습니다. 하지만 태그에서는 직접 지정을 해줘야 하는데요.

위의 예시를 보겠습니다. 시간표를 만든다고 가정했을 때 월요일 9~10시는 영어 수업이 연달아 있기 때문에

두칸을 영어로 지정해줬습니다. 이때 colspan 태그가 사용되는데요. col는 열을 의미하고 span은 병합을 의미합니다.

값을 2로 지정해서 두개의 열을 합쳐주었습니다. 아래 체육은 3칸의 열을 합쳤으니 값을 3으로 넣었구요.

현재까지는 테두리 및 선을 넣는 태그를 넣어 주지 않았기 때문에 아래 두 예시 중에서 위의 예시처럼

선과 테두리 없이 저렇게 표기가 됩니다.

병합된 셀을 보기쉽게 하기 위해 테두리가 있는 예시도 함께 첨부해드렸어요.

행 병합하기 rowspan

위에서 열 병합하기를 알아봤다면 이번에는 행을 병합하는 태그에 대해서 알아보겠습니다.

예시를 보시면 월~수요일 동안 am13 (pm1시로 표현해야 하는데 잘못적었어요 ㅋㅋ 그냥 그렇다고 치고)에는

자습을 하는 시간입니다. 그렇기 때문에 월/화/수요일의 행을 모두 병합해서 하나로 묶어줬는데요.

행 병합은 rowspan을 이용합니다. row가 행을 의미하고 span이 병합을 의미합니다. 값은 3을 줬네요.

3개의 셀을 합치기 때문에 3을 준겁니다. 2개를 합칠꺼라면 2를 넣으면 되겠죠?

테이블 너비, 여백 지정하기 width / cellpadding / cellspacing

요즘에는 테이블을 만들 때 css를 통해서 여백이나 너비를 조절합니다.

하지만 여전히 html을 통해서 직접 테이블 여백과 너비를 지정하기도 합니다.

테이블 여백은 <table> 태그에 추가합니다. 

제일 첫번째 단락에서 <table> 태그는 테이블을 생성하는 단위로 제일 처음에 쓴다고 말씀드렸는데요.

우선 width를 이용해서 테이블의 너비를 지정할 수 있습니다. 저는 500으로 지정했어요.

width 태그를 <td width=""> 에 적용시키면 해당 셀의 너비를 지정할 수도 있습니다.

예시에 보시면 식사열에 너비가 적용된거 보이시죠? 식사열만 너비를 고정하고 나머지 셀들은

500에서 60을 제외한 너비로 텍스트 길이에 따라서 자동 지정됩니다. 

cellpadding은 셀 내부의 여백을 말하며 cellspacing은 셀과 셀 사이의 여백을 말합니다.

사실 테이블의 테두리나 배경을 지정하지 않았기 때문에 예시 태그를 그대로 적용하면 제일 아래 캡쳐처럼

셀 여백의 구분이 가지 않습니다. 그래서 제가 임의로 테두리가 있는 예시를 첨부해뒀습니다.

저런식으로 셀 사이의 여백도 지정할 수 있습니다. 

테이블 배경색 지정하기 bgcolor

마지막으로 살펴볼 테이블 태그는 테이블의 전체 배경색과 부분 배경색을 지정하는 방법입니다.

테이블의 배경색은 bgcolor 태그를 이용해서 지정 할 수 있는데요.

<table bgcolor=""> 이런식으로 table 태그안에 넣으면 전체 테이블의 색깔을 지정 할 수 있습니다.

<tr>태그에 넣으면 행의 배경색을 지정할 수 있으며 <td>태그에 넣으면 각 셀의 배경색을 지정할 수 있습니다.

자! 여기까지 테이블을 만들고 배경을 지정하고 ~ 넓이를 설정하는 방법에 대해서 알아봤습니다.

사실 아무것도 모를 때는 어려운 것들이 조금씩 알기 시작하면 쉽게 느껴지는 법입니다.

조금씩 강좌를 통해서 쿠쿠리도 여러분도 지식의 폭이 넓어져서 전문가가 되기를 바랍니다!

다음 강좌에서는 폼 태그에 대해서 알아보도록 하겠습니다!

---