20190516/cssTable3.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>CSS 테이블 실습</title>
	</head>
	<body>
		<section>
			<h3>table layout 속성</h3>
			<h3>공백이 있으므로 자연스러운 줄바꿈</h3>
			<table width="200" cellpadding="5" cellspacing="2" border="1" align="center">
				<tr>
					<td>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세</td>
				</tr>
			</table>
			<h3>공백이 없으므로 테이블 확장</h3>
			<table width="100" cellpadding="5" cellspacing="2" border="1" align="center">
				<tr>
					<td>https://jsptogo.herokuapp.com/jspsrc/login.jsp</td>
				</tr>
			</table>
			<h3>100픽셀까지만 보이고 화면출력 없음:fixed</h3>
			<table width="100" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed;">
				<tr>
					<td>https://jsptogo.herokuapp.com/jspsrc/login.jsp</td>
				</tr>
			</table>
			<h3>100픽셀 수준으로 자동 줄바꿈:word-break:break-all</h3>
			<table width="100" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed; word-break:break-all;">
				<tr>
					<td>https://jsptogo.herokuapp.com/jspsrc/login.jsp</td>
				</tr>
			</table>
		</section>
	</body>
</html>