[HTML] table 태그 (colspan / rowspan / border-collapse)

[HTML]
table 태그 (colspan / rowspan / border-collapse)

---

✔️ table 태그

테이블 태그로, 테이블(표)를 정의할 때 사용하는 태그다.

<tr> : 테이블의 행을 나타내며, <td> 와 <th>  등 열을 결정하는 태그를 포함한다.

<td> : 테이블 데이터를 나타냄

<th> : 테이블 헤더를 나타냄

 

✨ 테이블은 <caption> , <col> , <colgroup>, <thead> , <tfoot> , <tbody> 태그 포함 가능!

✨ 이때 , thead 와 tfoot 요소는 단 한 번만 사용 가능하다.

thead 부분	thead 부분	thead 부분
tbody	tbody	tbody
tfoot	tfoot	tfoot

 

<table border="1" style="width: 400px;">
<!-- border : table 및 td 에게 선border를 주는 것이다. -->
<!-- th:제목표시, 진하게, 가운데 정렬 -->
<!-- td: 내용 -->
<!-- tr: 행표시 (th와 td가 들어옴) -->
<!--  안주면 tbody 가 들어간다. (생략가능) -->

	<tr>
		<th>제목1</th>
		<th>제목2</th>
		<th>제목3</th>
		<th>제목4</th>
		
	</tr>
	<tr>
		<td>A</td>
		<td>B</td>
		<td>C</td>
		<td>D</td>
		
	</tr>
	<tr>
		<td>E</td>
		<td>F</td>
		<td>G</td>
		<td>H</td>
		
	</tr>

</table>
<br><hr>

💡 border 는 table 및 td 에게 선border를 주는 것이다.

 

📓 table 태그 종류

 <tr> ~ </tr>

: 테이블 행 태그로 테이블 태그 내에 행을 정의한다.

✨ 속성 : align (콘텐츠 정렬을 지정) / height (행의 높이를 픽셀로 지정)

 

<td> ~ </td>

: 테이블 데이터 태그로 <tr> 안에 기술하며 컬럼을 정의한다.

✨ 속성 : align (콘텐츠 정렬을 지정) / colspan, rowspan 등 / valign (셀 내용의 수직 정렬을 정의) / width (너비를 지정) / height (높이를 지정)

 

<th> ~ </th>

: 테이블 헤더 태그로 셀의 제목을 정의한다.

✨ 기본적으로 굵게 표시되며 가운데 정렬됨! 속성은 <td> 태그와 동일하다.

 

<col>

: 컬럼 태그

: 하나 이상의 행을 나타내며, 자식 요소가 없는 빈 요소이다.

 

 

---

✔️ <colspan>

: 가로로 합치는 열 수 지정

<!-- colspan : 가로로 합치는 열 수 지정  -->
<table border="1" style="width: 300px;">
	<tr>
		<!--  width 를 위랑 아래랑 다르게 줄 수 없으니, 첫번째만 주면 된다.! -->
		<td width="80">A</td>
		<td width="80">B</td>
		<td>C</td> <!-- 나머지 값 냠냠. width="140"과 동일 -->	
		<td>D</td>
		
	</tr>
	<tr>
		<td>E</td>
		<td colspan="2">F</td>
		<td>G</td>
	</tr>
	<tr>
		<td>E</td>
		<td colspan="2">F</td>
		<td>G</td>
	</tr>
	<tr>
		<td>H</td>
		<td colspan="3">I</td>
		
	</tr>
	

</table>
<br><hr>

 

✔️ <rowspan>

: 세로로 합치는 행수 지정

<!-- rowspan : 세로로 합치는 행수 지정 -->
<table border="1" style="width: 300px;">
	<tr>
		<td>A</td>
		<td>B</td>
		<td>C</td> 
		<td>D</td>
		
	</tr>
	<tr>
		<td>E</td>
		<td rowspan="2">F</td>
		<td>G</td>
		<td>H</td>
	</tr>
	<tr>
		<td>I</td>
		<td colspan="2">I</td>
		
	</tr>
	
	
</table>
<br><hr>

 

✔️ <border-collapse>

: 선의 표시 방법 지정하는 태그이다.

: 테두리는 border 속성으로 구체적인 테두리선의 스타일을 지정해줘야한다.

: tr 요소는 기본적으로 스타일의 border 속성을 이용해 테두리 지정이 불가하다.

: border 속성 이용해 테두리 설정하려면 table 요소의 스타일에 border-collapse: collapse; 지정이 필요하다.

<!--  border-collapse : 선의 표시 방법 지정. -->
<table border="1" style="width: 300px; margin: 20px auto; border-collapse: collapse;">
	<caption>테이블 예제</caption>
	<tr align="center">
		<td>A</td>
		<td>B</td>
		<td align="right" style="padding-right: 5px;">C</td> 
		<td>D</td>
		
	</tr>
	<tr align="center">
		<td>E</td>
		<td rowspan="2">F</td>
		<td>G</td>
		<td>H</td>
	</tr>
	<tr align="center">
		<td>I</td>
		<td colspan="2">I</td>
		
	</tr>
	
	
</table>
<br><hr>

 

✔️ <caption> ~ </caption>

: 테이블 제목 설명 태그이다.

: 테이블의 제목이나 특성을 설명한다.

: 반드시 <table> 태그 안에 들어가야함