CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

개요

empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다.

  • 기본값 : show
  • 상속 : Yes
  • 애니메이션 : No
  • 버전 : CSS Level 2

문법

empty-cells: show | hide | initial | inherit
  • show : 빈 셀의 테두리를 보여줍니다.
  • hide : 빈 셀의 테두리를 숨깁니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table {
        width: 100%;
        margin: 20px 0px;
        border: 1px solid #999999;
      }
      td {
        border: 1px solid #999999;
        padding: 10px;
      }
      table.a {
        empty-cells: show;
      }
      table.b {
        empty-cells: hide;
      }
      table.c {
        empty-cells: hide;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table class="a">
      <tr><td>Lorem</td><td>Ipsum</td></tr>
      <tr><td>Dolor</td><td></td></tr>
    </table>
    <table class="b">
      <tr><td>Lorem</td><td>Ipsum</td></tr>
      <tr><td>Dolor</td><td></td></tr>
    </table>
    <table class="c">
      <tr><td>Lorem</td><td>Ipsum</td></tr>
      <tr><td>Dolor</td><td></td></tr>
    </table>
  </body>
</html>

  • 첫 번째 표는 빈 셀의 테두리를 표시합니다.
  • 두 번째 표는 빈 셀의 테두리를 표시하지 않습니다.
  • 세 번째 표처럼 table의 border-collapse 속성의 값이 collapse인 경우, empty-cells 속성은 의미가 없습니다.

Related Posts

CSS / 기초 / !important

CSS / 기초 / !important

개요 CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다. 문법 property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 글자색을 ...

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { font-size: 20px; ...

CSS / 이미지 위에 텍스트 정가운데에 넣기

CSS / 이미지 위에 텍스트 정가운데에 넣기

사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...

CSS / columns / 다단으로 만들기

CSS / columns / 다단으로 만들기

columns columns는 다단으로 만드는 속성입니다. 단의 최소 가로 크기와 단의 최대 개수가 속성의 값입니다. 기본값은 auto로, 값을 입력하지 않으면 auto로 처리합니다. IE는 버전 10 이상을 지원합니다. 예제 1 문단을 3단으로 만듭니다. 단의 최소 가로 크기가 설정되지 않았으므로 균등한 크기로 단이 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb { columns : 3; } </style> </head> <body> <p class="jb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ...

CSS / 세로 가운데 정렬하는 방법

CSS / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. text-align: center; 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. margin-left: auto; margin-right: auto; 그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 방법 1 - padding 속성 이용하기 바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / Grid / grid-template-columns, grid-template-rows

CSS / Grid / grid-template-columns, grid-template-rows

grid-template-columns grid-template-columns 속성으로 열의 개수와 폭을 정합니다. 기본값은 none으로, 열을 만들이 않습니다. 속성값의 개수가 열의 개수이고, 각 속성값이 열 너비입니다. 예를 들어 속성값이 100px 50% auto라면 3열이 만들어지고, 1열의 너비는 100px, 2열의 너비는 50%, 3열의 너비는 남은 공간 전부가 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / CSS를 HTML에 적용시키는 방법

CSS / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. Inline Style Sheet Inline Style Sheet는 HTML 태그의 ...

CSS / table-layout / 표(table) 크기 고정시키기

CSS / table-layout / 표(table) 크기 고정시키기

표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

개요 text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 기본값 : none 상속 : Yes 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 문법 text-transform: none | capitalize | uppercase | lowercase | initial | inherit none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 ...

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

개요 text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정합니다. (필수) offset-y : 그림자의 수직 거리를 정합니다. (필수) blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0) color : 색을 ...

CSS 강좌