table
1. table-layout
기본값이 auto다.
- fixed
<style>
td, th{border:1px solid black;}
#tb{border:1px solid black; width:300px; table-layout:fixed;}
</style>
</head>
<body>
<h2>table layout fixed예제</h2>
<table id="tb">
<tr>
<th> table layout fixed</th>
<td>fixed : 내용 길이에 구애받지 않고 자동으로 조절되지 않고 고정된다.내용 길이에 구애받지 않고 자동으로 조절되지 않고 고정된다.
내용 길이에 구애받지 않고 자동으로 조절되지 않고 고정된다.
내용 길이에 구애받지 않고 자동으로 조절되지 않고 고정된다.
</td>
</tr>
</table>
2. border-collapse
테이블 보더 간의 간격 제거
<style>
td, th {
border: 1px solid black;
}
#tb {
border: 1px solid black;
width: 300px;
table-layout: fixed;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>표(table)의 테두리와 셀의 테두리 사이의 간격제거</h2>
<table id="tb">
<tr>
<th>table border-collapse</th>
</tr>
<tr>
<th>table border-collapse</th>
</tr>
<tr>
<th>table border-collapse</th>
</tr>
</table>
</body>
3. border-spacing
<style>
td, th {
border: 1px solid black;
}
#tb {
border: 1px solid black;
width: 300px;
table-layout: fixed;
border-spacing:5px;
}
</style>
</head>
<body>
<h2>표(table)의 테두리와 셀의 테두리 사이의 간격지정</h2>
<table id="tb">
<tr>
<th>table border-spacing</th>
</tr>
<tr>
<th>table border-spacing</th>
</tr>
<tr>
<th>table border-spacing</th>
</tr>
</table>
</body>
4.empty-cells & caption
caption은 테이블의 제목이다.
코드 중에 하단에 있다고 하더라도 기본값은 테이블의 위다.
밑으로 하고 싶은 경우 caption-side:bottom;를 사용한다.
<style>
td, th {
border: 1px solid black;
}
#tb1 {
border: 1px solid blue;
width: 300px;
table-layout: fixed;
empty-cells:hide;
}
#tb2 {
border: 1px solid blue;
width: 300px;
table-layout: fixed;
caption-side:bottom;
}
#tb2 caption{font-size:40px;}
</style>
</head>
<body>
<table id="tb1">
<tr>
<th>한국대</th><th>한국1</th><th>한국2</th>
</tr>
<tr>
<th>한국대</th><th>한국1</th><th>한국2</th>
</tr>
<tr>
<th>한국대</th><th>한국1</th><th></th>
</tr>
<caption>대한민국 대학</caption>
</table>
<hr>
<table id="tb2">
<tr>
<th>한국대</th><th>한국1</th><th>한국2</th>
</tr>
<tr>
<th>한국대</th><th>한국1</th><th>한국2</th>
</tr>
<tr>
<th>한국대</th><th>한국1</th><th>한국2</th>
</tr>
<caption>대한민국 대학</caption>
</table>
</body>
'코딩 공부 > CSS' 카테고리의 다른 글
| CSS 예제들 (0) | 2022.10.23 |
|---|---|
| CSS header session footer등의 구조 (0) | 2022.10.21 |
| CSS 예제 (clear, overflow, box-sizing) (0) | 2022.10.20 |
| CSS 예제 (ul, li, border, margin, position) (0) | 2022.10.19 |
| CSS (0) | 2022.10.18 |
