html 표만들기 태그를 정리입니다.
html 표 만들기 태그의 구조 예제
<table>
<tr>
<td> 값 </td>
.....
</tr>
<tr>
<td> 값 </td>
.....
</tr>
<table>
표는 행과 열로 구성되어 있다. HTML 문서라고 다를 것은 없다.
HTML 문서에서 표를 만들기 위해서는 세 개의 태그를 사용하는데 table 태그, tr 태그, td 태그다.
table 태그는 표의 시작과 끝을 알려주는 태그다. 실질적으로 table 태그가 표를 그려주는 것은 아니다.
tr 태그는 행을 그려준다. 앞에서 보여준 html 예제는 tr 태그가 두 번 사용되었다. 태그 시작과 끝을 포함해서 <tr> ... </tr> 을 한번으로 친다.
그리고 한 번의 tr 태그는 하나의 행을 만들어 준다. 따라서 앞에서 예로든 html 테이블은 두 개의 행을 가질 것다.
table 태그와 tr 태그만 있는 표는 다음과 같아야 한다.(하지만 실제 이렇게 표시되지는 않는다.)
하지만 실제로 위 그림처럼 표시되지 않고 다음과 같이 네모 표시가 될 뿐이다.
ㅁ
왜냐면 표가 제대로 정의되기 위해서는 td 태그까지 적용되어야 하기 때문이다.
td 태그는 각각의 행을 나누어주는 역할을 한다. 따라서 tr 태그 안에 넣어주어야 하고 tr 태그 안에 있는 td 태그가 개수가 해당 행의 열의 개수가 된다.
실제로 웹브라우저에는 
이렇게 td 태그는 각각의 행에서 열을 나누는 동시에 <td> 값 </td> 의 형태로 값을 넣는 기능까지 한다.
참고 : table 태그에 border 속성을 넣어서 테이블의 외곽선의 굵기를 정할 수 있다.
<table border="1">
....
</table>
border 속성이 없다면 테이블의 외곽선은 없다.
복잡한 표 만들기
n x m 형태의 표 말고 다음 그림과 같이 복잡한 형태의 표도 만들 수 있다.
이런 표를 만들기 위해서 colspan과 rowspan 속성에 대해서 이해해야 한다.
span의 뜻은 한 뼘, 또는 폭, 기간 등과 같이 길이를 의미한다. 따라서 colspan과 rowspan은 열과 행에 대한 길이를 의미할거라 짐작된다.
위와 같은 형태의 표를 만드는 소스를 먼저 살펴보자.
td태그의 속성으로 colspan과 rowspan값이 설정된다.
colspan="n"이라 하면 n개의 열을 합쳐서 쓴다는 말이다. 위에서는 처음 colspan="3"이므로 3개의 열의 크기에 하나의 값만 들어가게 된다. 이 이후 td 태그로 넣은 값들이 글을 읽는 방향으로 차례대로 채워진다.
tr 태그는 행을 나눌 뿐이다.
rowspan 속성이 와도 동일하다. 위 코드에서 rowspan="2"는 두 행을 하나로 쓴다는 말이다. 그 다음 td 태그에 의해 값5, 값6, ... 이 차례대로 채워지고 <tr>태그에 의해서 행이 나누어진다.
앞에서 rowspan으로 이미 쓰여진 칸을 재외하고 값9부터 차례대로 채워진다. 나머지는 쉽게 이해할 수 있을 것이다.
한 가지 더 colspan과 rowspan을 동시에 쓸 수도 있다. 어렵지 않으므로 생략한다.