초보개발자의 성장블로그
CSS 33 table 꾸미기
프론트엔드/CSS2021. 4. 4. 11:25
table-layout
- 셀 안 내용의 양에 따라 셀 너비를 조절
border-collapse
- 테이블과 셀 사이의 테두리 간격을 설정
- border-collapse: seperate; 는 테이블과 셀 사이의 테두리 간격을 둔다. border-spacing 속성으로 정함.
- border-collapse: collapse; 는 테이블과 셀 사이의 테두리 간격을 없앤다. 한줄로 나타냄.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td, th{
border: 1px solid black;
}
#tb1{
border:2px solid red;
table-layout: auto;
}
#tb2{
border:3px dotted teal;
background-color: yellow;
table-layout:fixed;
}
</style>
</head>
<body>
<h2>table layout auto 예제</h2>
<table id="tb1">
<tr>
<th>table layout auto</th>
<td>내용 분량에 따라서 자동으로 조절</td>
</tr>
</table>
<h2>table layout fixed 예제</h2>
<table id="tb2" width="250px">
<tr>
<th>table layout fixed</th>
<td>내용 분량과 상관없이 고정</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td, th{
border: 2px solid black;
}
#tb1{
border:3px solid red;
background-color: yellow;
border-collapse: separate;
table-layout: auto;
}
#tb2{
border:3px solid red;
background-color: yellow;
border-collapse: collapse;
table-layout:auto;
}
</style>
</head>
<body>
<table id="tb1" width="350px">
<tr>
<th>table border-collapse</th>
<td>seperate 적용</td>
</tr>
</table>
<p></p>
<table id="tb2" width="350px">
<tr>
<th>table border-collapse</th>
<td>collapse적용</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td, th{
border: 1px solid black;
}
#tb1{
border:2px solid green;
border-spacing: 10px; /*상하좌우 */
}
#tb2{
border:3px solid maroon;
background-color:aqua;
border-spacing: 20px 40px; /* 첫번째 값: 좌우, 두번째 값: 상하*/
}
</style>
</head>
<body>
<table id="tb1" width="350px">
<tr>
<th>table border-spacing</th>
<td>10px</td>
</tr>
</table>
<p></p>
<table id="tb2" width="350px">
<tr>
<th>table border-spacing</th>
<td>20px 40px</td>
</tr>
</table>
</body>
</html>그 외 테이블 관련 속성들
* empty-cells: hide; / empty-cells: show; 는 빈셀(ex: <td></td>)를 숨기거나 보이게 해줍니다.
* caption-side:top; / caption-side:bottom; 는 테이블의 캡션을 삽입해줍니다.
ex) <caption> [table 1-1] 초보개발자의 성장블로그 </caption>
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 35 회원가입 폼 만들기 (2) | 2021.04.04 |
|---|---|
| CSS 34 로그인 폼 만들기 (0) | 2021.04.04 |
| CSS 32 z-index 속성 (0) | 2021.04.04 |
| CSS 31 position 속성 (0) | 2021.04.04 |
| CSS 30 float 속성으로 웹페이지 구성해보기 (0) | 2021.04.04 |
댓글()