CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기

표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다.

크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th class="jb-th-1">Lorem</th>
          <th>Ipsum</th>
          <th>Dolor</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem</td>
          <td>Ipsum</td>
          <td>Dolor</td>
        </tr>
        <tr>
          <td>Lorem</td>
          <td>Ipsum</td>
          <td>Dolor</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

표의 가로 크기

표 전체의 가로 크기를 정하고 싶다면 table 요소의 가로 크기를 width 속성으로 정합니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 600px;
  }
</style>

가로로 꽉 찬 표를 만들고 싶다면 크기의 값을 100%로 합니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 100%;
  }
</style>

표의 세로 크기

표 전체의 세로 크기를 정하고 싶다면 table 요소의 세로 크기를 height 속성으로 정합니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 100%;
    height: 200px;
  }
</style>

셀의 가로 크기

셀의 가로 크기를 정하고 싶다면 th 또는 td 요소의 가로 크기를 width 속성으로 정합니다. 가로 크기를 정하면 같은 열에 있는 모든 셀의 가로 크기가 같이 바뀝니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  .jb-th-1 {
    width: 400px;
  }
</style>

셀의 세로 크기

셀의 세로 크기를 정하고 싶다면 th 또는 td 요소의 세로 크기를 height 속성으로 정합니다. 세로 크기를 정하면 같은 행에 있는 모든 셀의 세로 크기가 같이 바뀝니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  .jb-th-1 {
    width: 400px;
    height: 100px;
  }
</style>

안쪽 여백으로 셀의 크기 정하기

padding 속성으로 셀의 크기를 변경할 수 있습니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  .jb-th-1 {
    padding: 20px 30px;
  }
</style>

표와 셀의 크기를  같이 정하는 경우

셀의 가로 크기 합에 상관 없이 표의 가로 크기로 표가 만들어집니다. 셀의 세로 크기의 합이 표의 세로 크기보다 크면 셀의 세로 크기의 합으로 표가 만들어집니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 600px;
    height: 200px;
  }
  th {
    width: 300px;
    height: 200px;
  }
</style>

위 표의 크기는 600x264입니다.

Related Posts

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...

CSS / 선택자(Selector) / 가상 요소

CSS / 선택자(Selector) / 가상 요소

가상 요소 가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다. 가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 씁니다. 하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동합니다. ::first-line ::first-line은 요소의 첫번째 줄을 선택합니다. 예를 들어 p::first-line { color: red; } 는 p 요소의 첫번째 줄의 글자색을 빨간색으로 만듭니다. ::first-letter ::first-letter는 요소의 첫번째 문자를 선택합니다. 예를 들어 p::first-letter { ...

CSS / tab-size / 탭 크기 설정하는 속성

CSS / tab-size / 탭 크기 설정하는 속성

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...

CSS / font-style / 글자 모양 정하는 속성

CSS / font-style / 글자 모양 정하는 속성

개요 font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-style: normal | italic | oblique | initial | inherit normal : 보통 모양입니다. italic : 기울임꼴입니다. oblique : 기울임꼴입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. italic은 필기체 느낌으로 기울이고, oblique는 보통 모양을 그대로 기울입니다. 아래의 이미지에서 두번째 줄이 italic, 세번째 ...

CSS / 인용문(Blockquote) 꾸미기

CSS / 인용문(Blockquote) 꾸미기

다음과 같은 인용문을 꾸미는 여러 가지 예제입니다. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> </blockquote> 예제 1 blockquote { border: 1px solid #27a9e3; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; border-left: 10px solid #27a9e3; } 예제 2 blockquote:before { ...

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다. em - 상위 요소 기준 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 font-size: 1.5em; 은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻입니다. 간단한 예제를 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 애니메이션 / transition / transition-duration - transition이 끝날 때까지 걸리는 시간을 정하는 속성

CSS / 애니메이션 / transition / transition-duration - transition이 끝날 때까지 걸리는 시간을 정하는 속성

transition-duration transition-duration로 transition이 끝날 때까지 걸리는 시간을 정합니다. IE는 버전 10부터 지원합니다. 문법 transition-duration: time| initial | inherit 기본값은 0s입니다. 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 커집니다. 첫 번째 박스는 다 커지는데 1초가 걸립니다. 두 번째 박스는 다 커지는데 0.4초가 걸립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-family: Consolas, monospace; } .jb { box-sizing: ...

CSS / 기초 / !important

CSS / 기초 / !important

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

CSS / 구글 웹폰트 사용하는 방법

CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있습니다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아보겠습니다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속합니다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정합니다. + 버튼을 클릭하여 글꼴을 선택합니다. 여러 개를 선택해도 됩니다. 아래에 있는 검은 색 바를 클릭합니다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...

CSS 강좌