오늘은 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> 셀에 적용
직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면 아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사) (회원가입을 하시면 편리한 시간에 자세히 설명해드립니다)
'홈페이지제작 > HTML' 카테고리의 다른 글
HTML5 텍스트 /<p>~</p>, <br>에 관해서 (0) | 2017.10.30 |
---|---|
[HTML5 기초] 4.1 HTML5 텍스트 태그 학습 (0) | 2017.10.28 |
HTML5 문서의 기본 구조 (0) | 2017.10.26 |
HTML5의 이해 -2 (0) | 2017.10.25 |
HTML 5 는 HTML 보다 훨씬 더 Sementic 한 Web을 구성 (0) | 2017.10.25 |