[HTML] #8 테이블 (테이블, 테두리, 열 합치기, 행 합치기, 테이블 제목 설정)

테이블 관련 태그들을 정리해보겠습니다!

 

---

테이블 태그

<table> : 테이블을 이루는 태그

<th> : table head, 제목을 적는 태그 (굵은 글씨체, 글이 중앙 정렬됨)

<tr> : table row, 테이블의 행을 만드는 태그 (글이 왼쪽 정렬됨)

<td> : table data, 내용을 적는 태그 (글이 왼쪽 정렬됨)

 

예시)

<table border="1">
	<tr>
		<th>열이름1</th>
		<th>열이름2</th>
		<th>열이름3</th>
	</tr>
	<tr>
		<td>내용1</td>
		<td>내용2</td>
		<td>내용3</td>
	</tr>
</table>

 

 

---

테이블 제목

 

<caption> : 테이블 제목을 적는 태그

 

예시)

<table border=1>
<caption>테이블 제목</caption>
<tr>
	<th>열이름1</th>
	<th>열이름2</th>
	<th>열이름3</th>
</tr>
<tr>
	<td>내용1</td>
	<td>내용2</td>
	<td>내용3</td>
</tr>
</table>

 

 

 

---

 

테이블 열 합치기, 행 합치기

<td colspan="합칠 열의 수"> : 입력한 수많은 가로로 셀을 합친다

<td rowspan="합칠 행의 수"> :  입력한 수만큼 세로로 셀을 합친다.

 

예시)

 

열 합치기

<table border=1 width=300px>
  <tr>
 	<td colspan="2">1</td>
 	<!-- <td>2</td> -->
  	<td>3</td>
  </tr>
  <tr>
  	<td>4</td>
  	<td>5</td>
  	<td>6</td>
  </tr>
</table>

 

---

행 합치기

<table border=1 width=300px>
  <tr>
      <td rowspan="2">1</td>
      <td>2</td>
      <td>3</td>
  </tr>
  <tr>
      <!-- <td>4</td> -->
      <td>5</td>
      <td>6</td>
  </tr>
</table>

---

열/행 합치기 응용

 

<table border=1 width=300px>
	<tr>
		<td rowspan="3">1</td>
		<td colspan="2">2</td>
		<!-- <td>3</td> -->
	</tr>
	<tr>
		<!-- <td>4</td>  -->
		<td colspan="2">5</td> 
		<!-- <td>6</td> -->
	</tr>
	<tr>
		<!-- <td>7</td> -->
		<td>8</td> 
		<td rowspan="2">9</td>
	</tr>
	<tr>
		<td>10</td>
		<td>11</td>
		<!-- <td>12</td>  -->
	</tr>
</table>

 

---

이상 테이블 태그에 대해서 알아보았습니다!