【CSS:link】테이블(Table)에서 셀(Cell) 전체에 링크 걸기

테이블 셀의 문자열에서의 링크가 아닌 문자가 포함된 셀 전체에 링크를 거는 방법입니다.

테이블의 셀에있는 문자열 만에 링크를 거는 경우에는, 간단하게 <a href="url">링크</a> 태그를 사용하지만, 마우스 포인터를 링크에 갖다 대면 링크에 적용되는 범위는 아래와 같이 문자열에 한정됩니다.

문자열에만 링크 걸기

display:block; width:100%; height:100%

테이블 셀의 공백에도 링크가 걸리게 지정하려면 "display : block; width : 100 %; height : 100 %" CSS를 사용합니다.

display:block;

링크 태그 <a>〜</a>는 인라인 요소이기에, 직접 다른 요소를 결합하여 CSS를 적용시킬 수 없기 때문에, 일단<a>リンクタグを블록 레벨 요소로 변환해야 합니다.

width:100%;height:100%

셀에 마우스 포인터를 올려 놓았을 때 전체에 빈틈없이 두루두루 링크가 활성화 되도록 "링크 범위 : 폭 100%, 높이 100 %"로 지정합니다.

<html>
 <head>
  <style>
　　table.sample { 
　　　width: 520px; 
　　}
	
　　table.sample td { 
	　width:100%;
	　border: 1px solid #c7c7bc; 
	　color: #404040; 
 　  }
 
　　table.sample td a{
	　display:block;
	　width:100%;
      height:100%;
 　  } 
　　table.sample td a:hover{
　　  background-color: #f49d9d;
 　  } 
  </style>     
 </head>
 <body>
　<table class="sample">
　　<tr>
　　　<td><a href="block_inline.html">셀 전체에 링크 걸기</a>
　　　</td>
　　</tr>
　</table> 
 </body> 
</html>

셀 전체에 링크 걸기

스폰서 링크

하지만, 위의 경우 셀 전체에 링크가 걸리지 않았습니다. 셀의 문자열을 중앙에 배치하고, 여백이 있는 셀(Cell)로 하기 위해 새로운 CSS를 덧붙여 보겠습니다. 단, 주의 사항은 셀의 여백을 만들기 위해 단순히 padding'은 사용하지 않는 것입니다.

"padding"으로 지정된 셀의 여백은 마우스를 올려 놓았을 때, 링크의 범위를 셀 전체가 아니라 'padding'에 주어진 값만으로 제한돼 버립니다.

padding:5px;

<html>
 <head>
  <style>
　table.sample1 { 
　　　width: 520px; 
　}
	
　table.sample1 td { 
	width:100%;
	text-align: center;
	color: #404040; 
	padding:5px;
	border: 1px solid #c7c7bc; 
　}
 
　 table.sample1 td a {
	　display:block;
	　width:100%;
	　height:100%;
　} 
　 table.sample1 td a:hover {
	　background-color: #f49d9d;
　} 
  </style>     
 </head>
 <body>
　<table class="sample1">
　　<tr>
　　　<td><a href="block_inline.html">셀 전체에 링크 걸기</a>
　　　</td>
　　</tr>
　</table> 
 </body> 
</html>

셀 전체에 링크 걸기

위의 경우도 마찬가지로 셀 전체에 링크가 걸리지 않았습니다. 아래와 같이 셀의 여백을 "line-height'로 지정하면 'padding'을 사용했을 때의 여백 문제를 해결할 수 있습니다. 이제 셀 전체가 대상 범위에 있습니다.

line-height；

<html>
 <head>
  <style>
　table.Tbsample { 
　　　width: 520px; 
　}
	
　table.Tbsample td { 
	　width:100%;
	　line-height: 2.5em;
	　border: 1px solid #c7c7bc; 
	　background-color: #ececec; 
	　text-align: center;
	　vertical-align:middle;
	　font-size: 12px; 
	　color: #404040; 
　}
 
　 table.Tbsample td a {
	　display:block;
	　width:100%;
	　height:100%;
　} 
　 table.Tbsample td a:hover {
	　background-color: #f49d9d;
　} 
  </style>     
 </head>
 <body>
　<table class="Tbsample">
　　<tr>
　　　<td><a href="block_inline.html">セル全体にリンクにかける</a>
　　　</td>
　　</tr>
　</table> 
 </body> 
</html>

셀 전체에 링크 걸기

▲　위의 셀에 마우스 포인터를 갖다 대면 셀 전체에 링크가 걸렸음을 알 수 있습니다.

스폰서 링크