colgroup

설명

The HTML Table Column Group Element (<colgroup>) defines a group of column within a table.

HTML 테이블 열 그룹 요소(<colgroup>)는 테이블 내의 열의 그룹을 정의한다. 

Usage Context

Permitted content	Zero or more <col> element
Tag omission	The start tag may be omitted, if it has a <col> element as its first child and if it is not preceded by a <colgroup> whose end tag has been omitted. The end tag may be omitted, if it is not followed by a space or a comment.
Permitted parent elements	A <table> element. The <colgroup> must appears after any optional <caption> element but before any <thead>, <th>, <tbody>, <tfoot> and <tr> element.
Normative document	HTML5, section 4.9.3 (HTML4.01, section 11.2.4)

속성

이 엘리먼트는 전역속성을 지원한다.

align - Deprecated in HTML 4.01, Obsolete in HTML5

   align - HTML4.01 에서는 사용중지, HTML5 에서는 동작하지 않음

This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:

이 열거 속성은 각 행을 이루는 각 셀내의 내용들에 대한 수평정렬을 어떻게 할지를 지정한다.
가능한 값은 다음과 같다 :

• left, aligning the content to the left of the cell
• center, centering the content in the cell
• right, aligning the content to the right of the cell
• justify, inserting spaces into the textual content so that the content is justified in the cell
• char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes

 

 

If this attribute is not set, the left value is assumed. The descendant <col> elements may override this value using their own align attribute.

만약 이 속성이 설정되지 않는다면 기본값은 left 값이 됩니다. 자손 <col> 요소는 그들 자신의 정렬 속성으로 사용한 이 값을 무시할 수 있다.

Do not use this attribute as it is obsolete (not supported) in the latest standard.

이 속성은 최근 버전에서는 안쓰이므로 (지원하지 않음) 사용하지 않는 것이 좋다.

 

• To achieve the same effect as the left, center, right or justify values:
  • Do not try to set the text-align property on a selector giving a <colgroup> element. Because <td> elements are not descendant of the <colgroup> element, they won't inherit it.
  • If the table doesn't use a colspan attribute, use one tr:nth-child(n) CSS selector per column of the colgroup,where n is the ordinal position of this column in the table. Only after this selector the vertical-align property can be used.
  • If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

• left, center, right 혹은 justify 값과 동일한 효과를 내려면 :
  •  <colgroup>요소를 사용하는 선택자에 문자-정렬 속성을 설정하지 말라.  <td> 요소는 <colgroup> 요소의 자손이 아니기 때문에 문자-정렬 속성을 상속하지 않는다. 
  • 만약 테이블이 colspan 속성을 사용하지 않는다면, n번째 자식인 CSS 선택자인 tr 을 사용해라. n은 테이블에서 해당 열의 순서에 해당하는 서수이다. 이 선택자의 뒤에만 수직-정렬 속성을 사용할 수 있다. 
  • 만약 테이블이 colspan 속성을 사용하지 않는다면, 그 효과는 쉽지는 않지만 [colspan=n] 과 같이 적절한 CSS 속성 선택자들의 조합으로 얻을 수 있다. 

• To achieve the same effect as the char value, in CSS3, you can use the value of the char as the value of the text-align property Unimplemented .
•  CSS3 에서 char 값과 같은 효과를 내려면 미구현된 문자정렬 값으로 char 의 값을 사용할 수 있다.

bgcolor - Non-standard

  bgcolor - 표준이 아님

This attribute defines the background color of each cell of the columns member of the column group.. It is one of the 6-digit hexadecimal code as defined in sRGB, prefixed by a '#'. One of the sixteen predefined color strings may be used:

이 속성은 행 그룹을 구성하는 행내의 각각의 셀 배경색을 정의한다. 그것은 "#"을 접두어로 하는 sRGB 를 정의하고 있는 6자리 16진수 코드이다. 16개의 기 정의된 색상의 문자의 한가지를 사용할 수 있다:

참고 : Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the <colgroup> elements should be styled using CSS. To give a similar effect to the bgcolor attribute, use the CSS property background-color on the relevant <td> elements.

참고 : 이것은 표준이 아니고 마이크로소프트 인터넷 익스플로러의 일부 버전에서만 구현되므로 사용하지 않는 것이 좋다: <colgroup> 요소는 CSS 를 사용해서 꾸며져야만 한다. bgcolor 속성에 유사한 효과를 주려면, 관련된 <td> 요소의 CSS 요소 background-color 를 사용하라.

char - Deprecated in HTML 4.01, Obsolete in HTML5

   char - HTML4.01 에서는 사용중지, HTML5 에서는 동작하지 않음

This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored, though it will still be used as the default value for the align of the <col> which are members of this column group.

이 속성은 한 행의 셀들의 정렬하기 위한 문자를 설정하는 것이다. 일반적인 값으로 숫자나 화폐가치(금전가치)를 정렬하려고 할때 이에 대한 char 의 일반적인 값은 마침표를 포함한다. 그러나 char은 열 그룹을 구성하는 <col> 정렬을 위한 기본 값으로 여전히 사용된다.

Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the char , in CSS3, you can use the character set using the char attribute as the value of the text-align property Unimplemented .

참고 : 이 속성은 최근 버전에서는 안쓰이므로 (그리고 지원하지 않음) 사용하지 않는 것이 좋다. CSS3 에서 char 과 같은 효과를 내려면 미구현된 문자-정렬 속성의 값으로 char 속성을 사용할 수 있다. 

