lecture Home > ASP.NET > 악꽁이의 ASP.NET 강의

악꽁이의 ASP.NET 강의

   강좌 최초 작성일 : 2002년 03월 18일
   강좌 최종 수정일 : 2002년 03월 19일

   강좌 읽음 수 :

   작성자 : acggongi(임 태영)
   편집자 : Taeyo(김 태영)

   강좌 제목 : HtmlTable, HtmlTableCell, HtmlTableRow

강좌 전 태오의 잡담>

재미있는 c# 그리고.. 재미있는 ASP.NET.. ^^;


강좌 시작 >

악꽁이의 강좌도 어느덧 여섯 번째가 되었군요. 악꽁이의 계획으로는 정품이 출시 되기 전까지는 컨트롤들을 다 마치려고 했는데 조금 아쉽고 죄송스럽습니다. 그래도 시작을 했으니 마무리를 해야 되겠죠? 서둘러 컨트롤들을 마쳐야 할 낀데...


1. HtmlTable Control

이번 강좌의 시작은 테이블 입니다. 웹페이지의 정렬에 주로 사용되는 테이블은 디자인 하시는 분들께서 많이 애용(?)을 하시는 컨트롤이기도 하며, 그 덕에(??) 프로그램 하시는 분들은 얽히고 설킨 테이블들을 보며 아주 곤욕을 치루기도 하죠.. 이놈의 테이블의 끝이 어디 인지, 끝날 만 하면 다시 시작하는 테이블들..
HtmlTable Control들은 웹 상에서 테이블을 동적으로 생성 시켜 주시고 하며, 행이나 열 또한 동적으로 추가 삭제 할 수 있게 해주는 컨트롤 입니다.. 다른 컨트롤들과 마찬가지로 직접 Html소스보기로 코딩 작업을 거쳐 생성할 수도 있으며, IDE에서 도구 상자를 이용하여 생성, 편집이 가능합니다. 먼저 문법을 살펴 보면 다음과 같습니다..

<table
runat="server"
id="programmaticID"
align=left | center | right
bgcolor="bgcolor"
border="borderwidthinpixels"
bordercolor="bordercolor"
cellpadding="spacingwithincellsinpixels"
cellspacing="spacingbetweencellsinpixels"
height="tableheight"
rows="collectionofrows"
width="tablewidth">

<tr><td><td></tr>
<tr><td><td></tr>
</table>

여기에서 주의 깊게 보셔야 될 부분은 "Rows" 부분입니다. 바로 뒤에 나오게 될 HtmlTableRow 컨트롤과 관련이 있는 이 속성은 동적으로 표의 행들을 생성하거나 편집 할 수 있게 해 줍니다. 이번 강좌는 그 제목이 HtmlTable 컨트롤 입니다. 여기에 더불어 살펴 보게 될 컨트롤들이 테이블과 직접적으로 관련이 있는 HtmlTableRow 컨트롤과 HtmlTableCell 컨트롤 입니다. 그러다 보니 예제는 각 컨트롤에 대한 문법을 마친 후 보시게 될 겁니다..

자~~! 이제 문법을 보셨죠? 별다른 거 없죠? 정말 없습니다. 그런데 이것 마져 귀찮으시다면 악꽁이와 함께 IDE에서 멩그러 봅시다.

웹폼을 하나 생성하고, 폼 디자이너에서 도구상자를 이용하여 Table을 하나 위치 시킵니다. Default로 3*3 의 테이블이 생성된 걸 확인 하셨죠? 이젠 팝업메뉴를 이용하여 Table컨트롤의 속성을 열어 보세요. 다음과 같은 속성창이 보이 실 겁니다.


테두리 설명
          크기 : border의 역할을 하며, 테이블 선의 두께를 지정합니다.
          색 : bordercolor의 역할을 하며, 테이블 선의 색을 지정합니다.
          하이라이트 & 그림자 : 사용자가 각각의 값을 넣어 속성을 변경합니다.

또한 IDE에서는 테이블에 행과 열을 삽입, 추가, 삭제가 가능하며 셀을 병합할 수도 있습니다.


프론트페이지 같은 웹 에디터에서 흔히 볼 수 있는 기능들 이므로 자세한 설명은 피하도록 하고, 다음으로는 이번 강좌의 두번째 주제인 HtmlTableRow Control에 대한 문법과 속성들을 살펴보겠습니다.


2. HtmlTableRow Control

<tr
runat="server"
id="programmaticID"
align="tablecontentalignment"
bgcolor="tablebgcolor"
bordercolor="bordercolor"
height="tableheight"
cells="collectionoftablecells"
valign="verticalalignmentofrowcontent" >


<td></td>
<td></td>
<td></td>

</tr>

HtmlTableRow 컨트롤은 기존 Html 태그의 <tr> 요소와 유사합니다. 테이블 내에서 표의 행을 구성하며, 속성 중 Cells에는 셀들의 컬렉션으로 구성되며, 이 속성을 이용하여 동적으로 셀들을 생성 또는 편집이 가능합니다.
IDE에서의 편집 또한 다음과 같이 선택 한 후 속성창에서 그 변경이 가능합니다.



3. HtmlTableCell Control

<td or th
runat="server"
id="programmaticID"
align="alignmentofcontentincell"
bgcolor="bgcolor"
bordercolor="bordercolor"
colspan="#ofcolscellspans"
height="tableheight"
nowrap="True | False"
rowspan="#ofrowscellspans"
valign="vertalignmentofcellcontent"
width="cellwidth">
셀의 내용
</td or /th>

Html 태그의 td 또는 th 와 유사한 역할을 하며, td는 일반적인 표의 셀을 의미하고, th는 표의 제목이 되는 셀을 의미합니다. 대부분이 HTML의 테이블 생성시 TD 부분의 속성과 유사 하므로 보충하여 설명 드리는 건 지면의 낭비에 불과 할 것 같아 생략하고 IDE에서의 셀 속성 변경은 마우스 모양이 다음과 같이 변하였을 때 선택한 후 Crtl 키를 눌러 여러 개의 셀을 다중 선택 하면 됩니다..


<예제 1>

첫 번째 예제는 테이블 컨트롤이 기존의 테이블과 그렇게 많은 차이 가 없다는 걸 보여 주기 위한 예제를 하나 준비 했습니다. 먼저 친숙함을 느껴 보시기 바랍니다.. 상상력이 풍부하지 않아서 그나마 생각 난 예제 입니다..ㅜㅜ

<예제 2>

모든 서버 컨트롤들은 동적으로 생성, 편집, 삭제가 가능하다고 말했습니다. 테이블 컨트롤 또한 동적 생성이 가능합니다. 그 방법 또한 간단해서 텍스트 박스나 select 박스에 입력된 값을 Row와 Cell에 생성해주면 테이블의 행과 열이 만들어지며, 또한 이렇게 만들어 진 셀들의 규칙에 따라 그 편집이 가능합니다. 일단 한번 보시라니깐요.

<HTML 디자인>


<코드비하인드>

결과는 여러분들의 컴퓨터에서 직접 확인해 보시기 바랍니다. 그리고 긴 소스 코드를 작게 줄여서 보여주다 보니 약간 이미지가 뿌옇게 나오는데 이 부분은 양해 바랍니다. 휴~ 또 한 과정의 강좌를 마쳤습니다. 이번 강좌가 나오기 까지 참 많은 시간이 소요된 것 같습니다. 머리가 딸리다 보니.. 멋진 여러분들 멋지게 공부하시고 멋지게 사세요.. 멋진 악꽁이었습니다.(ㅋㅋ)

Back