표의 크기 정하는 방법
표와 셀의 크기를 직접 정할 때 사용하는 속성은 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;
}
표의 가로 크기
-
표 전체의 가로 크기를 정하고 싶다면
<table>요소의 가로 크기를 width 속성으로 정합니다.
table, th, td {
border-top: 1px solid #bcbcbc;
width: 250px;
}
- 가로로 꽉 찬 표를 만들고 싶다면 width 값을 100%로 합니다.
table, th, td {
border-top: 1px solid #bcbcbc;
width: 100%;
}
표의 세로 크기
-
표 전체의 세로 크기를 정하고 싶다면
<table>요소의 세로 크기를 height 속성으로 정합니다.
table, th, td {
border-top: 1px solid #bcbcbc;
width: 100%;
height: 200px;
}
셀의 가로 크기
-
셀의 가로 크기를 정하고 싶다면
<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;
}
셀의 세로 크기
-
셀의 세로 크기를 정하고 싶다면
<th>또는<td>요소의 세로 크기를 height 속성으로 정합니다. - 세로 크기를 정하면 같은 행에 있는 모든 셀의 세로 크기가 같이 바뀝니다.
table, th, td {
border-top: 1px solid #bcbcbc;
th-1 {
width: 150px;
height: 100px;
}
안쪽 여백으로 셀의 크기 정하기
- padding 속성으로 셀의 크기를 변경할 수 있습니다.
table, th, td {
border-top: 1px solid #bcbcbc;
th-1 {
padding: 60px 40px;
}