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

'입만 나불거리고 행동하지 않는 민주당을 규탄한다.'

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

HOME |

여기는? |

바다물때표 |

알림 (26) |

여러가지 팁 (1125) |

추천 및 재미 (166) |

자료실 (25) |

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

끄적거림 (157) |

문예 창작 (734) |

바람 따라 (75) |

시나리오 (760) |

드라마 대본 (248) |

살인!

리눅스 데스크탑 (258)
리눅스 서버 (163)
윈도우 관련 (8)
freebsd 데스크탑 (31)
freebsd 서버 (34)
쉘 스크립트 (6)
html/css/xml (48)
html5 (4)
golang (184)
php (2)
디자인 관련 (1)
javascript/jquery (77)
DATABASE (9)
postgresql (45)
mariadb, mysql (38)
생활/쇼핑 (39)
컴퓨터/핸드폰 (48)
종교/자선 (3)
요리관련 (22)
음식관련 (19)
의학관련 (10)
건강/운동 관련 (14)
주식, 금융관련 (3)
자동차, 운전 관련 (21)
기계 관련 (10)
스포츠 관련 (1)
과학, 수학관련 (1)
문학관련 (8)
좋은 글 (8)
낚시관련 (1)
원예관련 (9)

현재 접속자

바다아이에게 후원하기

개정 공동번역 성경보기

기존 공동번역 성경보기

소스 하이라이팅

도로명 주소검색

URL encode, decode

리눅스 설명

javascript 줄 맞추기

Hits :

여러가지 팁

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

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

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

38 page / 38 page
번 호	카테고리	제 목	이름	조회수
15	리눅스 서버	리눅스 크론, cron 강의 설정, 설명.	바다아이	16217
14	리눅스 데스크탑	doxygen linux(소스 분석 툴), 개발 문서 자동 생성 html	바다아이	13216
13	html/css/xml	모바일 웹에서 이미지, 폰트 크기를 디바이스에 맞추기	바다아이	13662
12	리눅스 서버	리눅스 dns 시스템 모니터링 DNSTOP 사용방법, 설정	바다아이	12038
11	리눅스 데스크탑	리눅스 윈도우 대체 어플,, 프로그램들... 리눅스에서 유용한 프로그램들.	바다아이	16493
10	리눅스 서버	Password 없이 ssh, rsync 사용하기	바다아이	14773
9	리눅스 서버	리눅스 서버 중국 IP 차단	바다아이	15226
8	리눅스 데스크탑	리눅스 nvidia 드라이버 설치하기 64비트만...	바다아이	12033
7	리눅스 데스크탑	페도라 개발툴 설치하기	바다아이	12159
6	html/css/xml	ckeditor에 문자열이나 html 텍스트 넣을때 자바스크립트로 하는법	바다아이	12199
현재글	html/css/xml	테이블의 선을 단선으로 border-collapse 속성 보더값	바다아이	11319
4	javascript/jquery	자바스크립트 함수 모음...	바다아이	13130
3	리눅스 데스크탑	파이어폭스 firefox 서핑하다 보면 북마크 및 상단 메뉴 안 열릴때.. 먹통될 때... 한글입력	바다아이	12646
2	리눅스 서버	아파치 특정 폴더에서 php 등등 실행 방지하기. .htaccess	바다아이	12372
1	리눅스 서버	리눅스 캐시 메모리 비우기	바다아이	12788
처음 이전 31 32 33 34 35 36 37 38
\| \|

Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 chrome 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Debian + GoLang + PostgreSQL + Mariadb + PgBouncer + ProxySQL]
서버위치 : San Jose Datacenter 실행시간 : 0.03987 초
to webmaster... gogo sea. gogo sea.