<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년 전 | 4429 | ||
| 2544 | 12개월 전 | 945 | ||
| 2543 | 12개월 전 | 843 | ||
| 2542 | 12개월 전 | 747 | ||
| 2541 | 12개월 전 | 775 | ||
| 2540 | 12개월 전 | 1187 | ||
| 2539 | 1년 전 | 1021 | ||
| 2538 | 1년 전 | 1006 | ||
| 2537 |
|
1년 전 | 842 | |
| 2536 | 1년 전 | 1227 | ||
| 2535 |
|
1년 전 | 783 | |
| 2534 |
|
1년 전 | 889 | |
| 2533 |
거북이와두루미
|
1년 전 | 1663 | |
| 2532 | 1년 전 | 798 | ||
| 2531 | 1년 전 | 675 | ||
| 2530 | 1년 전 | 720 | ||
| 2529 | 1년 전 | 1064 | ||
| 2528 |
|
1년 전 | 557 | |
| 2527 | 1년 전 | 1135 | ||
| 2526 | 1년 전 | 746 | ||
| 2525 | 1년 전 | 1110 | ||
| 2524 | 1년 전 | 912 | ||
| 2523 | 1년 전 | 1339 | ||
| 2522 | 1년 전 | 958 | ||
| 2521 | 1년 전 | 1310 | ||
| 2520 | 1년 전 | 1189 | ||
| 2519 | 1년 전 | 1060 | ||
| 2518 |
Lemios
|
1년 전 | 868 | |
| 2517 | 1년 전 | 955 | ||
| 2516 | 1년 전 | 1703 | ||
| 2515 | 1년 전 | 847 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기