HTML5 표 관련 태그

 

오늘은 HTML5 표 관련 태그

<caption>~</caption>과 colspan, rowspan 속성

그리고 scope 속성에 대해서 설명 드리겠습니다.

1. <caption>~</caption>

이 태그는 표에 제목을 붙이는 태그입니다.

위의 사진의 빨간 박스안에 처럼

<table>~</table>태그 안에

<caption>~</caption> 태그를 작성 하시고

그 사이에 원하는 제목을 입력하시면 됩니다.

2. colspan 속성

이 속성은 <table>~</table>을 이용해서

작성된 표의 열을 합치는 속성입니다.

<td colspan="합칠 열의 개수">~</td>,

<th colspan="합칠 열의 개수">~</th>

 

3. rowspan 속성

이 속성은 <table>~</table>을 이용해서

작성된 표의 행을 합치는 속성입니다.

<td rowspan="합칠 행의 개수">~</td>,

<th rowspan="합칠 행의 개수">~</th>

위의 사진에서

1번은 rowspan 속성을 이용해서 표의 열을 합쳐 준것이고

2번은 colspan 속성을 이용해서 표의 행을 합쳐 준것입니다.

4. scope 속성

이 속성은 <th>~</th> 태그에 사용되는 속성으로

화면 상으로는 아무 변화가 없지만

셀의 제목이 어디까지 영향을 미치는지 지정을 해주어서

웹 브라우저가 표의 내용을 정확하게 이해할 수 있도록 하기 위한 것입니다.

<th scope="속성값">~</th>

 

 row
 
 <th> 태그가 있는 행의 나머지 셀에 적용
 

 col
 
 <th> 태그가 있는 열의 나머지 셀에 적용
 

 rowgroup
 
 <th> 태그가 있는 행 집합의 나머지 모든 셀에 적용
 

 colgroup
 
 <th> 태그가 있는 열 집합의 나머지 모든 셀에 적용
 

 auto
 
 소스를 기본으로 해서 <th> 셀에 적용

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

(회원가입을 하시면 편리한 시간에 자세히 설명해드립니다)