글
표의 경계선, 너비와 높이조절
HTML
2011. 7. 19. 19:41
안녕하세요?
지난번에는 colspan,rowspan 행과 열합치기를 배웠습니다. 오늘은 border,height,width 즉 표의 경계, 표의 높이 너비조절하는 법을 배워보겠습니다.
먼저 border속성입니다. border는 경계라는 말이죠. 그래서 표의 경계선을 1을 주면 1픽셀만큼 3을주면 3필셀만큼 두꼅게 그려라하는 뜻입니다.
예제를 보지요.
<html>
<head><title>표</title>
</head>
<body>
<table border=1>
<tr>
<td>border=1인 표</td>
<td>border=1인 표</td>
</tr>
<tr>
<td>경계가1인표</td>
<td>경계가1인표</td>
</tr>
</table>
<br><br>
<table border=5>
<tr>
<td>border=5인 표</td>
<td>border=5인 표</td>
</tr>
<tr>
<td>경계가5인표</td>
<td>경계가5인표</td>
</tr>
</table>
</body>
</html>
결과는...
위에는 border=1인 표이고 아래는 border=5인표입니다. 경계가 확실히 아래가 더 두껍지요?
자 그럼 이번에는 height와 width속성에 대해 배워봅시다.높이와 너비인데요. %로 적용할수도 있고 픽셀단위로 적용할수도 있습니다. 저번에 선그리기 할때도 그렇게 했지요? 예를들어
<table height=50% width=50%>
이렇게 하면 높이도 창의 반, 너비도 창의 반으로 하라는 뜻입니다.
<table height=200 width=200>
이렇게하면 높이도 200픽셀 너비도 200픽셀로 하라 그런 뜻이 됩니다.
이것도 예제를 통해서 쉽게 배워보도록 하겠습니다.
<html>
<head><title>표</title>
</head>
<body>
<table border=1 height=50% width=50%>
<tr>
<td>border가 1인 표</td>
<td>height가 창의 절반인 표</td>
</tr>
<tr>
<td>width가 창의 절반인 표</td>
<td>예제</td>
</tr>
</table>
<br><br>
<table border=5 height=200 width=500>
<tr>
<td>border가 5인 표</td>
<td>높이가 200픽셀인 표</td>
</tr>
<tr>
<td>너비가 500픽셀인표</td>
<td>예제</td>
</tr>
</table>
</body>
</html>
이렇게 주면 처음 표는 높이가 창의 50%, 너비도 창의 50%인 표이고 두번째 표는 높이가 200픽셀, 너비가 500픽셀인 표가 됩니다. 결과를 보면...
이렇게 위의 표를 보면 너비가 창의 50%이지요? 높이도 창의 절반입니다. 아래표는 창의 크기에 영향을 안받습니다. 절대크기와 너비가 되지요.
이해가시죠? 이해안가신다면 댓글달아주시는거 잊지 마시기 바랍니다. 그럼 다음에 또 만나요~
지난번에는 colspan,rowspan 행과 열합치기를 배웠습니다. 오늘은 border,height,width 즉 표의 경계, 표의 높이 너비조절하는 법을 배워보겠습니다.
먼저 border속성입니다. border는 경계라는 말이죠. 그래서 표의 경계선을 1을 주면 1픽셀만큼 3을주면 3필셀만큼 두꼅게 그려라하는 뜻입니다.
예제를 보지요.
<html>
<head><title>표</title>
</head>
<body>
<table border=1>
<tr>
<td>border=1인 표</td>
<td>border=1인 표</td>
</tr>
<tr>
<td>경계가1인표</td>
<td>경계가1인표</td>
</tr>
</table>
<br><br>
<table border=5>
<tr>
<td>border=5인 표</td>
<td>border=5인 표</td>
</tr>
<tr>
<td>경계가5인표</td>
<td>경계가5인표</td>
</tr>
</table>
</body>
</html>
결과는...
자 그럼 이번에는 height와 width속성에 대해 배워봅시다.높이와 너비인데요. %로 적용할수도 있고 픽셀단위로 적용할수도 있습니다. 저번에 선그리기 할때도 그렇게 했지요? 예를들어
<table height=50% width=50%>
이렇게 하면 높이도 창의 반, 너비도 창의 반으로 하라는 뜻입니다.
<table height=200 width=200>
이렇게하면 높이도 200픽셀 너비도 200픽셀로 하라 그런 뜻이 됩니다.
이것도 예제를 통해서 쉽게 배워보도록 하겠습니다.
<html>
<head><title>표</title>
</head>
<body>
<table border=1 height=50% width=50%>
<tr>
<td>border가 1인 표</td>
<td>height가 창의 절반인 표</td>
</tr>
<tr>
<td>width가 창의 절반인 표</td>
<td>예제</td>
</tr>
</table>
<br><br>
<table border=5 height=200 width=500>
<tr>
<td>border가 5인 표</td>
<td>높이가 200픽셀인 표</td>
</tr>
<tr>
<td>너비가 500픽셀인표</td>
<td>예제</td>
</tr>
</table>
</body>
</html>
이렇게 주면 처음 표는 높이가 창의 50%, 너비도 창의 50%인 표이고 두번째 표는 높이가 200픽셀, 너비가 500픽셀인 표가 됩니다. 결과를 보면...
이렇게 위의 표를 보면 너비가 창의 50%이지요? 높이도 창의 절반입니다. 아래표는 창의 크기에 영향을 안받습니다. 절대크기와 너비가 되지요.
이해가시죠? 이해안가신다면 댓글달아주시는거 잊지 마시기 바랍니다. 그럼 다음에 또 만나요~
'HTML' 카테고리의 다른 글
| frame기본 (0) | 2011.07.25 |
|---|---|
| 셀의 정렬속성 (0) | 2011.07.21 |
| Rowspan, Colspan (0) | 2011.07.17 |
| 표만들기 기초 (0) | 2011.07.14 |
| 글자색바꾸기, <BODY TEXT>, <FONT COLOR> (0) | 2011.07.12 |
