환영합니다. 바다아이 홈페이지 입니다.

'시장이나 돌면서 가짜 민생 외치는 이재명을 규탄한다. 싸우지 않을 거면 내려와라... 야당대표는 당신의 방탄이나 하는 자리가 아니다.'

이번주 로또 및 연금번호 발생!! |

HOME |

여기는? |

바다물때표 |

알림 (16) |

여러가지 팁 (1054) |

추천 및 재미 (150) |

자료실 (22) |

시사, 이슈, 칼럼, 평론, 비평 (584) |

끄적거림 (127) |

문예 창작 (703) |

바람 따라 (69) |

시나리오 (760) |

드라마 대본 (248) |

살인!

현재 접속자

바다아이에게 후원하기

개정 공동번역 성경보기

기존 공동번역 성경보기

소스 하이라이팅

도로명 주소검색

URL encode, decode

javascript 줄 맞추기

Hits :

전 체

html/css/xml - 테이블의 선을 단선으로 border-collapse 속성 보더값

이 름 : 바다아이 | 조회수 : 7188

Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: white;
  color: black;
}

.hljs-comment,
.hljs-quote {
  color: #800;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-title,
.hljs-name {
  color: #008;
}

.hljs-variable,
.hljs-template-variable {
  color: #660;
}

.hljs-string,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-regexp {
  color: #080;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-meta,
.hljs-number,
.hljs-link {
  color: #066;
}

.hljs-title,
.hljs-doctag,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
  color: #606;
}

.hljs-attribute,
.hljs-subst {
  color: #000;
}

.hljs-formula {
  background-color: #eee;
  font-style: italic;
}

.hljs-selector-id,
.hljs-selector-class {
  color: #9B703F
}

.hljs-addition {
  background-color: #baeeba;
}

.hljs-deletion {
  background-color: #ffc8bd;
}

.hljs-doctag,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
 font-style: italic;
}
</style>
<pre>
<code class="hljs">border-collapse는 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성입니다.

속성값으로는 collapse와 separate를 사용할 수 있습니다.

collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다.
 separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다.

위와 같이 border-collapse 속성갑을 collapse로 지정하고 border 속성을 추가적으로 지정하면 아래와 같이 깔끔한 테이블을 출력할 수 있습니다.

border-collapse:collapse;

border-collapse 속성은 테두리선의 표시방법만 지정하므로 반드시 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 합니다.

테이블의 셀이 많을때는 IE와 Firefox에서 조금 다른 모습으로 출력됩니다. IE에서는 추가적으로 TD element에 border 속성을 추가적으로 지정하면 됩니다.

&lt;table width=&quot;90%&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; border=&quot;1&quot; align=&quot;center&quot; style=&quot;border-collapse:collapse; border:1px gray solid;&quot;&gt;
&lt;tr&gt;
 &lt;td style=&quot;border:1px gray solid;&quot;&gt;HTML&lt;/td&gt;
 &lt;td style=&quot;border:1px gray solid;&quot;&gt;Hypertext Markup Language&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
 &lt;td style=&quot;border:1px gray solid;&quot;&gt;CSS&lt;/td&gt;
 &lt;td style=&quot;border:1px gray solid;&quot;&gt;Cascading Style Sheet&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

출처 : http://www.homejjang.com/09/border_collapse.php</code></pre>
 
결과 
&nbsp;
<table align="center" border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse; border:1px gray solid;" width="90%">
	<tbody>
		<tr>
			<td style="border:1px gray solid;">HTML</td>
			<td style="border:1px gray solid;">Hypertext Markup Language</td>
		</tr>
		<tr>
			<td style="border:1px gray solid;">CSS</td>
			<td style="border:1px gray solid;">Cascading Style Sheet</td>
		</tr>
	</tbody>
</table>

짧은 주소 : https://www.bada-ie.com/su/?291591779886

border-collapse는 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성입니다.

속성값으로는 collapse와 separate를 사용할 수 있습니다.

    collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다.
    separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다.

<table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;">
<tr>
 <td>border-collapse:collapse;</td>
</tr>
</table>

위와 같이 border-collapse 속성갑을 collapse로 지정하고 border 속성을 추가적으로 지정하면 아래와 같이 깔끔한 테이블을 출력할 수 있습니다.

border-collapse:collapse;

border-collapse 속성은 테두리선의 표시방법만 지정하므로 반드시 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 합니다.

테이블의 셀이 많을때는 IE와 Firefox에서 조금 다른 모습으로 출력됩니다. IE에서는 추가적으로 TD element에 border 속성을 추가적으로 지정하면 됩니다.

<table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;">
<tr>
 <td style="border:1px gray solid;">HTML</td>
 <td style="border:1px gray solid;">Hypertext Markup Language</td>
</tr>
<tr>
 <td style="border:1px gray solid;">CSS</td>
 <td style="border:1px gray solid;">Cascading Style Sheet</td>
</tr>
</table>


출처 : http://www.homejjang.com/09/border_collapse.php

결과

HTML	Hypertext Markup Language
CSS	Cascading Style Sheet

125 page / 125 page
번 호	카테고리	제 목	이름	조회수
13	html/css/xml	모바일 웹에서 이미지, 폰트 크기를 디바이스에 맞추기	바다아이	9319
12	리눅스 서버	리눅스 dns 시스템 모니터링 DNSTOP 사용방법, 설정	바다아이	7615
11	리눅스 데스크탑	리눅스 윈도우 대체 어플,, 프로그램들... 리눅스에서 유용한 프로그램들.	바다아이	10709
10	리눅스 서버	Password 없이 ssh, rsync 사용하기	바다아이	9220
9	리눅스 서버	리눅스 서버 중국 IP 차단	바다아이	9870
8	리눅스 데스크탑	리눅스 nvidia 드라이버 설치하기 64비트만...	바다아이	7404
7	리눅스 데스크탑	페도라 개발툴 설치하기	바다아이	7522
6	html/css/xml	ckeditor에 문자열이나 html 텍스트 넣을때 자바스크립트로 하는법	바다아이	7942
현재글	html/css/xml	테이블의 선을 단선으로 border-collapse 속성 보더값	바다아이	7189
4	javascript/jquery	자바스크립트 함수 모음...	바다아이	8704
3	리눅스 데스크탑	파이어폭스 firefox 서핑하다 보면 북마크 및 상단 메뉴 안 열릴때.. 먹통될 때... 한글입력	바다아이	7549
2	리눅스 서버	아파치 특정 폴더에서 php 등등 실행 방지하기. .htaccess	바다아이	7857
1	리눅스 서버	리눅스 캐시 메모리 비우기	바다아이	8519
처음 이전 121 122 123 124 125
\| \|

Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천 실행시간 : 0.05809 초
to webmaster... gogo sea. gogo sea.