charoff - Deprecated in HTML 4.01, Obsolete in HTML5

   charoff - HTML4.01 에서는 사용중지, HTML5 에서는 동작하지 않음

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.

이 속성은 char 속성에 의해 지정된 정렬문자에서 열의 데이터를 잘라내기 위한 문자의 수를 표시하는데 사용된다.

Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.

참고 : 이 속성은 최근 버전에서는 안쓰이므로 (그리고 지원하지 않음) 사용하지 않는 것이 좋다.

span

This attribute contains a positive integer indicating the number of additional consecutive columns to apply the attributes of the <column> element. If not present, its default value is 0.

이 속성은 <column> 요소의 속성에 적용하기 위한 해당 컬럼에 병합할 연속적인 컬럼의 수를 나타내는 양의 정수이다. 지정되지 않으면 기본값은 0 이다.

참고 : This attribute apply on the attributes of the column grup, it has no effect on the CSS styling rules associated to it or, even more, to the cells of the columns members of the group.

참고 : 이 속성은 행 그룹의 속성으로 적용되어지는데 관련된 CSS 스타일링 규칙이나  혹은 그룹을 형성하고 있는 열내의 셀에는 영향을 미치지 않는다.  

valign - Deprecated in HTML 4.01, Obsolete in HTML5

    valign - HTML4.01 에서는 사용중지, HTML5 에서는 동작하지 않음

This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:

이 속성은 열의 각 셀 안에서 문자의 세로 정렬을 지정한다. 이 요소에 지정할 수 있는 값들은 다음과 같다. 

• baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom. 
• bottom, which will put the text as close to the bottom of the cell as it is possible;
• middle, which will center the text in the cell
• and top, top, which will put the text as close to the top of the cell as it is possible

• baseline, 가능한 셀의 바닥과 가깝도록 텍스트를 위치시킨다. 그러나 바닥 대신에 문자의 가장 낮은 곳을 기준으로 정렬한다. 만약 문자들의 사이즈가 모두 같다면 이것은 bottom 과 똑같은 효과를 갖는다. 
• bottom, 가능한 셀의 바닥과 가깝도록 텍스트를 위치시킨다;
• middle, 셀의 중앙에 문자를 위치시킨다;
• and top, top, 가능한 셀의 과 가깝도록 텍스트를 위치시킨다;

Do not use this attribute as it is obsolete (and not supported) in the latest standard:

참고 : 이 속성은 최근 버전에서는 안쓰이므로 (그리고 지원하지 않음) 사용하지 않는 것이 좋다;

• Do not try to set the vertical-align property on a selector giving a <colgroup> element. Because <td> elements are not descendant of the <colgroup> element, they won't inherit it.
• If the table doesn't use a colspan attribute, use the tr:nth-child(n) CSS selector where n is the ordinal position of the column in the table. Only after this selector the vertical-align property can be used.
• If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial. 
  
   
• <colgroup> 요소를 사용하는 선택자에는 수직 정렬 속성을 설정하지 마라.  <td> 요소는 <colgroup> 요소의 후손이 아니기 때문에, 그들은 그것을 상속하지 않는다.
• 만약 테이블이 colspan 속성을 사용하지 않는다면, n번째 자식인 CSS 선택자인 tr 을 사용해라. n은 테이블에서 해당 열의 순서에 해당하는 서수이다. 이 선택자의 뒤에만 수직-정렬 속성을 사용할 수 있다.
• 만약 테이블이 colspan 속성을 사용하지 않는다면, 그 효과는 쉽지는 않지만 [colspan=n] 과 같이 적절한 CSS 속성 선택자들의 조합으로 얻을 수 있다. 

width - Obsolete in HTML5

   width - HTML5 에서는 동작하지 않음

This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form 0*, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as 0.5* also can be used.

이 속성은 현재 열 그룹내의 각각의 열을 위한 기본 가로의 길이를 지정한다.  기준 픽셀과 퍼센트 값 뿐 아니라 0* 과 같은 특별한 형식으로 정의될수도 있다. 그것은 그룹의 각 열의 가로가 그 열의 내용을 위해 필요한 최소 가로 크기여야만 함을 의미한다. 0.5* 과 같이 상대적 길이도 사용할 수 있다. 

예제

Please see the <table> page for examples on <colgroup>.

<colgroup> 의 예제는 <table> 의 예제를 확인하라.

DOM Interface

This element implements the HTMLTableColElement interface.

이 요소는 HTML TableColElement 인터페이스를 구현한다.

호환성

Desktop

기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원	1.0	1.0(1.7 or earlier)	지원		지원
align/valign attribute
char/charoff attribute
bgcolor attribute

Mobile

기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원		1.0
align/valign attribute
char/charoff attribute
bgcolor attribute

참고

• 원본 - https://developer.mozilla.org/en/HTML/Element/colgroup
• Other table-related HTML Elements: <caption>, <col>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>;

        다른 테이블 관련 HTML 요소 : <caption>, <col>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>

• CSS properties and pseudo-classes that may be specially useful to style the <col> element:
  • the width property to control the width of the column;
  • the :nth-child pseudo-class to set the alignment on the cells of the column;
  • the text-align property to align all cells content on the same character, like '.'
•  CSS 속성과 <col> 요소의 스타일을 특별히 유용하게 하는 의사-클래스:
  • 컬럼의 가로길이를 조절하는 width 속성;
  • 행내의 셀들의 정렬을 설정하는 n번째 자식 수도-클래스;
  • "." 과 같이 같은 모든 셀 내용을 정렬하는 문자 정렬 속성