HTML - 표 만들기, 행/열 병합하기

HTML로도 간단히 표를 만들 수 있다.

물론 디자인적 측면에서는 CSS의 도움이 필요하지만 HTML 표 만들기, 복습해보자! 

 

시작하기 이전에 맨날 봐도 헷갈리는 행과 열! 저만 그러냐구요

가로 행(엑셀에서 숫자 칸)

세로 열(엑셀에서 알파벳 칸) 

 

그래서 점선 표기된 부분은 11행X2열짜리 표이다. 

행과 열은 한자로도 헷갈리지 않고, 영어로도 헷갈리지 않는데 표로 생각하면 헷갈리기 시작함ㅋㅋ

 

아무튼 html에서 표 만들때 필요한 태그는 이렇게 된다. 

 

가로 행row  <tr>
세로 열column  <td>
표에서의 제일 윗 행 부분은 <th>

2행X2열짜리 표를 만들 때 예시이다.

눈치가 빠르다면 알겠듯이 행이 항상 먼저 나온다. 그래서 열<td>가 행<tr>의 하위 개념으로 코드가 짜여진다. 

 

 

2행X3열짜리와 3행X2열짜리의 html 코딩 예시인데, n행짜리면 <tr> 태그가 n개 만큼 필요하고 n열짜리면 하나의 <tr>태그 안에 <td>태그가 n개 만큼 필요하다고 생각하면 된다. 

 

 

그리고 표에서의 행과 열 병합도 배웠는데, 이것 역시 헷갈릴 수 있지만 정신만 똑띠 차리면 우린 할 수 있다ㅋㅋ

 

<td rowspan="갯수">뭐 남길거니?</td>  ----> 행 합칠때, 합칠 행 갯수

<td colspan="갯수">뭐 남길거니?</td>  ----> 열 합칠때, 합칠 열 갯수

행/열 합친 후에는 합쳐진 부분의 <td>는 지워야 한다.

 

빨간 부분을 1을 남기고 합치고 싶을 때: 1,2,3 세로열 3칸을 합치는 것이다. <td colspan="3">1</td>

초록 부분을 딸기를 남기고 합치고 싶을 때: D,딸기,2 가로행 3칸을 합치는 것이다. <td rowspan="3">딸기</td>

 

 

어디 해 본 결과를 볼까요?

 

 

이렇게 한 번 개념을 머리로 보고, 직접 이것저것 다 만들어보는게 짱이다..ㅠ