align / valign

Language/HTML 2010. 5. 18. 14:53

태그는 태그명령어와 각각의 속성을 가지고 있어요
align는 p,img,table,td,tr,div,span... 등 가지고 있고
valign는 tr,div,span.. 주로 많이 쓰입니다.

결론부터 말씀드리자면

align는 넓이를 기준으로 하고
valign는 높이를 기준으로 합니다.

보통 테이블에서 높이 많이 지정하죠


예제를 통해 설명드리겠습니다
9개의 셀이 들어있는 테이블입니다

이 소스를 복사해서 메모장이나 기타편집프로그램으로 붙혀 넣으세요

그리고 화멸명은 아무거나 정하시되 확장자는 htm,html로 정하세요

예를 들어 (abc.html,abc.htm)으로요

 

<table width="600" border="1" cellpadding="0" cellspacing="0">
  <tr height="90" valign="top">
 <td width="33%" align="left">
    왼쪽정렬과 상단정렬
 </td>
 <td width="33%" align="center">
    가운데정렬과 상단정렬
 </td>
 <td width="34%" align="right">
    오른쪽정렬과 상단정렬
 </td>
  </tr>
  <tr height="90" valign="middle">
 <td align="left">
    왼쪽정렬과 중앙정렬
 </td>
 <td align="center">
    가운데정렬과 중앙정렬
 </td>
 <td align="right">
   오른쪽정렬과 중앙정렬
 </td>
  </tr>
  <tr height="90" valign="bottom">
 <td align="left">
    왼쪽정렬과 하단정렬
 </td>
 <td align="center">
    중앙정렬과 하단정렬
 </td>
 <td align="right">
    오른쪽정렬과 하단정렬
 </td>
  </tr>
  </table>
  실행하면 차이를 느낄수 있을꺼예요
  참고로 align는 left,center,right속성값을 가지고 있구요
  valign는 top,middle,bottom 속성값을 가지고 있답니다...

 

'Language > HTML' 카테고리의 다른 글

display:none 과 visibility:hidden 의 차이  (2) 2010.05.19
div display : inline block float  (0) 2010.05.19
textarea 스크롤 / WRAP  (0) 2010.05.18
ime-mode  (0) 2010.05.18
ime-mode  (0) 2010.05.18
: