[PHP] HTML Tables

<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

table에 border 속성

'workSpace > JAVA' 카테고리의 다른 글

티스토리툴바