처음에 tbody만 border="1"을 줘서 내용부분만 테두리를 치려고 했는데, tbody에는 border 속성이 없고 style도 해봤는데 안됐다.
그래서
thead로 옮겨서 th태그를 이용해 똑같이 하려하였지만 역시 안됐다.
그래서 그냥 caption태그를 이용해 제목을 달고 table에 border:1px solid gray를 적용하면 caption태그 부분은 테두리가 안쳐진다.
-> #123(밑에 style내용)이 그 흔적의 일부이다.
<style>
#123{
border:1px solid gray;
}
table, tr, td {
border: 1px solid gray;
}
.td1 {
text-align:center;
width:200px;
}
.td2{
width:350px;
}
</style>
---------------------------------------------------------------------------------------------
table, tr, td 속성에 테두리를 주고
td1과 td2는 따로 클래스를 만들어 넓이와 텍스트를 조정하였다.
---------------------------------------------------------------------------------------------
<table>
<caption style="font-size:18px; text-align:center;">회원 등록</caption>
<tbody id=123>
<tr>
<td class=td1>아이디</td>
<td class=td2><input type="text"></td>
</tr>
<tr>
<td class=td1>비밀번호</td>
<td class=td2><input type="text"></td>
</tr>
<tr>
<td class=td1>성명</td>
<td class=td2><input type="text"></td>
</tr>
<tr>
<td class=td1>이메일</td>
<td class=td2><input type="text" size="35px"></td>
</tr>
<tr>
<td class=td1>연락처</td>
<td><input type="text"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><button>등록</button> <button>조회</button></td>
</tr>
</tfoot>
</table>
결과 사진
그리고 상자 선이랑 버튼 선같은거를 다시 정리해보았다.
table{
border:1px solid gray;
border-top:1px dotted gray;
border-left:1px dotted gray;
}
.td1 {
text-align:center;
width:200px;
border:1px solid gray;
border-bottom: 1px dotted gray;
border-right:1px dotted gray;
}
.td2{
width:350px;
border:1px solid gray;
border-bottom:1px dotted gray;
border-right:1px dotted gray;
}
button{
border:0.1px dotted gray;
border-radius:2px;
outline: 0.1px dotted gray;
margin:1px;
}
</style>
</head>
<body>
<table id=123>
<caption style="font-size:18px; text-align:center;">회원 등록</caption>
<tbody>
<tr>
<td class=td1>아이디</td>
<td class=td2><input type="text"></td>
</tr>
<tr>
<td class=td1>비밀번호</td>
<td class=td2><input type="text"></td>
</tr>
<tr>
<td class=td1>성명</td>
<td class=td2><input type="text"></td>
</tr>
<tr>
<td class=td1>이메일</td>
<td class=td2><input type="text" size="35px"></td>
</tr>
<tr>
<td class=td1>연락처</td>
<td class=td2><input type="text"></td>
</tr>
</tbody>
<tfoot>
<tr class=td1>
<td class=td2 colspan="2" style="text-align:left"><button>등록</button> <button>조회</button></td>
</tr>
</tfoot>
</table>
'공부!' 카테고리의 다른 글
| jdbc 데이터 전송-받기 (0) | 2017.12.14 |
|---|---|
| 자바스크립트 시간/날짜 표시하기! (0) | 2017.12.14 |
| html 테이블 만들기 (0) | 2017.12.11 |
| 오버라이딩 오버로딩 (0) | 2017.12.06 |
| Java 소수점 자르기 (0) | 2017.01.08 |
