11주차 - jsp&css (20) table-layout
2022. 9. 14. 19:12ㆍjsp/css
이번의 목표
01. table-layout을 사용해보자
<table>은 내용의 분량에 따라 사이즈가 자동으로 조절됩니다.
하지만 사이즈를 고정적으로 분배하고 싶을 때에는 table-layout을 사용하여 이를 고정시킬 수 있습니다.
table-layout: auto; 는 디폴트 값이며 자동으로 사이즈가 바뀌는 상태입니다.
table-layout: fixed; 는 내용 분량과 상관없이 사이즈는 고정입니다.
01. jsp 코드
02. 실행 화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex20</title>
<style type="text/css">
td, th {border: 1px solid;}
#tb{width: 250px; border:1px solid; ;table-layout: auto;} /* 디폴트값이므로 임력하지 않아도 된다. */
#tb2{width: 250px; border:1px solid; ;table-layout: fixed;}
</style>
</head>
<body>
<h2>table layout auto 예제</h2>
<table id="tb" >
<tr>
<th>table-layout auto</th>
<td>auto:
내용 분량에 따라서 자동으로 조절</td>
</tr>
</table>
<h2>table layout fixed 예제</h2>
<table id="tb2" >
<tr>
<th>table-layout fixed</th>
<td id="fix"> fixed:
내용 분량에 따라 자동으로 저절되지 않고 고정됨
</tr>
</table>
</body>
</html>02. 실행화면
① table-layout: auto; 에서는 내용에 따라 테이블의 사이즈가 자동으로 변경되는 것을 확인할 수 있습니다.
② table-layout: fixed; 에서는 내용과 무관하게 테이블의 사이즈가 고정되어있는 것을 확인할 수 있습니다.
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (22) border-spacing (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (21) border-collapse (0) | 2022.09.14 |
| 11주차 - jsp&css (19) box-sizing (0) | 2022.09.14 |
| 11주차 - jsp&css (18) <header>, <section>, <footer> (0) | 2022.09.14 |
| 11주차 - jsp&css (17) overflow (0) | 2022.09.14 |