Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table</title>
<style>
.tbl {
width: 800px;
table-layout: fixed;
/*border-collapse: collapse;*/
/*border-collapse 해줘야 셀 사이 간격이 생기지 않음*/
}
.tbl td, .tbl th {
border: 1px solid red;
}
.tbl caption {
caption-side: bottom;
}
.tbl .ex1 {
empty-cells: hide;
/* empty-cells: show, hide; 빈 셀을 보여줄지 투명하게 할지
border-copplase: collapse; 속성이 있으면 빈 셀이 가려지지 않음*/
}
</style>
</head>
<body>
<table class="tbl" >
<caption>table caption</caption>
<thead>
<tr>
<th scope="col">table header cell1-1</th>
<th scope="col">table header cell1-2</th>
<th scope="col">table header cell1-3</th>
<th scope="col">table header cell1-4</th>
</tr>
</thead>
<tbody>
<tr>
<td>table data cell1-1, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iusto quas excepturi consectetur, inventore, quia minima nobis culpa perspiciatis consequuntur illum laborum voluptas minus eveniet? Accusantium rerum cupiditate reiciendis dolorum?</td>
<td>table data cell1-2</td>
<td>table data cell1-3</td>
<td>table data cell1-4</td>
</tr>
<tr>
<td>table data cell2-1</td>
<td>table data cell2-2</td>
<td>table data cell2-3</td>
<td>table data cell2-4</td>
</tr>
<tr>
<td>table data cell3-1</td>
<td>table data cell3-2</td>
<td>table data cell3-3</td>
<td>table data cell3-4</td>
</tr>
<tr>
<td>table data cell4-1</td>
<td>table data cell4-2</td>
<td class="ex1"></td>
<td class="ex2"></td>
</tr>
</tbody>
</table>
</body>
</html>
몸살감기는 나았지만 18일부터 비염, 축농증이 심해져서
병원 항생제 먹고나니 졸려지기도 하고 쉬어야해서
몸조리 좀 하고 나니 1월 말이 되어간다...
2주를 통째로 날린 것 같다.
그래도 이제 몸은 꽤 나아져서 다시 빨리 공부를 해야겠다... 호호...
일단 지난 주 월요일에 잠깐 공부했던 내용은 여기까지...
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 010 CSS공부(6) 이메일, 이벤트 페이지 예제 실습 (0) | 2021.01.26 |
|---|---|
| 009 CSS공부(5) 레이아웃 관련 스타일 (0) | 2021.01.25 |
| 007 CSS 공부 (3) 박스모델 (0) | 2021.01.14 |
| 006 CSS 공부(2) 폰트 스타일 (0) | 2021.01.14 |
| 005 CSS 공부(1) (0) | 2021.01.11 |
Daily Study/Web Dev
