티스토리 뷰

HTML

[HTML] <table>

yulrang 2017. 8. 7. 15:17

<table>

1. 허용된 컨텐츠

<caption>
<colgroup>
<thead>, <tbody>, <tfoot>
<tr>


2. 속성

align

컨테이닝 블록 안에서 테이블이 어떻게 정렬될지 결정

  • 값 : left, center, right
  • 대체 CSS :
    align="left" ≒ margin-right : auto
    align="right"  ≒ margin-left : auto
    align="center" ≒ margin-left:auto; margin-right : auto
    

bgcolor

테이블과 테이블 내용의 배경색을 결정

  • 값 : #hexacode, 색상 키워드
  • 대체 CSS : background-color

border

테이블을 감싸는 테두리의 두께를 결정
border=”0”일 경우, frame 속성이 void로 설정됨

  • 값 : integer
  • 대체 CSS : border

cellpadding

셀의 컨텐츠와 셀 보더간의 간격을 결정
셀의 상, 하, 좌, 우에 모두 적용됨

  • 값 : integer, percentage
  • 대체 CSS : th, td에 padding

cellspacing

셀과 셀사이의 수평, 수직 간격을 결정 (테이블 프레임과의 간격도 포함)

  • 값 : integer, percentage
  • 대체 CSS : border-spacing

frame

테이블 프레임의 어떤 쪽 보더를 반드시 보이게 할지 결정

  • 값 : box(border), above, below, lhs, rhs, hsides, vsides, void
  • 대체 CSS : border

rules

테이블의 어떤 영역에 보더를 반드시 보이게 할지 결정

  • 값 : rows, cols, all, group, none
    ※ group : thead, tbody, tfoot 등의 그룹영역
  • 대체 CSS : border

summary

테이블의 요약정보를 대체텍스트로 제공

  • 값 : text
  • <caption>으로 대체

width

테이블의 가로 크기 결정

  • 값 : integer, percentage
  • 대체 CSS : width


<table>에만 쓰이는 CSS

border-collapse

border-spacing




<tr>

1. 속성

align

셀 안에서 콘텐츠가 어떻게 수평 정렬될지 결정

  • 값 : left, center, right, justify
  • 대체 CSS : text-align

bgcolor

각 행의 셀들의 배경색을 결정

  • 값 : #hexacode, 색상 키워드
  • 대체 CSS : background-color

valign

각 행의 셀들의 텍스트 수직 정렬

  • 값 : baseline, bottom, middle, top
  • 대체 CSS : vertical-align



<td>

1. 속성

abbr

셀의 콘텐츠에 대한 요약정보

  • 값 : text
  • 대체 속성 : title

align

셀 안에서 콘텐츠가 어떻게 수평 정렬될지 결정

  • 값 : left, center, right, justify
  • 대체 CSS : text-align

axis

각각의 문자열은 (해당 셀이 포함된) 셀 그룹에 적용된 셀 헤더의 id에 해당함

  • 값 : 공백으로 구분된 문자열 리스트
  • 대체 속성 : scope

scope

해당 셀이 어떤 범위의 셀들에 대해 헤더 정보를 제공하는지 결정

  • 값 : row, col, rowgroup, colgroup

bgcolor

각 행의 셀들의 배경색을 결정

  • 값 : #hexacode, 색상 키워드
  • 대체 CSS : background-color

colspan

몇 개의 열을 병합할지 결정

  • 값 : 양의 정수 (그 셀이 속한 colgroup의 마지막 셀까지 최대로 병합 가능)

rowspan

몇 개의 행을 병합할지 결정

  • 값 : 양의 정수 (테이블 섹션(thead, tbody)까지 최대로 병합 가능)

headers

각각의 문자열은 해당 셀에 적용된 th 요소의 id에 해당함

  • 값 : 공백으로 구분된 문자열 리스트

valign

각 행의 셀들의 텍스트 수직 정렬

  • 값 : baseline, bottom, middle, top
  • 대체 CSS : vertical-align


'HTML' 카테고리의 다른 글

반응형 이미지  (0) 2017.10.10
[HTML] <input>  (1) 2017.08.07
[HTML] <meta>  (0) 2017.08.07
댓글