|
table-layout:fixed; 속성을 주면 폭이 100%로 고정된다.
{ align:center } 지정은 효과가 없다. table 태그에서 직접 지정해야 된다. align=center
가장 편한 사용법은 table 스타일 box 설정해 두고 table class=box align=center 모양.
셀 폭의 균형을 맞추기 위해 모두 폭 지정하지 않아도, 좁은 폭 1개만 지정할 수도 있다.
표(table) 꾸미기
table_CSS2
table 태그
border-collapse 속성
col 태그(<td>를 간단하게하는 <col>태그)
웹표준에 맞는 테이블
textarea를 표처럼 사용
1.
고정폭 표 : <table style="table-layout:fixed;"> : 폭이 늘어나거나 줄어들지 않게 고정폭 표를 만든다.
2.
<table width="100%">
<tr><td style="border-width:1px; border-color:rgb(254,204,133); border-style:dotted;"><P>표 테두리 점선 1픽셀(점선은 'dotted' 실선은 'solid')</P></td></tr>
<tr><td style="border-width:1px; border-color:rgb(254,204,133); border-style:dotted; border-top-style:none;"><P>둘째 줄 이하는 윗줄을 제거, 중복을 예방한다.</P></td></tr>
</table>
표 테두리 점선 1픽셀(점선은 'dotted' 실선은 'solid') |
둘째 줄 이하는 윗줄을 제거, 중복을 예방한다. |
3.
텍스트박스를 표처럼 사용 : <div align="center"><textarea cols="90" style="overflow:visible"> ... </textarea></div>
4.
표 내용을 태그와 함께 추출 : .innerHTML 속성
<TABLE cellSpacing=0 cellPadding="0" width="100%" border align="center" bgcolor="#00FFFF"><TR><TD valign="top" onmouseover="alert(this.innerHTML)">
<p>이 표(셀)에 마우스를 올려보면 확인할 수 있다.</p>
</TD></TR></TABLE>
|
이 표(셀)에 마우스를 올려보면 확인할 수 있다.
|
5.
표 내용을 텍스트만 추출 : .innerText 속성
<TABLE cellSpacing=0 cellPadding="0" width="100%" border align="center"><TR><TD valign="top" onmouseover="alert(this.innerText)">
<p>이 표(셀)에 마우스를 올려보면 확인할 수 있다.</p>
</TD></TR></TABLE>
|
이 표(셀)에 마우스를 올려보면 확인할 수 있다.
|
6.
런타임에 색칠하기
<TABLE cellSpacing=0 cellPadding="0" width="100%" border="0" align="center"><TR><TD valign="top" onmouseover="orgBack=this.style.background; this.style.background='black'" onmouseout="this.style.background=orgBack">
<p>표(셀)의 배경색 런타임에 색칠하기 : .style.background 속성, 원래의 배경색을 저장했다가 복구하는 것이 중요하다.</p>
</TD></TR></TABLE>
|
표(셀)의 배경색 런타임에 색칠하기 : .style.background 속성, 원래의 배경색을 저장했다가 복구하는 것이 중요하다.
|
| 
바이블로 Bible_ro 다운로드
0 분
19 분
