<head>
<meta charset="EUC-KR">
<title>테스트</title>
<style>
table, th, td{
border:1px solid black;
border-collapse:collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<td>안</td>
<td>녕</td>
<td>50</td>
</tr>
<tr>
<td>하</td>
<td>세</td>
<td>요</td>
<td>?</td>
</tr>
</table>
</body>
표는 <table> 태그로 정의된다.
<tr> : table row
<td> : table data - 태그에 의해 데이터 셀로 나누어 진다. 표의 데이터를 담으며 텍스트, 이미지, 목록, 다른 테이블등과 같은 HTML요소의 모든 종류를 포함 할 수 있다.
<th> : table heading - 태그에 의해 제목들로 나누어질 수 있다.
테이블의 폭은 CSS를 사용해서 정의 될 수 있다.
<table style="width:300px">
<tr>
<td>안</td>
<td>녕</td>
<td>50</td>
</tr>
<tr>
<td>하</td>
<td>세</td>
<td>요</td>
<td>?</td>
</tr>
</table>
table에 border 속성
border 스타일을 지정하지 않을 경우, 테이블은 테두리 없이 표시된다.
테두리는 border속성을 사용하여 추가 할 수 있다.
<table border="1" style="width:300px">
<tr>
<td>안</td>
<td>녕</td>
<td>50</td>
</tr>
<tr>
<td>하</td>
<td>세</td>
<td>요</td>
<td>?</td>
</tr>
</table>
** border 속성은 CSS를 사용해서 적용시키는게 용이하다
<head>
<meta charset="EUC-KR">
<title>테스트</title>
<style>
table, th, td{
border:1px solid black;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<td>안</td>
<td>녕</td>
<td>50</td>
</tr>
<tr>
<td>하</td>
<td>세</td>
<td>요</td>
<td>?</td>
</tr>
</table>
</body>
위의 테이블을 보면 테두리가 2개씩 바운딩이 되어있는데
이를 한개로 축소 시키는 함수는 border-collapse이다.
<head>
<meta charset="EUC-KR">
<title>테스트</title>
<style>
table, th, td{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<td>안</td>
<td>녕</td>
<td>50</td>
</tr>
<tr>
<td>하</td>
<td>세</td>
<td>요</td>
<td>?</td>
</tr>
</table>
</body>
table의 셀 패딩
padding을 지정하지 않은 결우, 테이블 셀은 패딩 없이 표시된다.
패딩을 갖는 테이블을 표시하려면, css에 paddinf을 사용한다.
패딩을 주고 싶을때는
padding:5px;를 넣어주면 된다.
<head>
<meta charset="EUC-KR">
<title>테스트</title>
<style>
table, th, td{
border:1px solid black;
border-collapse:collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<td>안</td>
<td>녕</td>
<td>50</td>
</tr>
<tr>
<td>하</td>
<td>세</td>
<td>요</td>
<td>?</td>
</tr>
</table>
</body>
'workSpace > JAVA' 카테고리의 다른 글
[PHP] Login Logic 로직 및 함수 정리 (0) | 2021.03.03 |
---|---|
[PHP] Servlet 클래스 만들기 (0) | 2021.03.03 |
[PHP] basic knowledge (0) | 2021.03.03 |
basic info for HTML (0) | 2021.03.03 |
[Java][mysql][Swing] 연동한 간단한 미니 프로젝트 - GUI game - (GUI 란?) (0) | 2020.12.09 |