CSS_VSC
16. 레이아웃(Table)
76beny
2022. 6. 22. 21:47
<body>
<style>
.table1 {
width: 300px;
height: 300px;
/* 테두리를 설정하는 방법 */
border: 1px solid black;
/*테두리를 하나로 합치는 방법 border="1px" 이 존재할때 적용됨*/
/* border-collapse: collapse; */
/* 테두리를 두개로 분리하는 방법 */
border-collapse: separate;
/* 셀간의 간격 조정 */
border-spacing: 5px 5px;
/* 빈칸 표시하지 않기 */
empty-cells: hide;
/* 셀크기 고정 */
/* table-layout: fixed; */
/* 셀 내용 가두기 */
/* word-break: break-all; */
}
.table1 td {
height: 50px;
/* 테이블 셀의 굵기 */
border: 1px solid black;
/* 테이블 셀의 배경 색 */
background-color: honeydew;
/* 테이블 셀의 가로정렬 */
text-align: center;
/* 테이블 셀의 세로정렬 */
vertical-align: top;
}
</style>
<table class="table1">
<caption>성적표</caption>
<tr>
<th>구분</th>
<th>점수</th>
</tr>
<tr>
<td>국어</td>
<td>70</td>
</tr>
<tr>
<td>수학</td>
<td>100</td>
</tr>
<tr>
<td>영어</td>
<td>80</td>
</tr>
<tr>
<td colspan="2">
이 친구는 문과가 아니고 이과로 가야합니다.
</td>
</tr>
<tr>
<td colspan="2">
<div style="height:100px; overflow:scroll;">
비고 : 이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요. 이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.
</div>
</td>
</tr>
</table>| 구분 | 점수 |
|---|---|
| 국어 | 70 |
| 수학 | 100 |
| 영어 | 80 |
| 이 친구는 문과가 아니고 이과로 가야합니다. | |
|
비고 : 이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요. 이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.이친구는 왜 이과로 가야하는지 모르겠지만 어머니좀 불러오세요.
|
|