-
Tag - 테이블(table) 관련 4프론트엔드/HTML 2020. 8. 19. 03:53
<col>과 <colgroup>
일반적으로 테이블을 만드는 태그를 쓸 때 <tr>을 써주게 되면서 가로줄인 행을 기준으로 테이블의 구조를 짜게 된다.
그렇다보니 스타일을 지정할 때 열(column)만 따로 묶어서 표현하기 힘든 점이 있다.
그래서 생긴 것이 <col>과 <colgroup>이다.
<col>과 <colgroup>의 적용
구분
빨강 배경
파랑 배경
녹색 배경
구분2
빨강 배경
파랑 배경
녹색 배경
위와 같은 테이블을 만든다고 상상해보자.
<body> <table> <colgroup> </colgroup> <tr> <td>구분</td> <td>빨강 글씨</td> <td>파랑 글씨</td> <td>녹색 글씨</td> </tr> <tr> <td>구분2</td> <td>빨강 글씨</td> <td>파랑 글씨</td> <td>녹색 글씨</td> </tr> </table> </body>세로 줄 단위로 스타일을 적용하고 싶다면 우선 <colgroup> 태그를 <table> 태그 안(<table>과 <tr> 사이)에 넣어준다.
<body> <table> <colgroup> <col> <col style="background-color: red;"> <col style="background-color: blue;"> <col style="background-color: green;"> </colgroup> <tr> <td>구분</td> <td>빨강 글씨</td> <td>파랑 글씨</td> <td>녹색 글씨</td> </tr> <tr> <td>구분2</td> <td>빨강 글씨</td> <td>파랑 글씨</td> <td>녹색 글씨</td> </tr> </table> </body>그리고 세로 줄의 의미하는 <col> 태그 4개를 <colgroup>안에 넣어준다.
한 개의 <col> 태그는 테이블에서 1개의 열을 의미한다.
이제 <col>에 다양한 스타일을 적용하면 된다.
'프론트엔드 > HTML' 카테고리의 다른 글
Tag - 링크 관련 (0) 2020.08.19 Tag - 이미지(image) 관련 (0) 2020.08.19 Tag - 테이블(table) 관련 3 (0) 2020.08.19 Tag - 테이블(table) 관련 2 (0) 2020.08.19 Tag - 테이블(table) 관련 (0) 2020.08.19