sub_title
 HTML5
제   목 테이블에 링크 걸기
작성자 티란투라 등록일 2010-03-09 18:00:40 조회수 5,107

[테이블에 링크 걸기]

가끔은 이미지나 텍스트가 아닌 테이블 자체에 링크를 걸어야 할 때가 있습니다. 아주 가끔이고, 그 방법도 쉽습니다.
아래 예제의 빨간줄 부분만 테이블 태그내에 추가해 주면 됩니다. ( 꼭 테이블이 아니라 <tr><td> 에 삽입해도
결과는 같습니다. )

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>테이블에 링크 걸기</title>
</head>
<body>
<table width="500" border="1" style=cursor:pointer;
onClick="document.location.href='http://www.webmadang.net'">
<tr>
<td>&nbsp;&nbsp;나는 링크 걸린 테이블</td>
</tr>
</table>
</body>
</html>


위의 소스를 테스트 해 보시면 알겠지만, 같은 창 내에서 링크된 페이지로 넘어갑니다.
링크란 것이 같은 창내에서 이동도 필요하지만, 새창이 열리면서 링크된 페이지로 넘어가야 할 경우도 있습니다.

[테이블에 링크 걸어서 새창으로 넘기기]

테이블 내 링크를 새창으로 열어서 넘길려면 자바스크립트의 도움이 쪼메 필요합니다. 아래 예제에서 파란색 자바스크립트 소스만 추가하시고, 빨간 색으로 되어있는 onClick 이벤트 발생시 호출되는 함수만 살짝 변경해 주시면 됩니다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>테이블에 링크 걸기</title>
<script type="text/javascript">
<!--
function openWindow(){

var new_window = window.open("about:blank");
new_window.location.href="http://www.webmadang.net";

}
//-->
</script>
</head>
<body>
<table width="500" border="1" style=cursor:pointer; onClick="javascript:openWindow();">
<tr>
<td>&nbsp;&nbsp;나는 링크 걸린 테이블</td>
</tr>
</table>
</body>
</html>

 
 
0
    
 
0
        list
 
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
line
reply cancel
 
번호 제목 글쓴이 추천 조회 날짜
34  웹표준에 맞게 td 높이 지정하기(html5 td height)   admin 웹마당넷 9 / 2 10308 2015-07-13
33  Input box의 Tabindex 순서 지정하기   member 컴쟁이 0 / 0 7331 2010-03-24
32  Fieldset을 이용한 이벤트 박스 만들기   member 컴쟁이 0 / 0 5383 2010-03-22
31  Meta Tag의 Refresh 속성을 이용한 페이지 자동 전환 기법   member 컴쟁이 1 / 0 3692 2010-03-19
30  테이블에 링크 걸기   member 티란투라 0 / 0 5107 2010-03-09
29  textarea 강제 줄바꿈하기   member 티란투라 3 / 0 14875 2010-02-19
28  SELECT BOX 크기를 style속성으로 고정시키기   member 티란투라 2 / 1 54038 2010-02-02
27  테이블 테두리를 얇게   member 티란투라 0 / 0 9924 2009-02-09
26  서로 다른 도메인간에 iframe 자동 리사이즈 하기   member 웹마니아 0 / 0 5310 2009-01-23
25  DHTML Scriptlet 보안강화로 X로 표시될때 처리방법   member 티란투라 0 / 0 3932 2009-01-14
24  HTML 테이블 선 조절하기 이미지   member 웹돌이 0 / 0 6925 2008-09-16
23  TEXTAREA에 스크롤바 없애기   member 티란투라 0 / 0 5093 2008-08-25
22  INPUT 박스에 한/영 토글없이 한글 입력하기   member 티란투라 0 / 0 3778 2008-08-16
21  윈도우즈 XP에서 이미지 툴바 없애기!   member 오렌지 0 / 0 6163 2008-06-20
20  TEXT 박스에서 오른쪽 정렬하기   member 티란투라 0 / 0 4532 2008-06-09
19  플래쉬 위에 레이어 띄우기   member 티란투라 0 / 0 4229 2008-05-25
18  html 색상표   member 오렌지 0 / 0 4967 2007-12-10
17  파일찾기 버튼을 이미지로 바꾸기   member 다자래 1 / 0 6500 2007-11-16
16  플래시 embed태그 말고 스크립트로 불러오기   member 웹돌이 0 / 0 5898 2007-10-09
15  input tag에 대한 정리!   member 웹돌이 0 / 0 4893 2007-10-09
14  html 프레임 나누기   member 웹돌이 0 / 0 6939 2007-10-09
13  레이어안에 스크롤 넣기!   member 웹돌이 0 / 0 6768 2007-09-29
12  새창 띄우기!   member 웹돌이 0 / 1 4712 2007-09-29
11  목록태그 (ul,ol)   member 웹돌이 0 / 0 5967 2007-09-29
10  투명 아이프레임 만들기!   member 웹돌이 0 / 0 4358 2007-09-29
write
1 [2] button