[HTML 기초] 테이블 만들기

 

테이블을 만드는 기본 태그

	태그	역할
테이블 구성요소	<table>	테이블을 만드는 태그
	<th>	테이블의 헤드를 만드는 태그
	<tr>	태이블의 행(가로)을 만드는 태그
	<td>	테이블의 열(세로)을 만드는 태그
	<caption>	테이블의 제목을 만드는 태그

 

<활용 예시>

<!--기본 표-->
    <table border="1">
      <caption>부가세(VAT) 포함된 실제 지불금액입니다.</caption>
      <tr>
        <th>상품명</th>
        <th>제공혜택</th>
      </tr>
      <tr>
        <td>지상파 무제한 즐기기</td>
        <td>지상파 3사의 드라마, 예능 프로그램을 가장 빠르게 가장 경제적 서비스</td>
      </tr>
      <tr>
        <td>CJ ENM 무제한 즐기기</td>
        <td>모든 드라마, 예능 프로그램을 무제한 볼 수 있는 인기 월정액 서비스</td>
      </tr>
      <tr>
        <td>JTBC 무제한 즐기기</td>
        <td>JTBC의 드라마, 예능 프로그램을 무제한으로 즐길 수 있는 인기 월정액 서비스</td>
      </tr>
    </table>

 

가장 바깥쪽을 table 태그로 감싸주고

가로줄(행) 수 만큼 tr 태그를 만든 후, tr 안에 td로 세로 줄(열)을 만든다.

 

 

위의 결과로 이런 형태의 테이블이 나온다. 

<table bolder="1"> border="1"은 테이블 선을 1px 만큼 주겠다는 의미다.

써주지 않으면 선이 아예 나오지 않기 때문에 작성해주어야 하며

현재 선이 두 줄인 것은 css에서  border-collapse: collapse; 라고 작성해주면 선이 하나로 합쳐진다.

 

 

 

테이블 셀 병합

	속성	역할
셀 합치기	rowspan	가로와 맞닿아 있는 부분 병합
	colspan	세로와 맞닿아 있는 부분 병합

 

colspan과 rowspan이 어느 방향 병합인지 헷갈릴수 있으니 어느 부분과 맞닿아 있는지 생각하면 쉽다.

 

가로와 맞닿아있는 부분을 병합하는 rowspan

세로와 맞닿아 있는 부분을 병합하는 colspan