-
CSS 테이블 꾸미기, 표 크기 설정하는 방법Dung--[CSS HTML] 2023. 4. 25. 17:34
CSS 테이블 꾸미기, 표 크기 설정하는 방법
1. CSS 표와 셀의 기본 크기
표와 셀의 크기는 정해져 있지가 않습니다. 내용이 짧다면 작은 크기로, 내용이 길다면 크게 표와 셀이 형성이 됩니다. 의도하지 않은 결과가 나오지 않게 하기위해서 크기를 설정하는것이 좋습니다.
크기를 직접 설정할 떄 사용하는 속성은 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>2. CSS 표의 가로 크기 설정
표의 전체 가로 크기를 설정하고 싶다면 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>3. CSS 표의 세로 크기
표 전체의 세로 크기를 정하고 싶다면 table 요소의 세로 크기를 height 속성으로 설정합니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 100%;
height: 200px;
}
</style>
4. CSS 셀의 가로 크기
셀의 가로 크기를 정하고 싶다면 th 또는 td 요소의 가로 크기를 width 속성으로 설정합니다. 가로 크기를 설정하면 같은 열에 있는 모든 셀의 가로 크기가 같이 바뀝니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
.jb-th-1 {
width: 400px;
}
</style>
5. CSS 셀의 세로 크기
셀의 세로 크기를 설정하고 싶다면 th 또는 td요소의 세로 크기를 height 속성으로 설정합니다. 세로 크기를 정하면 같은 행에 있는 모든 셀의 세로의 크기가 같이 바뀝니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
.jb-th-1 {
width: 400px;
height: 100px;
}
</style>
6. 안쪽 여백으로 셀의 크기를 설정하기
padding속성을 이용하여 셀의 크기를 변경할 수 있습니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
.jb-th-1 {
padding: 20px 30px;
}
</style>
7. 표와 셀의 크기를 같이 설정하는 경우
셀의 가로 크기 합에 상관없이 표의 가로 크기로 표가 만들어집니다. 셀의 세로 크기의 합이 표의 세로 크기보다 크다면 셀의 세로 크기의 합으로 표가 형성됩니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 600px;
height: 200px;
}
th {
width: 300px;
height: 200px;
}
</style>
위 표의 크기는 600x264 입니다.
CSS 표만들기 및 테두리 꾸미는 방법
CSS 표만들기 및 테두리 꾸미는 방법 1. CSS 테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table,th,td요소에 적용하실 수 있습니다. tr요소에는 적용이 되지 않습니다. 2. 기본모양 아무런 꾸
dsmotion.tistory.com
CSS 표꾸미기, 정렬하는 방법
CSS 표꾸미기, 정렬하는 방법 1. CSS 표 관련된 정렬 방법 표에 관련된 정렬방법에는 표 정렬, 셀 안의 내용가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본적인 모양은 1)표 : 왼쪽 정렬 2)제목
dsmotion.tistory.com
'Dung--[CSS HTML]' 카테고리의 다른 글
css 기초 여러가지 문법 만들기 (0) 2023.04.27 CSS를 HTML에 적용하는 방법 및 설명 (1) 2023.04.26 CSS 표꾸미기, 정렬하는 방법 (1) 2023.04.25 CSS 표만들기 및 테두리 꾸미는 방법 (0) 2023.04.25 CSS 글씨 컬러 변경하는 방법 (0) 2023.04.17
