<colgroup>정리
# <colgroup>은 많이 사용하지 않는 태그같은데요. 정리해보았습니다.
* <colgroup>tag는 테이블에서 하나, 여러개의 칼럼의 형식을 정한다(<colgroup> tag specifies a group of one or more columns in a table for formatting.)
* <colgroup>tab는 각각의 cell, row에 style을 반복해서 적용하는대신에 전체칼럼(entire columns)에 style을 적용하는데 유용하다.
* <col>태그는 <colgroup>안에서 칼럼의 속성을 정하는데(각각의 칼럼마다 다른 속성을 주는 경우에) 사용되며, 마침태그가 없다.
* 예:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
colgroup {
display: table-column-group;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
*주의: <colgroup>tag는 <table>의 child이어야하며, <caption>다음에, <thead>, <tbody>, <tfoot>,<tr>앞에 위치한다.
*팁: <colgroup>안에 있는 각 칼럼마다 다른 속성을 주려면 <colgroup>안에서 <col>tag를 사용한다.
- 영카트5 사용예: mobile/skin/item.form.skin.php -
<div class="sit_ov_tbl">
<table >
<colgroup>
<col class="grid_2"><!--이칼럼에만 grid_2적용:간격이 좁아짐-->
<col>
</colgroup>
<tbody>
<?php if ($it['it_maker']) { ?>
<tr>
<th scope="row">제조사</th>
<td><?php echo $it['it_maker']; ?></td>
</tr>
<?php } ?>
<?php if ($it['it_origin']) { ?>
<tr>
<th scope="row">원산지</th>
<td><?php echo $it['it_origin']; ?></td>
</tr>
<?php } ?>
--- 중간코드 생략 ---
</tbody>
</table>
</div>
댓글 3개