http://poiemaweb.com/
table 테두리 안보이도록
* 각각의 테두리 1px씩 보이도록(배경색과 같게 하여 안보이도록하는것)
border-left:1px solid #000000
border- right:1px solid #000000
border- top:1px solid #000000
border- bottom:1px solid #000000
* 선자체를 없애는 것
border-right:none
border-left:none
border-top:none
border-bottom:none
* 테이블 외각선이 안 보이도록
<table frame=void>
*오른쪽 선 hidden으로 숨기기
<td style="border-right: hidden;">
- TABLE 테두리 없에고 아랫줄만 넣기 -
안녕하세요 늑대털쓴양입니다.
이번 강좌는 CSS 스타일 태그를 이용하여 테이블 테두리를 제어하는 강좌입니다.
html로는 border태그를 이용해 테두리 전체에 굵기를 주거나 없에는 방법만 있는데요
테이블에 CSS를 입혀 위,아래,왼쪽,오른쪽 일부분만 줄 수 있습니다.
<html> <head> <title>테이블 일부분만 선넣기</title>
</head>
<body>
<table border="0" width="400"> <tr> <td>첫째줄</td> </tr> <tr> <td>둘째줄</td> </tr> </table> </body> </html>
가로 400픽셀의 두줄짜리 테이블을 코딩했습니다.
border값이 0으로 되어있으니 테두리는 없겠죠.
미리보기해도 테두리가 없으니 첫째줄, 둘째줄 글자만 보일겁니다.
이제 스타일 태그를 입혀 봅시다.
헤드와 헤드사이에 아래의 스타일 태그를 선언합니다.
<style type="text/css"> .line{border-bottom:1px solid red;} </style>
.line 은 이름입니다. 점으로 시작하여 이름은 편한대로 정해주시면 됩니다.
border-bottom 은 테두리의 아래쪽이란는 뜻입니다.
border-top은 위쪽, border-left는 왼쪽, border-right는 오른쪽이 되는겁니다.
1px 는 선의 굵기를 조절하는곳이고 solid 는 선의 종류중 실선이라는 뜻입니다.
red 는 선의 색상입니다. 즉 위 CSS태그는 line이라는 이름으로
클래스명이 들어간곳에 빨간색 1픽셀 실선을 아래쪽에 넣겠다는겁니다.
<html> <head> <title>테이블 일부분만 선넣기</title> <style type="text/css"> .line{border-bottom:1px solid red;} </style> </head> <body> <table border="0" width="400"> <tr> <td class="line"> 첫째줄</td> </tr> <tr> <td class="line"> 둘째줄</td> </tr> </table> </body> </html>
위와같이 활용합니다.
헤드와 헤드사이에 CSS태그를 선언하고
테이블의 원하는 td에 클래스명을 줘서 아랫줄을 그어주는겁니다.
미리보기를 하면
위와같이 아랫줄에만 테두리가 들어가게 됩니다.
보통 게시판들을 보면 아랫줄만 그어져있는걸 보셨을겁니다.
위와같은 태그들은 보통 게시판을 만들때 많이 사용된답니다.
잘 활용해 보시기 바랍니다^^
html코딩중에서 테이블 테투리를 없애고 싶은데요 ..도통 검색해도 잘 안나오네요 ;;
<table style="border:solid 1px #FFF">
지금이 테이블에 적용할려고하는데요 지금 테이블 테두리가 나오고 있어서...큰테이블 테두리만
없애면 될꺼같은데...흠..어렵네요 ㅜ
<table width="995" height="600"align="top" border="1" bordercolor=#000000 style="border-collapse:collapse;">
<tr>
<td colspan=5><script>doc_write(flash_movie("<?=$g4['path']?>/img/mainflash_05.swf", "ids", 1000, 210, "transparent"));</script></td>
</tr>
<tr>
<td width="450" height="150"><?include_once("bada_tab.php");
?>
</td>
<td width="120">
<img src="/img/mainatca.gif" width="120" border=0 >
<center><a href="bbs/board.php?bo_table=B29"><strong>Emerson</strong></a>
<br><center><a href="bbs/board.php?bo_table=B29"><strong>Vadatech</strong></a>
<br><center><a href="bbs/board.php?bo_table=B29"><strong>Mercury<strong></a>
</td>
<td width="120"><img src="/img/mainserver.gif" width="120" border=0>
<center><a href="bbs/board.php?bo_table=B29"><strong>HP</strong></a>
<br><center><a href="bbs/board.php?bo_table=B29"><strong>Intel</strong></a>
<br><center><a href="bbs/board.php?bo_table=B29"><strong>Dell<strong></a>
</td>
<td width="120"><img src="/img/mainstorage.gif" width="120" border=0>
<center><a href="bbs/board.php?bo_table=B29"><strong>EMC</strong></a>
<br><center><a href="bbs/board.php?bo_table=B29"><strong>NetApp</strong></a>
<br><center><a href="bbs/board.php?bo_table=B29"><strong>Hitachi<strong></a>
</td>
<td width="120"><img src="/img/mainnetwork.gif" width="120" border=0>
<center><a href="bbs/board.php?bo_table=B29"><strong>Cisco</strong></a>
<br><center><a href="bbs/board.php?bo_table=B29"><strong>Data Killer</strong></a>
</td>
<!--<? echo latest_default("default","IT01,SA01,SA04","5","5");?>-->
</tr>
<td><?include_once("auto_tap_ys.php");?> </td>
<td width="120"><img src="/img/main00.gif" width="120" border=0></td>
<td width="120"><img src="/img/main01.gif" width="120" border=0></td>
<td width="120"><img src="/img/main02.gif" width="120" border=0></td>
<td width="120"><img src="/img/main03.gif" width="120" border=0></td>
</tr>
</table>
border="1" 이 테두리를 만듭니다..
네 ^ ^ 감사합니다 좀더 생각했으면 해결할것을.. ㅋㅋ 감사감사
[CSS 소스] 테이블 라인 테두리 없애기
테이블 라인 테두리 없애는 css 소스입니다. 많은 분들이 좋은 홈페이지 제작 하셨으면 좋겠습니다^^.
저희 모든 웹 블로그 많은 이용 부탁드립니다.
<html> <head> </title></title> <style type="text/css"> <!-- table.t1 {border: #000000 solid; border-width: 1px 0px 1px 0px} table.t2 {border: #000000 solid; border-width: 0px 1px 0px 1px} --> </style> </head> <body> 모든웹<table cellpadding=0 cellspacing=0 width=500 class="t1"> <tr> <td> </td>">http://cafe.naver.com/home051</td> </tr> </table> </body>
</html>
테이블 태그 안에서 제일 마지막 <td> 의 우측 테두리를 삭제할 경우
또는, 제일 마지막 <tr>의 모든 <td>의 하단 테두리를 삭제할 경우...
< style type ="text/css" >
table td :last-child border-right : none ;
table tr :last-child td border-bottom : none ;
< / style >
표테두리를 없애고 싶을 때... 물론 border=0 을 사용하는 게 아닙니다.
<table border=1 style='border-left:0;border-right:0;border-bottom:0;border-top:0'>
<tr>
<td>123</td>
</tr>
</table>
이렇게 하면 안쪽 테두리는 없어집니다. 문제는 바깥쪽 테두리는 어떻게 없애는지... 태그 좀 가르쳐 주세요...
답변채택율 100% 추천 0 비추천 0
<html style="border:0"> 간혹 저렇게 써야 할 상황이 생긴다~~~ 예를 들면 마이플랫폼이라던지 기타 툴에서 웹페이지를 넣어서 보여줘야 할때~ 출처: http://naragu.tistory.com/entry/html-테두리-없애기 [I am Naragu]
테두리 만드는 속성 테두리는 border 속성으로 만듭니다.
table, th, td 요소에 적용할 수 있습니다.
기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다.
<!doctype html>
<html lang ="ko" >
<head >
<meta charset ="utf-8" >
<title > CSS</title >
<style >
table {
width : 100% ;
}
</style >
</head >
<body >
<table >
<thead >
<tr >
<th > Lorem</th > <th > Ipsum</th > <th > Dolor</th >
</tr >
</thead >
<tbody >
<tr >
<td > Lorem</td > <td > Ipsum</td > <td > Dolor</td >
</tr >
<tr >
<td > Lorem</td > <td > Ipsum</td > <td > Dolor</td >
</tr >
<tr >
<td > Lorem</td > <td > Ipsum</td > <td > Dolor</td >
</tr >
<tr >
<td > Lorem</td > <td > Ipsum</td > <td > Dolor</td >
</tr >
<tr >
<td > Lorem</td > <td > Ipsum</td > <td > Dolor</td >
</tr >
</tbody >
</table >
</body >
</html >
표에 테두리 만들기 table 요소에 테두리를 만들면 표 외각에 테두리가 생깁니다.
<style >
table {
width : 100% ;
border : 1px solid #444444 ;
}
</style >
셀에 테두리 만들기 th, td 요소에 테두리를 만들면 각 셀에 테두리가 생깁니다.
<style >
table {
width : 100% ;
border : 1px solid #444444 ;
}
th , td {
border : 1px solid #444444 ;
}
</style >
테두리 사이의 간격을 없애고 싶다면 border-collapse 속성을 추가합니다.
<style >
table {
width : 100% ;
border : 1px solid #444444 ;
border-collapse : collapse;
}
th , td {
border : 1px solid #444444 ;
}
</style >
테두리와 내용 사이의 간격은 padding 속성으로 정합니다.
<style >
table {
width : 100% ;
border : 1px solid #444444 ;
border-collapse : collapse;
}
th , td {
border : 1px solid #444444 ;
padding : 10px ;
}
</style >
가로선 만들기 세로선 없이 가로선만 만들 때는 다음과 같이 합니다.
<style >
table {
width : 100% ;
border-top : 1px solid #444444 ;
border-collapse : collapse;
}
th , td {
border-bottom : 1px solid #444444 ;
padding : 10px ;
}
</style >
모든 셀에 한꺼번에 바탕색 지정 원래는 <td> 태그마다, 즉 각 칸(셀)마다 스타일을 지정해 주어야 하더군요. 그러나 이러면 너무 번거로웠습니다. 또는 td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }
이렇게 하면 한꺼번에 셀의 스타일을 지정할 수 있긴 하지만, 이러면 그 페이지에 있는 모든 테이블의 셀이 획일적으로 지정되어 버리기에 문제가 있습니다. 특히 페이지에 광고가 있다면, 그 광고의 테이블 셀도 여기서 지정한 대로 변하기 때문에, 광고의 레이아웃이 이상하게 됩니다. id 를 이용하면, 그 id에 해당되는 범위 내에서만, 셀의 배경색을 일괄적으로 지정할 수 있습니다. 우선 테이블 태그에 <table id="foo"> 이렇게 적당한 아이디(id)를 부여합니다. 단 아이디가 숫자로 시작하면 안되고, 한글이나 특수 기호가 포함되면 안되고, 중복되어서도 안됩니다. 한 HTML 페이지에 그 아이디는 단 하나뿐이어야 합니다. 즉 id="foo" 라는 아이디 정의가 다른 태그에도 있으면 안 됩니다. 무슨 아이디든 아이디는 고유 해야 합니다. #foo td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }
이 스타일 정의는, foo 라는 아이디를 가진 태그의 범위 내에 있는 모든 td 태그에 색을 지정하는 것입니다. 테이블 태그의 테두리 빈틈 없애기 <table> 태그에 style="border-collapse:collapse" 를 지정해 주면, td(셀)들 사이의 빈틈이 말끔히 없어집니다. 예제 코드: <html>
<head>
<style type="text/css">
#foo td { background-color:#FFDDDD; padding:10px; border:1px solid #ACB4F2; }
</style>
</head>
<body>
<table id="foo" style="border-collapse:collapse">
<tr><td>1번째 행의 1번째 칸</td> <td>1번째 행의 2번째 칸</td></tr>
<tr><td>2번째 행의 1번째 칸</td> <td>2번째 행의 2번째 칸</td></tr>
<tr><td>3번째 행의 1번째 칸</td> <td>3번째 행의 2번째 칸</td></tr>
</table>
</body>
</html>
기본 input 태그 text 타입 :
기본 textarea 태그 :
이 두 태그를 table안에 넣으려 했다.
필자가 table을 만들때 이 속성이 필자를 불편하게 했다.
* 각 table, tr, th, td에 style="border"로 테두리를 줌
* table에 border-collapse: collapse; 을 줘서 테이블간 간격을 없게 함
* input 태그 text 타입과 textarea 태 그에 style="width:100%"를 주어서 td안에 꽉 차게 함
이렇게 table을 만드는데 테두리안에 테두리가 있다.
또 input을 클릭하면 파랑색같은 테두리가 또! 또!! 또!!! 나온다.
너무 안 이쁘지 않은가???
이것이 필자에 디자인 존심을 건드렸다...
input과 textarea에 테두리를 없애리라!
input과 textarea에 테두리를 없애는 방법은 그다지 어렵지 않다!
style에 border: 0; 을 주는 것이다! 너무 쉽네...
border는 테두리를 뜻하는 속성이다.
그래서 border를 그냥 없애면 된다.
끝.
적용해보면
없어졌다!!
그런데 클릭시 파란색인지 뭔지 저 테두리는 계속 생긴다..ㅠ
저것도 없애보자!
이건 CCS에서 :focus로 지정하는 건데
html에서는
CSS에서는
이렇게 지정해주면!
된다!ㅎㅎ
그런데 저저저 /// 요런건 뭐지..
잡아서 끌면 지구 끝까지 커진다..;;
textarea 태그에 자동으로 되는 기능인데 이것도 지우자!
style에 resize: none; 을 넣어주면 된다.
최종적으로 적용해보면
깔끔하게 적용되었다!
출처: http://tastyloper.tistory.com/1 [테이스티로퍼] 출처: http://tastyloper.tistory.com/1 [테이스티로퍼]
HTML 테이블 모든 테두리 1px 주기 HTML 테이블 모든 테두리 1픽셀 주기 1px 테두리 테이블, 1px 테이블 1 방법 1[ 편집 ] < style >
.mytable { border-collapse : collapse ; }
.mytable th , .mytable td { border : 1px solid black ; }
</ style >
< table class = "mytable" >
< tr >< th > 번호</ th >< th > 이름</ th ></ tr >
< tr >< td > 1</ td >< td > 한놈</ td ></ tr >
< tr >< td > 2</ td >< td > 두시기</ td ></ tr >
< tr >< td > 3</ td >< td > 석삼</ td ></ tr >
</ table >
2 방법 2[ 편집 ] < style >
.mytable {
border-collapse : collapse ;
border-top : 1px solid black ;
border-left : 1px solid black ;
}
.mytable th , .mytable td {
border-bottom : 1px solid black ;
border-right : 1px solid black ;
}
</ style >
< table class = "mytable" >
< tr >< th > 번호</ th >< th > 이름</ th ></ tr >
< tr >< td > 4</ td >< td > 너구리</ td ></ tr >
< tr >< td > 5</ td >< td > 오징어</ td ></ tr >
< tr >< td > 6</ td >< td > 육개장</ td ></ tr >
</ table >
3 같이 보기[ 편집 ]
DIV 태그 테두리에 점선 지정 예제 보통 점선: <div style="border:1px dashed; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
좀더 굵은 점선 <div style="border:2px dashed; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
아주 굵은 점선 <div style="border:5px dashed; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
점으로 된 점선 위에서 사용된 dashed 는 실은 점이 아니라 짧은 직선들로 이루어져 있습니다. 아래와 같이 dotted 로 하면 "진짜 점"으로 된 점선이 만들어지기는 하는데, IE와 파이어폭스에서 서로 다르게 보이기 때문에 되도록, dashed 를 사용하는 것이 좋습니다. 즉 이 예제는 추천하지 않습니다. <div style="border:5px dotted; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
테이블 태그에 점선 지정 예제 <table style="border:1px dashed black; border-collapse:collapse;">
이미지, 테이블, 레이어 등의 테두리 형식, 색상, 두께를 지정하는 속성입니다.
01.<div style="border:1px solid red">네 변의 테두리 속성을 동일하게 한번에 설정</div>
02.<div style="border-style:solid;border-width:1px">
03.네 변의 테두리 속성을 동일하게 한번에 설정
04.</div>
05.<div style="border:1px solid red;border-width:2px 1px 2px 1px">
06.네변의 테두리 두께를 달리 한번에 설정
07.</div>
08.<div style="border:1px solid red;border-width:2px 1px">상하,좌우 두께가 같을때 약식 설정</div>
09.<div style="border-top:2px solid red">상단 테두리 설정</div>
10.<div style="border-right:1px solid red">우측 테두리 설정</div>
11.<div style="border-bottom:2px solid red">하단 테두리 설정하</div>
12.<div style="border-left:1px solid red">좌측 테두리 설정하기</div>
이와같은 형태로 스타일, 두께 색상을 한번에 또는 상하좌우 따로 설정이 가능합니다.
1. 테두리 스타일 (border-style)
속성
설명
none
테두리를 사용하지 않음, border-width 의 값은 0이 된다.
dotteed
점선
dashed
굵은 점선
solid
실선 (가장 많이 사용하는 속성)
double
이중 실선
groove
오목하게 들어간 액자 테두리 모양
ridge
볼록하게 나온 액자 테두리 모양
inset
내용이 잠긴 느낌의 입체선 모양
outset
내용이 튀어나온 느낌의 입체선 모양
2. 테두리 색상 (border-color)
색상명(black) 또는 색상코드(#000000)로 지정한다.
3. 테두리 두께 (border-width)
크기 단위 또는 중 하나를 선택하여 지정한다. (0은 테두리를 사용하지 않음)
1.<div style="border-width : [ thin | medium | thick | 크기단위 ]"></div>
2.<div style="border-width-top : [ thin | medium | thick | 크기단위 ]"></div>
3.<div style="border-width-right : [ thin | medium | thick | 크기단위 ]"></div>
4.<div style="border-width-bottom : [ thin | medium | thick | 크기단위 ]"></div>
5.<div style="border-width-left : [ thin | medium | thick | 크기단위 ]"></div>
★ 첫 번째 방법 1. 티스토리의 [관리자] 로 들어간다. 2. [스킨] - [HTML / CSS 편집] 메뉴로 들어간다. 3.
.imageblock { border: 1 px solid #ddd; padding:5px; margin:5px 0; }
4. border: 1px를 border: 0px .imageblock { border: 0 px solid #ddd; padding:5px; margin:5px 0; }
위의 방법이 되지 않는다면 두 번째 방법을 추가로 해보자.
1. 티스토리의 관리자로 들어간다. 2. [스킨] - [HTML / CSS 편집] 메뉴로 들어간다. 3. 단축키 [Ctrl + F]를 눌러 style.css 부분에 article table td 를 찾는다..article table th {background-color:#ccc; } /* 스킨디자인에따라 색상 변경 */ .article table td {padding: 2px; background-color:#eee; } /* 스킨디자인에따라 색상 변경 */ .dual table td, .triple table td {background-color:transparent; } /* 이미지 레이아웃 */
padding: 0px .article table th {background-color:#ccc; } /* 스킨디자인에따라 색상 변경 */ .article table td { padding: 0px; background-color:#eee; } /* 스킨디자인에따라 색상 변경 */ .dual table td, .triple table td {background-color:transparent; } /* 이미지 레이아웃 */
5. 저장하고 이미지 테두리 선이 제거되었는지 확인한다. 출처: http://air802.tistory.com/131 [SpringRain]
블로그 포스팅을 위해 표를 만들던 중에 표 안쪽 부분의 테두리(border)가 안 생기는 현상
( 표의 가장 바깥쪽 테두리만 생김 : (ex – border:1px solid #eee) )
그래서 CSS 사전을 찾아가며 <table/> 의 frame 속성이나 rules 속성 등을 적용해 보았지만,
증상에 차도가 없었다 -.-;
그래서 <table/> 말고 <td/> 에 border 를 주었더니, 셀끼리 겹치는 부분의 경우 서로의 border의
두께가 합쳐져서 겹치는 부분마다 2배의 두께를 가진 border가 생겼었다.
이 부분을 어떻게 할까 고민하다가 CSS 사전에서 다음과 같은 속성을 발견했다.
border-collapse : collapse
* table 에서 사용할 수 있는 style 속성
위의 경우는 겹치는 부분의 border 를 중복제거 하는 설정이고,
중복해서 표시하는 경우 는 border-collapse:separate 이다.
위의 스타일을 <table/> 에 적용하고,
<td/> 에는 별도의 border 를 정의했더니 깔끔하게 문제가 해결되었다
. seperate(x) –> separate(o) 오타가 있네요.
테이블(table) 태그를 사용해 표를 만든 뒤 각각의 셀, td 태그 간의 간격이 존재하거나 없는 경우 이를 변경하기 위해서 사용하는 css 속성이 바로 border-spacing 입니다. table {border-spacing: 2px;border-collapse: separate; border-spacing 속성을 사용하면 셀 사이, 즉 테두리간의 간격을 원하는데로 조정할 수 있습니다. 위에는 border-spacing 아래에 border-collapse 속성을 separate으로 지정하였는데 만약 spacing을 지정하였음에도 변화가 없다면 이 속성이 separate으로 설정되었는지 확인하시기 바랍니다. border-spacing은 separate일 경우에 적용됩니다. 그럼 아래 예제를 참고하세요. ! border-spacing 예제소스 코드보기 # border-spacing: 10px 인 경우 border-spacing: 10px;width: 30px;background: #ccc;
<body>
<table>
<tr><td>1<td><td>2<td><td>3<td></tr> 보시는 것처럼 테이블 안의 td태그, 즉 셀간의 간격이 10px입니다. 그럼 0px을 주고 어떻게 변하는지 보겠습니다. border-spacing: 0px;width: 30px;background: #ccc;
<body>
<table>
<tr><td>4<td><td>5<td><td>6<td></tr> 간격이 없는게 보이시죠? 이처럼 테이블의 간격을 조정할때 margin 이나 left , right 속성을 이용하지 않고 간단하게 border-spacing 으로 셀사이 간격이 가능한점 알아두시기 바랍니다.
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;">
위와 같이 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;">
HTML Hypertext Markup Language CSS Cascading Style Sheet
