표의 크기 정하는 방법

표와 셀의 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다.

예제

다음은 테두리만 추가한 간단한 표입니다.

여기에 CSS을 추가해서 크기를 변경해보도록 하겠습니다.

<table>
  <thead>
    <tr>
      <th>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>

table, th, td {
  border-top: 1px solid #bcbcbc;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="300"
data-pen-title="CSS 표 크기 정하기 예제"
data-slug-hash="NWNVXNY"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 300px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

표의 가로 크기

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

table, th, td {
  border-top: 1px solid #bcbcbc;
  width: 250px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="265"
data-pen-title="CSS 표의 가로 크기 width: px 예제"
data-slug-hash="eYZayZX"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 265px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

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

table, th, td {
  border-top: 1px solid #bcbcbc;
  width: 100%;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="265"
data-pen-title="CSS 표의 가로 크기 정하기 width: % 예제"
data-slug-hash="qBZGpNd"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 265px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

표의 세로 크기

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

table, th, td {
  border-top: 1px solid #bcbcbc;
  width: 100%;
  height: 200px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="330"
data-pen-title="CSS 표의 세로 크기 정하기 height 예제"
data-slug-hash="jOqoYrp"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 330px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

셀의 가로 크기

셀의 가로 크기를 정하고 싶다면 <th> 또는
<td> 요소의 가로 크기를 width 속성으로 정합니다.

가로 크기를 정하면 같은 열에 있는 모든 셀의 가로 크기가 같이 바뀝니다.

<table>
  <thead>
    <tr>
      <th class="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>

table, th, td {
  border-top: 1px solid #bcbcbc;
}
th-1 {
  width: 150px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="265"
data-pen-title="CSS 셀의 가로 크기 정하기 예제"
data-slug-hash="ZEWNvOP"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 265px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

셀의 세로 크기

셀의 세로 크기를 정하고 싶다면 <th> 또는
<td> 요소의 세로 크기를 height 속성으로 정합니다.

세로 크기를 정하면 같은 행에 있는 모든 셀의 세로 크기가 같이 바뀝니다.

table, th, td {
  border-top: 1px solid #bcbcbc;
th-1 {
  width: 150px;
  height: 100px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="300"
data-pen-title="CSS 셀의 세로 크기 정하기 예제"
data-slug-hash="dyMEJpX"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 300px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

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

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

table, th, td {
  border-top: 1px solid #bcbcbc;
th-1 {
  padding: 60px 40px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="320"
data-pen-title="CSS 안쪽 여백으로 셀의 크기 정하기 padding 예제"
data-slug-hash="BaKeJLJ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.