AND_END

11. HTML 테이블 본문

HTML

11. HTML 테이블

하둉이 2018. 12. 22. 00:38
반응형

* HTML 테이블


: HTML 에서 테이블은 <table> 태그를 사용하여 만들 수 있습니다.

  각 테이블의 행은 <tr> 태그를 사용합니다. 

  테이블의 헤더 부분은 <th>로 정의됩니다.

  셀은 <td> 태그로 정의됩니다.

  

  그럼 예제를 살펴보도록 합시다.


- 기본적인 표는 테두리가 없이 정의됩니다.


<!DOCTYPE html>
<html>
<head>


<table style="width:100%">
  <tr>
    <th>이름</th>
    <th>전화번호</th> 
    <th>나이</th>
  </tr>
  <tr>
    <td>이**</td>
    <td>010-</td> 
    <td>20</td>
  </tr>
  <tr>
    <td>김**</td>
    <td>010-</td> 
    <td>30</td>
  </tr>

<tr>
  <td>박**</td>
  <td>010-</td> 
  <td>40</td>
  </tr>
</table>


</body>
</html>



실행 결과 





- 표에 테두리를 추가하는 예제 


<!DOCTYPE html>
<html>
<head>


<style>

table, th, td {
  border: 1px solid black;
}

</style>


<table style="width:100%">
  <tr>
    <th>이름</th>
    <th>전화번호</th> 
    <th>나이</th>
  </tr>
  <tr>
    <td>이**</td>
    <td>010-</td> 
    <td>20</td>
  </tr>
  <tr>
    <td>김**</td>
    <td>010-</td> 
    <td>30</td>
  </tr>

<tr>
  <td>박**</td>
  <td>010-</td> 
  <td>40</td>
  </tr>
</table>


</body>
</html>


실행 결과




<style>

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

</style>



border-collapse: collapse; 을 style 부분에 추가하게 되면 표의 테두리가 얇아집니다


 실행결과




- 셀 Padding

: 셀 패딩은 셀 내용과 경계 사이의 간격을 지정합니다. 



<style>

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}


th, td {       
  padding: 15px;    //패딩 값이 커질수록 간격이 넓어진다.
}

</style>

실행 결과






- 왼쪽(오른쪽, 중앙) 정렬


<style>

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}


th, td {
  padding: 15px;    //패딩 값이 커질수록 간격이 넓어진다.
}


th {            // 테이블의 행에도 적용하고 싶다면 th,td { ...}
  text-align: left; //left는 왼쪽 정렬/right는 오른쪽 정렬/center은 중앙정렬
}

</style>

실행 결과


*위의 예제와이 차이 = 이름, 전화번호, 나이 텍스트의 위치(왼쪽 정렬)





-표의 테두리 간격 추가

: 테두리의 간격을 추가해 주려면 border-collapse: collapse; 이 코드를 제거해 주어야 합니다.



<style>

table, th, td {
  border: 1px solid black;
  //border-collapse: collapse;
}


th, td {
  padding: 15px;    //패딩 값이 커질수록 간격이 넓어진다.
}


th {            // 테이블의 행에도 적용하고 싶다면 th,td { ...}
  text-align: left; //left는 왼쪽 정렬/right는 오른쪽 정렬/center은 중앙정렬
}


table {
  border-spacing: 5px;  // 값이 커질수록 간격이 넓어진다.
}

</style>

실행 결과




- 여러 열을 포함하는 셀


위의 예제

<table style="width:100%">
  <tr>
    <th>이름</th>
    <th colspan="2">전화번호</th>
  </tr>
  <tr>
    <td>로맨틱</td>
    <td>010</td>
    <td>0000-0000</td>
  </tr>
</table>




- 테이블에 색 추가


<!DOCTYPE html>
<html>
<head>


<style>

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}


th, td {
  padding: 15px;    //패딩 값이 커질수록 간격이 넓어진다.
}


th {            // 테이블의 행에도 적용하고 싶다면 th,td { ...}
  text-align: left; //left는 왼쪽 정렬/right는 오른쪽 정렬/center은 중앙정렬
}


table#t01 {
  width: 100%; 
  background-color: pink;
}

</style>


<table style="width:100%" id="t01"> // id 값을 입력
  <tr>
    <th>이름</th>
    <th>전화번호</th> 
    <th>나이</th>
  </tr>
  <tr>
    <td>이**</td>
    <td>010-</td> 
    <td>20</td>
  </tr>
  <tr>
    <td>김**</td>
    <td>010-</td> 
    <td>30</td>
  </tr>

<tr>
  <td>박**</td>
  <td>010-</td> 
  <td>40</td>
  </tr>
</table>


</body>
</html>


실행 결과





*정리*

- HTML <table> 요소를 사용하여 표 정의.

- HTML <tr> 요소를 사용하여 테이블 행 정의.

- HTML <td> 요소를 사용하여 테이블 데이터 정의.

- HTML <th> 요소를 사용하여 표제를 정의.

- CSS border-collapse 속성을 사용하여 셀 테두리 축소.

- CSS padding 속성을 사용하여 셀 텍스트 간격 조절.

- CSS text-alian 소성을 사용하여 셀 텍스트 정렬.

- CSS  border-spacing 속성을 사용하여 셀 사이의 간격 설정


반응형

'HTML' 카테고리의 다른 글

13. HTML 블로 및 인라인 요소 ( <div> <span> )  (0) 2019.01.05
12. HTML 목록  (0) 2019.01.03
10. HTML 이미지  (0) 2018.12.09
9. HTML 링크  (0) 2018.12.03
8. HTML CSS  (0) 2018.11.28
'HTML' Related Articles more