workSpace/JAVA

[PHP] HTML Tables

J o e 2021. 3. 3. 14:15 
<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>

결과물