03. HTML로 표 만들기

HTML로도 표를 만들 수 있을까?!

<table>태그를 이용하여 표를 만들어 보자.

1. <table> 태그의 기본 구조

<table>
	<tr>
		<td>
		</td>
	</tr>
</table>

1) <table>태그의 속성

• border : 표의 선 굵기
  (표테두리 없이 나타나는 경우 border 디폴트가 0이기 때문, border 값을 설정해줘야 테두리가 보임)
  ex) <table border="1">

2) <tr>

• 세로줄(열)

3) <td>

• 가로줄(행)
• 각 셀 하나가 td, td 추가할수록 가로(행)로 셀이 늘어남

⭐⭐ 표의 셀 개수가 많아질수록 헷갈림
td : 가로 행(가로로 셀이 늘어남)
tr : 세로 열(세로로 열이 늘어남)

2. <table>태그로 복잡한 표 작성해보기
   (셀 병합)

1) 셀 병합 속성

• 가로로 셀 병합 : colspan="3"
• 세로로 셀 병합 : rowspan="3"
  => 이 속성은 <td>에 씀

ex)

• 4x4 표의 경우
  ㅡ1행(회색)의 2,3,4 셀을 병합(colspan="3")
  =>아랫줄은 평범한 1*4행으로 작성
  ㅡ2행(노랑)의 첫 셀에서 세로로 3줄을 병합(rowspan="3")
  =>3행부터는 (병합된 첫 셀 제외한) 2,3,4에 해당하는 td만 적으면 되는 것임

  1	2	3	4
  1	2	3	4
  1	2	3	4
  1	2	3	4

병합한 셀의 갯수만큼 행, 열의 전체 셀 갯수를 정확히 해야함
(내용 없어도 tr, td를 갯수에 맞춰서 적어야 함)

여기서 잠깐❗ 깨알 IT지식

• 각 태그마다 각각의 다양한 속성들을 알아보는 방법
  => 구글검색!!
  키워드 : 'html table 태그' or 'html table tag'