테이블 태그 2
페이지 정보
작성자 madalla 작성일13-02-08 09:30 조회2,475회 댓글0건본문
<table> </table> |
테이블의 시작과 끝을 알리는 태그... 위치, 선의 두께, 색깔 등 많은 옵션을 줄 수 있습니다. |
<tr> </tr> |
가로선-Table Row 의 약자 |
<td></td> |
세로선-Table Data 의 약자 |
<th></th> |
셀의 제목 |
<table border="3" cellspacing="1"> |
테두리선 크기,셀과 셀 사이의 간격을 조정합니다. 표를 안보이게 하려면 <table border="0"> 이렇게 하시면 되겠져~ |
<table bgcolor="#ff0000" cellpadding="1"> |
셀과 내부 글자와의 간격을 벌려줌, 바탕색을 지정합니다. |
<table width="300" height="300" > |
Table 넓이와 높이 지정합니다. |
<td coispan="3" rowspan="3"> |
셀을 가로(colspan),세로(rowspan)로 합칩니다. |
<td align="left,center,right" valign="top, middle , bottom > |
좌우,중앙,상하 등으로 조정할 수 있습니다.(글자내용을) |
그러면...지금부터...여러 예제를 보여 드리겠습니다.
2줄 2칸(가로2세로2)표만들기 | |||||||||||||||||||
|
<table border="1" width="216"> <tr> <td width="50%"><p>첫줄첫칸 </p></td> <td width="50%"><p>첫줄둘째칸 </p></td> </tr> <tr> <td width="50%"><p>둘째줄첫칸 </p></td> <td width="50%"><p>둘째줄둘째칸 </p></td> </tr> </table> | ||||||||||||||||||
표의 정렬 방식(align), 높이(height)와 넓이(width) 조절하기 | |||||||||||||||||||
|
<table border="1" width="250" height="100"> <tr> <td width="25%">첫째칸 </td> <td width="25%">둘째칸 </td> <td width="25%">셋째칸 </td> <td width="25%">넷째칸 </td> </tr> </table> | ||||||||||||||||||
표의 테두리 선 조절하기 | |||||||||||||||||||
표의 두께를 0으로 했을때 | |||||||||||||||||||
|
<table border="0" width="250" height="20"> <tr> <td width="25%">첫째칸 </td> <td width="25%">둘째칸 </td> <td width="25%">셋째칸 </td> <td width="25%">넷째칸 </td> </tr> </table> | ||||||||||||||||||
표의 두께를 10으로 했을때 | |||||||||||||||||||
|
<table border="10" width="250" height="20"> <tr> <td width="25%">첫째칸 </td> <td width="25%">둘째칸 </td> <td width="25%">셋째칸 </td> <td width="25%">넷째칸 </td> </tr> </table> | ||||||||||||||||||
표의 바탕색 조절하기 | |||||||||||||||||||
표 전체에 색 넣기 | |||||||||||||||||||
|
<table border="1" width="250" bgcolor="yellow"> <tr> <td width="50%"><p>첫줄첫칸 </p></td> <td width="50%"><p>첫줄둘째칸 </p></td> </tr> <tr> <td width="50%"><p>둘째줄첫칸 </p></td> <td width="50%"><p>둘째줄둘째칸 </p></td> </tr> </table> | ||||||||||||||||||
표마다 다른색 넣기 | |||||||||||||||||||
|
<table border="0" width="250"> <tr> <td bgcolor="red">빨간색 </td> <td bgcolor="blue">파란색 </td> <td bgcolor="green">초록색 </td> </tr> </table> | ||||||||||||||||||
표에 롤오버 효과내기(표에 마우스를 갖다대보세요~) | |||||||||||||||||||
|
<table border="1" width="250"> <tr> <td width="125" onMouseOver=this.style.backgroundColor="#ffcc00" onMouseOut=this.style.backgroundColor=""> <p align="center"> </p> </td> <td width="125" onMouseOver=this.style.backgroundColor="#ff6ec7" onMouseOut=this.style.backgroundColor=""> <p align="center"> </p> </td> <tr> <td width="125" onMouseOver=this.style.backgroundColor="#ffcc00" onMouseOut=this.style.backgroundColor=""> <p align="center"> </p> </td> <td width="125" onMouseOver=this.style.backgroundColor="#ff6ec7" onMouseOut=this.style.backgroundColor=""> <p align="center"> </p> </td> </table> | ||||||||||||||||||
표에 스타일 효과내기 | |||||||||||||||||||
|
<table width="250" style="border:1px solid #cccccc;"> <tr> <td align="center"> Madalla's Space </td> </tr> </table> | ||||||||||||||||||
border:1px solid #cccccc;
border을 1px의 선으로 solid(선으로)하고 색은 #cccccc 이렇게 하겠다는 표현입니다. 선의 종류도 여러종류가 있습니다. 간략하게 설명을 드리면
왼쪽에만 넣고 싶으시면 border-left:2px solid #cccccc; (right, top, bottom)이렇게 표현하시면 됩니다.
|