div 레이아웃 문의.

dave · Post by **dave** » 2005 07 11 20:59 49

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="50" height="15">name</td>
<td height="15"><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="2" /></td>
</tr>
<tr>
<td width="50" height="15">email</td>
<td height="15"><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="3" /></td>
</tr>
<tr>
<td width="50" height="15">website</td>
<td height="15"><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="4" /></td>
</tr>
<tr>
<td width="50">comment</td>
<td><textarea name="comment" id="comment" cols="50" rows="10" tabindex="1"></textarea></td>
</tr>
<tr>
<td width="50" valign="top"></td>
<td align="right">
<input name="submit" type="submit" id="submit" class="input_submit" tabindex="5" value="Post" src="submit" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</td>
</tr>
</table>

이런식의 테이블을 css로 편집하는데 하루왠종일 답이 안나오네요..
두개의 div를 가지고 왼쪽에 50px 나머지는 자동px로 주려고 해도
2줄째 부터는 엇갈려 버리게되고..

고수님들 어떻게 해야 좋을까요?
어떠한 생각으로 접근해야 할지 몰겠습니다 ㅠㅠ

박민권 · Post by **박민권** » 2005 07 11 23:55 16

게시판쪽에 적용하시려 하시는 것 같은데 이 부분은 테이블을 그대로 이용하시기를 권장합니다.
단,

Code: Select all

<td width="50" height="15">name</td>

이 부분을

Code: Select all

<th scope="row" width="50" height="15">name</th>

td->th로 바꾸고 scope="row"을 이용해 가로열의 헤더라는 것을 알려주면 좋겠습니다.
(scope="row"의 사용법을 제가 제대로 알고 있는 것인지 틀렸다면 아시는분 지적 부탁합니다.)

http://trio.co.kr/webrefer/html/struct/tables.html
위의 주소에서 table을 이용함에 있어서 웹접근성을 높이는 방법을 공부하실 수 있으실 겁니다.

thead, th, caption등의 사용법을 익히셔서 접근성을 높이시고

colgroup, col 등의 사용법을 익히셔서 테이블을 작성에 유연성을 높여보시기 바랍니다.

테이블로 레이아웃을 구성하려 하는 것은 잘못된 것이지만 님이 지금 하시고자 함은
테이블로 구성하여야 하는 것이라 보며 단 지금까지의 단순한 테이블이 아닌 웹접근성을
고려한 테이블을 제작하시면 좋을 것이라 생각합니다.

신승식 · Post by **신승식** » 2005 07 12 13:02 10

아래처럼 dl, dt, dd를 이용해보면 어떨까요?
그리고 폼 앞에 이름들에는 꼭 label을 붙여주세요.

Code: Select all

<!-- 앞에 생략 -->
<style type="text/css">
	dt {display:inline; float:left; width: 8em;}
	#submit-paragraph {text-align: right}
	#comment {width:85%}
</style>
</head>

<body>

<!-- 중간 생략 -->

<dl>
	<dt><label for="author">name</label></dt>
	<dd><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="2" /></dd>
	<dt><label for="email">email</label></dt>
	<dd><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="3" /></dd>
	<dt><label for="url">website</label></dt>
	<dd><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="4" /></dd>
	<dt><label for="comment">comment</label></dt>
	<dd><textarea name="comment" id="comment" cols="50" rows="10" tabindex="1"></textarea></dd>
</dl>
<p id="submit-paragraph">
	<input name="submit" type="submit" id="submit" class="input_submit" tabindex="5" value="Post" src="submit" />
	<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<!-- 뒤에 생략 -->
</body>

Mozilla 한국 커뮤니티

div 레이아웃 문의.

div 레이아웃 문의.

이것은 그대로

정의 목록을 써보시면 어떨까요?

Who is online