2026, 새로운 도약을 시작합니다.

<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>

2041908818_1522261267.268.png

*주의: <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>

2041908818_1522261251.7453.png

|

댓글 3개

정리 잘 해주셨네요 수고가 느껴집니다ㅊㅊ
좋아요..잘쓰겠습니다.감사합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,598
2741 3일 전 조회 112
2740 4일 전 조회 104
2739 1주 전 조회 209
2738 1주 전 조회 217
2737 1주 전 조회 181
2736 1주 전 조회 280
2735 3주 전 조회 281
2734 3주 전 조회 263
2733 1개월 전 조회 265
2732 1개월 전 조회 301
2731 1개월 전 조회 267
2730 1개월 전 조회 226
2729 1개월 전 조회 356
2728 1개월 전 조회 245
2727 1개월 전 조회 422
2726 1개월 전 조회 256
2725 1개월 전 조회 330
2724 1개월 전 조회 360
2723 1개월 전 조회 267
2722 1개월 전 조회 300
2721 1개월 전 조회 211
2720 2개월 전 조회 304
2719 2개월 전 조회 307
2718 2개월 전 조회 202
2717 2개월 전 조회 336
2716 2개월 전 조회 202
2715 2개월 전 조회 312
2714 2개월 전 조회 273
2713 2개월 전 조회 376
2712 2개월 전 조회 289
🐛 버그신고