html/css 독학하기

코스 전체목록

닫기

col

설명

The HTML Table Column Element (<col>) defines a column within a table and is used for defining common semantic on all common cells. It is generally found within a <colgroup> element.

HTML 표의 열 요소(<col>)는 표 안에서 열을 정의하며, 공통된 모든 셀에 대해 동일한 의미를 정의하는 데에 사용한다. 일반적으로 <colgroup> 요소 안에서 볼 수 있다.

Usage Context

Permitted content None, it is a void element.
Tag omission The start tag is mandatory, but, as it is a void element, the use an end tag is forbidden.
Permitted parent elements <colgroup> only, though it can be implicitly defined as its start tag is not mandatory.
Normative document HTML5, section 4.9.4 (HTML4.01, section 11.2.4)

속성

Like all other HTML elements, this element supports the global attributes.

다른 모든 HTML 요소와 마찬가지로, 이 요소는 전역속성을 지원한다.

align - HTML 4.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

 

  • left, 내용을 셀의 왼쪽으로 정렬함
  • center, 내용을 셀의 가운데로 정렬함
  • right, 내용을 셀의 오른쪽으로 정렬함
  • justify, 본문 내용에 공백을 삽입해 셀에서 내용을 양쪽정렬함
  • char, 본문 내용을 최소 오프셋minimal offset으로 특정한 글자에 맞춰 정렬함, char와 charoff 속성으로 정의.

 

If this attribute is not set, its value is inherited from the align of the <colgroup> element this <col> element belongs too. If there are none, the left value is assumed.

이 속성이 설정되어 있지 않은 경우, 그 값은 이 <col> 요소가 속해있는 <colgroup> 요소의 정렬을 상속한다. 아무 것도 설정되어 있지 않으면, 값은 왼쪽으로 설정된다.

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 <col> element. Because <td> elements are not descendant of the <col> 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.

 

  • 왼쪽, 가운데, 오른쪽 또는 양쪽정렬 값과 동일한 효과를 얻으려면:
    • <col> 요소를 부여하는 선택자에 text-align 속성을 설정하지 말라. <td> 요소는 <col> 요소의 상속자가 아니기 때문에 이를 상속하지 않는다.
    • 표에 colspan 속성을 사용하지 않았다면, 표에서 열의 순서가 n에 해당하는 곳에 CSS 선택자 tr:nth-child(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 .

 

  • char 값과 동일한 효과를 얻으려면, CSS3에서는, char 값을 실행되지 않은 text-align 속성 값으로 사용할 수 있다. 

bgcolor - Non-standard 비표준

This attribute defines the background color of each cell of the column. 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에 정의된 여섯 자리 십육진수 코드 중 하나로, 맨 앞에 '#'가 붙는다. 미리 정의된 열여섯 개의 색상 값 중 하나가 사용될 수도 있다.

참고 : Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the <col> element 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.

참고 : 이 속성은 표준이 아니며, 마이크로소프트 인터넷 익스플로러 일부 버전에서만 실행되므로 사용하지 말라: <col> 요소의 스타일을 지정할때는 CSS를 사용해야 한다. bgcolor 속성과 비슷한 효과를 주려면, 관련된 <td> 요소에 background-color CSS 속성을 사용하라.

char -  HTML 4.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.

이 속성은 열의 셀들을 정렬하기 위해 글자를 설정하는 데에 사용된다. 여기에 주로 사용되는 값으로는 숫자나 금액을 정렬하기 위해 사용하는 마침표 (.)가 있다. 정렬이 char로 설정되지 않았다면, 이 속성은 무시된다.

참고 : 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 .

참고: 이 속성은 가장 최신 표준에서 폐지되었으므로 (지원도 되지 않음) 사용하지 말라. char와 동일한 효과를 얻으려면, CSS3에서는, 

charoff - HTML 4.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 속성에 의해 명시된 정렬 글자로부터 열의 정보를 오프셋offset할 글자수를 표시하는 데에 사용한다.

참고: 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 consecutive columns the <col> element spans. If not present, its default value is 1.

이 속성은 <col> 요소가 포괄하는 연속적인 열의 숫자를 표시하는 양의 정수를 포함한다. 표시되지 않은 경우, 그 값은 1이 된다.

valign -  HTML 4.01에서 사용중지, HTML5에서 폐지

This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attributebaseline, 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.

이 속성은 열의 각 셀 안에 있는 본문의 수직정렬을 명시한다. 이 속성에서 사용할 수 있는 값인 baseline은 본문을 가능한 한 맨 아래쪽에 가깝게 붙여주지만, 글자의 밑이 아닌 글자의 아래쪽 선에 맞추어 정렬한다. 만약 글자 크기가 전체를 꽉 채울 경우, 이는 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, which will put the text as close to the top of the cell as it is possible.

 

  • bottom, 본문을 가능한 한 셀의 맨 아래에 가깝게 배열한다.
  • middle, 본문을 셀의 중앙에 배열한다.
  • 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 <col> element. Because <td> elements are not descendant of the <col> 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.

 

  • <col> 요소를 주는 선택자에 수직 정렬 속성을 설정하지 말라. <td> 요소는 <col> 요소의 상속자가 아니기때문에, 이를 상속하지 않는다.
  • 표에 colspan 속성을 사용하지 않았다면, 표에서 열의 순서가 n에 해당하는 곳에 CSS 선택자 tr:nth-child(n)를 사용하라. 이 선택자 이후에만 수직 정렬 속성을 사용할 수 있다.
  • 표에 colspan 속성을 사용했다면, [colspan=n]과 같은 적절한 CSS 속성 선택자를 결합시켜 효과를 얻을 수 있는데, 이는 간단하지는 않다. 

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.

이 속성은 현재의 열 그룹 내의 각각의 열의 기본 가로폭을 명시한다. 표준 픽셀과 비율 값에 더해, 이 속성은 o*라는 특별한 형식을 취할 수도 있는데, 이는 그룹 내의 각 열의 가로폭이 열의 내용에 딱 맞는 최소한의 가로폭을 갖는 것을 뜻한다. 0.5*와 같은 상대적 가로폭 또한 사용할 수 있다.

예제

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

DOM Interface

This element implements the HTMLTableColElement interface.

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

호환성

Desktop
기능 구글크롬 파이어폭스Gecko) 인터넷 익스플로러 Opera Safari
기본적인 지원 1.0 1.0(1.7 or earlier) 지원 지원 지원
align/valign attribute          
char/charoff attribute          
bgcolor attribute          
Mobile
기능 안드로이드 파이어폭스 모바일(Gecko) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원 1.0(1.0)        
align/valign attribute          
char/charoff attribute          
bgcolor attribute          

참고

  • Other table-related HTML Elements: <caption>, <colgroup>, <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 '.'.

댓글

댓글 본문
버전 관리
graphittie
현재 버전
선택 버전
graphittie 자세히 보기