<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개
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2664 |
선택과집중
|
4개월 전 | 572 | |
| 2663 |
|
4개월 전 | 619 | |
| 2662 |
|
4개월 전 | 574 | |
| 2661 |
선택과집중
|
4개월 전 | 508 | |
| 2660 | 4개월 전 | 588 | ||
| 2659 |
Modify
|
4개월 전 | 653 | |
| 2658 |
선택과집중
|
4개월 전 | 415 | |
| 2657 | 4개월 전 | 452 | ||
| 2656 |
|
4개월 전 | 964 | |
| 2655 |
선택과집중
|
4개월 전 | 549 | |
| 2654 | 5개월 전 | 403 | ||
| 2653 |
선택과집중
|
5개월 전 | 585 | |
| 2652 | 5개월 전 | 394 | ||
| 2651 | 5개월 전 | 446 | ||
| 2650 |
선택과집중
|
5개월 전 | 327 | |
| 2649 |
선택과집중
|
5개월 전 | 423 | |
| 2648 | 5개월 전 | 441 | ||
| 2647 |
welcome
|
5개월 전 | 545 | |
| 2646 |
디지털홍익인간
|
5개월 전 | 453 | |
| 2645 | 5개월 전 | 467 | ||
| 2644 |
선택과집중
|
5개월 전 | 512 | |
| 2643 | 5개월 전 | 456 | ||
| 2642 | 5개월 전 | 372 | ||
| 2641 | 5개월 전 | 358 | ||
| 2640 | 5개월 전 | 394 | ||
| 2639 | 5개월 전 | 1358 | ||
| 2638 |
|
5개월 전 | 511 | |
| 2637 |
세르반데스
|
5개월 전 | 398 | |
| 2636 |
선택과집중
|
5개월 전 | 568 | |
| 2635 |
선택과집중
|
6개월 전 | 682 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기