HTML1-7. <col> <colgroup> 태그

1. <col> 태그란? 

Column 열 뜻합니다. 

col 태그는 한 열에 있는 모든 셀 같은 스타일을 적용할 때 사용합니다. 

닫는 태그는 사용하지 않습니다. 

 

또한, 두 개이상의 열을 묶어 스타일을 지정하라면 span 태그를 이용해 묶어 지정할 수 있습니다. 

지난번에 배웠던 caption을 table border="1" 적용해서 아래와 같이 만들어 보았습니다. 

 

2. <colgroup> 태그란?

 col 태그는 묶어서 사용할 수 있습니다. colgroup 태그안에 col 태그를 사용해서 묶어서 사용가능합니다. 

사용 시 주의사항:  tr, td, 태그 전에 사용해야 하며, caption 태그 뒤에 사용합니다. 

 

이젠 아래와 같은 테이블을 생성하겠습니다. 

 

CSS에서는 <style> </style> 태그 만들어주고, th, td 적당한 픽셀을 만들어 줍니다. 

 

저는 colgroup으로  묶어서 col 태그를 사용했습니다. th,td  태그에 widht,height 속성 크기가 없으면 

엄청 작게 표현되어서 CSS에서 Style를 통해 크기를 지정해 주었습니다. 

 

 

1.col 태그 하나만 있기 때문에  100 * 100 공간에 패딩 공간을 더해진 크기를 갖는 2개의 열이 생성되었습니다. 색이 없죠.

2. <col span="2" style="background-color: blue;">   다음 행에는 2개 열과 행에 파란색이 적용됩니다. 

3.<col style="background-color: yellow;"> 여기에서는 4행 노란색 배경이되는 2개의 열에 적용됩니다. 

테이블 생성하기 귀찮으시면  아래의 url 로 이동하시면 자동으로 html 소스를 생성합니다.

 

테스트 코드를 첨부하였습니다. 

2-9.colgroup.html

0.00MB

 

https://www.tablesgenerator.com/html_tables

HTML Tables generator – TablesGenerator.com

Table 탭에서 원하는 사이즈를 조정하시면 테이블 코드를 생성합니다. 

 

각 탭별로 속성을 지정할 수 있으니 테이블을 수동으로 생성하는 것 보다는 원하는 테이블을 생성할 때 도움이 될 것이라

생각됩니다. 

 

적당한 테이블을 만들어 보신 후 제목에 해당하는 컬럼에 색상을 지정해 보시는 건 어떨까요?

 

ps. table에 관련한 태그가 좀 지루합니다. 

다음 강에서는 이미지 태그에 대해 다루도록 하겠습니다. 

 

 

HTML1-6. 표 구조 정의 thead,tbody,tfoot