본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _
html+css

table 속성

by 오늘의갈비찜 2021. 4. 24.
728x90
border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가지게 됨.
<th>태그와 <td>태그가 각각 자신만의 테두리를 가지고 있기 때문에 두줄로 나타남.

ex) table, th, td { border: 2px solid orange; }
border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정함.

ex) table, th, td { border: 2px solid orange; }

     table { border-collapse: collapse; }

border-spacing 테이블 요소(th, td)간의 여백을 설정함.

ex) table, th, td { border: 1px solid black; }

     table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }

text-align

테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬을 설정.
<th>태그 내부는 가운데 정렬이, <td>태그 내부는 왼쪽 정렬이 기본 설정.

  ex)  table, th, td { border: 1px solid black; }

        table border-collapse: collapsewidth: 100%; }

        th { text-align: left; }

        td { text-align: center; }

vertical-align

테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬을 설정.

<th>태그와 <td>태그 모두 가운데 정렬이 기본 설정.

ex) table, th, td { border: 1px solid black; }

     table border-collapse: collapsewidth: 100%; }

     th vertical-align: top; height: 50px; }

     td vertical-align: bottom; height: 50px; }

border-bottom <th>태그와 <td>태그에 border-bottom 속성을 사용하여 수평 나눔선 만듬.
border-bottom
border-top
border-left
border-right

ex) table border-collapse: collapsewidth: 100%; }

     th, td padding: 10pxborder-bottom: 1px solid #CD5C5C; }

 :hover 
 마우스를 올리면 행 전체가 하이라이트 되도록 만듬.

ex)
 table border-collapse: collapsewidth: 100%; }

    th, td padding: 10pxborder-bottom: 1px solid #CD5C5C; }

    tr:hover { background-color: #F5F5F5; }

 :nth-child 
 얼룩무늬 효과를 설정

ex)
table border-collapse: collapsewidth: 100%; }

     th, td { padding: 10px; }

     tr:nth-child(odd) { background-color: #F3F3F3; }

caption-side 테이블의 캡션(caption)을 설정함.
empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함.
table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정함.

 

출처:

tcpschool.com/css/css_basic_tables

728x90

'html+css' 카테고리의 다른 글

box model 속성 (content, padding, border, margin, outline)  (0) 2021.04.25
Image Sprite 속성  (0) 2021.04.24
list-style 속성  (0) 2021.04.24
link 속성  (0) 2021.04.24