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입니다.

같은 카테고리의 다른 글
CSS / list-style-type / 목록 앞의 마커 정하는 속성

CSS / list-style-type / 목록 앞의 마커 정하는 속성

목록은 <ul> 또는 <ol> 태그로 만든다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 모양의 마커를 사용할지는 list-style-type으로 정한다. 속성값은 다음과 같다. <ul> : disc, circle, square <ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha 공통 : none 의미상으로는 <ul>과 <ol>에 사용하는 속성값을 구분하는 게 맞지만, <ul>에 decimal을 사용하거나 ...

CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성

CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성

transition transition은 속성을 서서히 변화시키는 속성입니다. transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다. IE는 버전 10부터 지원합니다. 문법 transition: property timing-function duration delay | initial | inherit property : transition을 적용시킬 속성을 정합니다. transition-property를 참고하세요. timing-function : transition의 진행 속도를 정합니다. transition-timing-function를 참고하세요. duration : transition의 총 시간을 정합니다. transition-duration을 참고하세요. delay : transition의 시작을 연기합니다. transition-delay를 참고하세요. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 ...

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

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

구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다. 웹폰트 선택하기 웹브라우저로 Google Fonts에 접속한다. 왼쪽에서 적절히 필터한다. 한글 글꼴이 필요하다면 Language를 Korean으로 한다. 원하는 글꼴을 클릭한다. 사용할 스타일을 선택한다. 오른쪽에 선택한 글꼴과 스타일이 나오고, 웹폰트를 사용하기 위한 코드 예시가 나온다. 여러 글꼴과 스타일을 선택할 수도 있다. 웹폰트 사용하기 예를 들어 Noto Sans Korean 100과 400을 ...

CSS / 선택자(Selector)

CSS / 선택자(Selector)

전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...

CSS / Grid / grid-auto-rows

CSS / Grid / grid-auto-rows

그리드에서 열 개수는 grid-template-columns로 정합니다. 그 개수를 넘어가면 행이 바뀌죠. 그리고 높이는 행마다 다르게 정해집니다. 예를 들어 다음과 같은 HTML 문서가 있을 때, 첫번째 행의 높이와 다른 행의 높이는 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

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

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

표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...

CSS / 박스 모델(Box Model)

CSS / 박스 모델(Box Model)

Box Model HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면 <body> <header> <h1>Lorem</h1> </header> </body> body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다. 박스의 구성 하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, ...

CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법

CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법

CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다. 하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다. PIE 다운로드 다음 링크에서 PIE를 다운로드 받습니다. http://css3pie.com/download/ 업로드 압축을 풀면 ...