2014. 1. 13. 12:25ㆍ기술집/WEB관련
html 을 만지다보면... 빠질수 없는것이 바로 table 입니다.
이 테이블 작업으로 많은것을 하고 있는데요...
예전에 한건데... 오늘 막상 생각이 안나서 인터넷을 찾아보는데..
검색어를 뭘로 해야할지... ;;
코드는 생각이 날똥말똥...
생각나는 키워드로 검색을 해봐도 그렇다할 결과는 안나오고..
기초적인 거라서 흘려버릴수도 있지만.. 기왕 이렇게 된거 제 블로그에 기록도 할 겸 한번 써봅니다 ㅎㅎㅎ
우선.. 테이블을 만들면... 이렇게 됩니다 ㅎ
<html 코드>
<table>
<tr>
<td width="150" height="50">a </td>
<td width="150" height="50">a </td>
<td width="150" height="50">a </td>
</tr>
<tr>
<td width="150" height="50">a </td>
<td width="150" height="50">a </td>
<td width="150" height="50">a </td>
</tr>
</table>
아... 여기가 중앙정렬이다보니까... 이런식으로 나오네요 ㅋㅋㅋ
아무튼... 이런 모양의 테이블이 나옵니다.
테이블의 각 셀(cell) 이 td 라는 태그로 인해서.. 각자 독립된 공간이라서 이런데요...
그렇다 쳐도 참... 틈이 많습니다.
이런 틈을 조절하는게 있죠???
바로... cellspacing 입니다 ㅎ
<table cellspacing="0">
이라고 입력을 해주면??
이렇게 됩니다...
근데... 선이 좀 이상하죠???
단순히 틈만 없애준거라서.. 셀이 겹치는 부분은 2중선처럼 짙어집니다...
이걸 보고있으면 참 안타까운데요 ㅠㅠ
당연한 결과이긴 하지만... 테이블 안의 선들은 좀 보기좋게 정리를 하고 싶은것이
바로 사람의 마음이랍니다 ㅎ
테이블의 겹쳐있는 선을 하나로 정리하는 마법의 주문!!
<table cellspacing="0" style="border-collapse:collapse;">
자... 이렇게 인접하고 있는 선은 하나로 보이게 된답니다 ㅎㅎㅎㅎ
border-collapse
라는건데요... 여기에는 다음 2개로 지정할 수 있답니다.
border-collapse:collapse; // 인접한 셀의 선을 하나로 표시
border-collapse:separate; // 테이블의 각 셀을 각자의 선으로 표시
아래에 나와있는건... border-collapse 를 지정하지 않으면 기본으로 들어가는 사항이니까..
굳이 적을 필요는 없겠죠? ㅎㅎ
아무튼... 도통 생각이 안나는 통해 의도치않게 고생을 해서 기록으로 남깁니다 ㅎㅎ
저같은분 계시면.. 도움이 될 수도 있겠네요 ㅋ
'기술집 > WEB관련' 카테고리의 다른 글
| [CSS] 웹표준 브라우저에 따른 주의점 (0) | 2014.03.31 |
|---|---|
| [PHP] header를 이용한 다운로드 오류 문제 (0) | 2014.03.29 |
| [javascript] opener 액세스 거부현상 (0) | 2014.03.29 |
| [PHP] 웹페이지 자동로그아웃 기능설정 (0) | 2014.03.29 |
| 울트라서프 인터넷 접속 안되는 현상 (0) | 2013.12.19 |