태그자료
< 자료공유 < 태그자료
자료실

테이블 태그 2

페이지 정보

작성자 madalla 작성일13-02-08 09:30 조회1,649회 댓글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">&nbsp;</p>
</td>
<td width="125" onMouseOver=this.style.backgroundColor="#ff6ec7" onMouseOut=this.style.backgroundColor="">
<p align="center">&nbsp;</p>
</td>
<tr>
<td width="125" onMouseOver=this.style.backgroundColor="#ffcc00" onMouseOut=this.style.backgroundColor="">
<p align="center">&nbsp;</p>
</td>
<td width="125" onMouseOver=this.style.backgroundColor="#ff6ec7" onMouseOut=this.style.backgroundColor="">
<p align="center">&nbsp;</p>
</td>
</table>
표에 스타일 효과내기
Madalla's Space
<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 이렇게 하겠다는 표현입니다.

선의 종류도 여러종류가 있습니다. 간략하게 설명을 드리면
dotted
dashed
solid
double
ridge
groove

왼쪽에만 넣고 싶으시면
border-left:2px solid #cccccc; (right, top, bottom)이렇게 표현하시면 됩니다.

왼쪽만 선이 보이죠?

오른쪽 선입니다.

위에 선입니다.

아랫쪽 선입니다.


  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기