#05 HTML 강좌 표만들기, 테이블 태그, 행 열 병합

안녕하세요 대남이입니다. 오늘은 html 테이블 태그를 이용하여 표 만들기를 배워보겠습니다.

표에 관한 태그도 배워놓으면 자주 유용하게 쓰일 수 있기때문에, 도움이 되실겁니다.

---

1. <table> 태그

일단 표를 정의 하는 태그는 <table> </table> 로 정의 됩니다. 그리고, 표는 행과 열로 표시되는건 모두 아실 겁니다.

일단 태그로 표를 정의하시고, 몇 X 몇 표로 할지 정하셔야합니다. 이때, 하나의 행을 정희하는 태그는 <tr>

하나의 열을 정의하는 태그는 <td>가 됩니다. 그러면 2X2의 표를 간단한 예시로 들어 보겠습니다.

tr로 하나의 행을 정의하고 td로 채워가는데, 일단 하나의 행을 정의하고 하나의 td를 쓸때마다 1행1열, 1행2열

이런식으로 채워간다고 생각하시면 쉽게 이해 하실 수 있습니다. 그러면 브라우저에는 다음과 같이 출력됩니다.

이런식으로 출력이 됩니다. 하나의 행 -> 하나의 행의 열 -> 그 다음.... 이런식으로 표가 채워진다고 이해하면 됩니다.

별로 어렵지 않죠? 이게 표만들기의 기초입니다.

---

2. <th> 태그

다음으로 배워볼 태그는 th인데 이 태그는 표의 열의 제목을 나타내는 태그입니다.

가령 앞서 보았던 예제에서 1열은 이름, 2열은 점수 를 나타냅니다. 이것을 적을 수 있는 태그입니다.

제가 간단히 코딩한 예를 보며 어떤 태그들을 어떻게 썼는지 한번 보겠습니다.

처음 1행 1,2,3열은 열들의 제목을 나타냅니다.

그리고 표는 3X3 표입니다. 처음 1행은 <th>태그로 채워하고, 그 다음 두번의 행을 더 입력하고, 세번의 열을 입력하면됩니다.

그럼 해당 페이지의 소스를 보시겠습니다.

위 사진에서 보이시나요? 처음 행은 <td>가 아닌 <th>로 입력 했습니다.

그 밑으로는 처음 예시와 같이 입력해주시면 됩니다. 

표를 만드실 때는 본인이 원하는 만큼 행과 열을 추가시켜주시면 됩니다.

그리고 저기 테이블을 만드는 태그에 <table border="1"> 이라고 나타나있는데 border은 표 테두리의 두께를 나타냅니다

만약 이 border이 0 이거나 입력하지 않으면 다음과 같이 나타나게됩니다.

이처럼 테두리가 없는 상태로 나타나게됩니다. 필요에 따라 테두리가 있게 만드셔도 되고, 없게 만드실 수도 있습니다.

그럼, 표를 만들때 행과 열을 병합시켜줘야할 때 가 있습니다. 그 부분에 대해 알아보겠습니다.

---

3.행과 열 병합 ( rowspan , colspan )

표에서 각 셀들은 필요에 따라 얼마든지 병합될 수 있습니다. 행을 병합시키는것 colspan을 입력해주면 되고,

열을 병합시키는것은 rowspan을 입력해주면 됩니다. 쉽게 말해 상하 셀들을 병합 시켜 줄 때는 colspan

좌우의 셀들을 병합시켜줄때는 rowspan를 사용합니다. 그럼 예시를 하나 들어보겠습니다.

이번 예시에서는 1행과 2행을 병합시키고, 3행의 모든 열을 병합시켜볼텐데 일단, 브라우저에 출력된 값부터 보겠습니다.

이렇게 1행 1열, 2행 1열이 병합되어 있고, 3행은 모두 병합되어 있습니다. 이 표를 만들 때 주의 할 것은

1행 1열과, 2행 1열 즉 상하를 병합할때는 위의 1행 1열을 기준으로 아래로 병합됩니다. 그렇기 때문에

2행은 두개의 <td> 태그만 사용합니다. 그리고 3행의 경우 3열을 모두 통합했기때문에 하나의 <td>태그만 사용합니다.

그럼 해당 페이지의 소스를 보겠습니다.

이렇게 첫번째 1행1열에 rowspan="2"를 입력하여 1행 1열과 2행 1열, 즉 하나의 행이 병합됩니다. 그리고 두 행이 병합되었기 때문에

두번째에 <td> 하나 적게 입력합니다. 그리고 "2"는 두개의 셀을 병합한다는 의미입니다. 이와 같이 3행에서 colspan="3"을 입력하면

3행의 1열 2열 3열 세개의 셀을 병합한다는 의미로써 하나의 td만 적어주면 됩니다. 그러면 좌우 3개의 셀이 병합됩니다.

-

이번 글에서 표만들기, 그리고 셀의 병합의 대해서 배워보았습니다. 유익학 정보가 되었으면 합니다.

다음번에도 더 유익한 정보와 강의로 찾아뵙겠습니다. 감사합니다 !