HTML :: TABLE 만들기, 열/행 병합 (colspan, rowspan)

 

※ <table></table> 관련 태그 정리

 

 

<table></table> 태그를 통해 표를 만들 수 있다.

 

<table border="1">
	<tr>
    	<th>이름</th>
        <th>학번</th>
    </tr>
	<tr>
    	<td>김철수</td>
        <td>2019323070</td>
    </tr>
</table>

 

 

해당 코드의 결과는 다음과 같다.

 

 

 

<tr>내용<tr> 

→ table row 의 약자로, 테이블의 가로(행 개수)를 구성한다.

 

 

<td>내용<td>

→ table date 의 약자로, 테이블의 세로(열 개수)를 구성한다.

 

 

<th>내용<th>

→ tabel head 의 약자로, 테이블의 세로(열 개수)를 구성하는 것은 <td>와 같지만,

테이블 컬럼의 제목을 구성한다. 디폴트로 중앙 정렬이 적용된다.

 

 

<table>태그 내에 style 속성을 지정할 수 있다.

위의 코드에서는 border 속성을 1로 주고 있다.

 

 

 

 

 

colspan / rowspan (테이블 열과 행 병합 태그)

 

테이블의 열이나 행을 병합하기 위해 colspan 속성과 rowspan 속성을 사용할 수 있다.

 

colspan 태그와 rowspan 태그를 처음부터 바로 사용하면 헷갈릴 수 있으니

기본 테이블을 먼저 구성한 뒤, 차례차례 합쳐나가는 형식으로 사용하자.

 

 

<table border="1">
		<tr>
			<td colspan="2">강남구</td>
			<td colspan="2">노원구</td>
		</tr>
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>상계동</td>
			<td>중계동</td>
		</tr>
</table>

 

 

colspan 태그는 해당 숫자의 개수만큼 열을 합친다.

rowspan 태그는 해당 숫자의 개수만큼 행을 합친다.

 

 

위의 코드의 결과는 다음과 같다.

 

 

 

테이블 관련 태그 정리 끗!