[table] HTML - <table> 태그 ★ 테이블 (= 표작성 = table태그 = 테이블태그) ※ 셀병합 (= 셀합치기)</table>

1. <table> 예제 - 테이블 (= 표)
2. <table> 정의
3. <table> 구문
4. <table> 속성 (※ CSS로 대체)
5. <table> 이슈 - 레이아웃 단점
6. <table> 예제 - 셀 병합 (= 셀 합치기)
7. <table> 예제 - 중앙정렬
8. <table> 예제 - CSS로 테이블 꾸미기
9. <table> 예제 - div 태그로 테이블 만들기
10. <table> 예제 - 높이 100% 설정
11. <table> 예제 - 테이블 이중 테두리 만들기 (= 선 겹침)

<table> 예제 - 테이블 (= 표) 

 

<table>
 <tr>
   <th>HTML - 홈짱닷컴 (homzzang.com)</th>
   <th>CSS - 홈짱닷컴 (homzzang.com) </th>
 </tr>
 <tr>
   <td>무료</td>
   <td>무료</td>
 </tr>
</table>

 
결과보기

<table> 정의

 
테이블 (= 표) 만들기.

 

---

 

1. 

• 시작태그와 종료태그로 구성
• <table> 태그는 기본적으로 하나 또는 그 이상의 <tr>, <th>, <td> 태그와 함께 사용. 
• 좀 더 복잡하게 만들 땐, <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody> 등 태그도 이용
• HTML5에서 더 이상 지원 안 되는 속성들 (= CSS로 표현해야 하는 속성들) : "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", "width"
• <table> 태그 이용해 홈페이지 기본 구조 작성 금지. (※ 달력, 시간표, 게시판 등 순수한 표 용도로만 사용.)

 
2.

모든 브라우저 지원.

 

3. MDN <table> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

 

<table> 구문

 
<table 속성="속성값">
    <tr>
        <th>제목1</th>

        <th>제목2</th>

    </tr>

    <tr>

        <td>내용1</td>

        <td>내용2</td>

    </tr>

</table>

 

<table> 속성 (※ CSS로 대체)

<table> 이슈 - 레이아웃 단점 

 

1. 웹표준 위배 : 태그 자체 의미 상 안 맞음. / HTML・CSS・JS 분리에 부적합.

2. 웹접근 위배 : 순차적 내용 배열에 부적합해서, 접근성 (스크린리더 등) 불편.

3. 웹관리 복잡 : <div> 사용 시 보다 훨씬 다량의 복잡・중첩적 요소 구조가 됨.
4. 웹통일 불편 : 크로스 브라우징 불편. (= 브라우저마다 동일 화면 구현 불편)
5. 반응형 불편 : 다양한 기기에 적합한 화면 레이아웃 구성에 매우 불편한 구조.

 

※ 도표 의미 경우엔, <table> 태그 사용 무방.

<table> 예제 - 셀 병합 (= 셀 합치기) 

 

https://homzzang.com/b/html-72

 

<table> 예제 - 중앙정렬

<table style="width:OOpx; margin: 0 auto;">
또는,

<table style="width:OO%; margin: 0 auto;">

 

PS. 해당 테이블 너비는 부모요소 너비보다 작아야 함.

<table> 예제 - CSS로 테이블 꾸미기

<style type="text/css">

table {width:500px;}

caption {text-align:center; color:red; font-weight:bold;}

th {height:50px; background-color:black; color:white; font-weight:bold;}

td {text-align:center;  vertical-align:middle;padding:15px;background-color:green; color:white;}

</style>

<table>
   <caption>홈페이지 무료 제작 가이드 - 홈짱닷컴 (homzzang.com)</caption>
   <tr>
   <th>무료 학습</th><th>상세 설명</th>
   </tr>
   <tr>
      <td>HTML</td><td>홈페이지 뼈대</td>

   </tr>

   <tr>
      <td>CSS</td><td>홈페이지 스타일</td>

   </tr>

   <tr>
      <td>JavaScript</td><td>홈페이지 작동</td>

   </tr>

   <tr>
      <td colspan=2>홈짱닷컴 (homzzang.com)</td>

   </tr>

</table>

결과보기

<table> 예제 - div 태그로 테이블 만들기

<style>

div.table {border:5px solid; border-collapse:collapse; width:600px;}

div.td  {border:1px solid; width:200px; height:50px; float:left;
            box-sizing:border-box; line-height:50px; text-align:center;}

div.td span {color:red; font-weight:bold;}

div.boxmaker {clear:both;}

</style>

<div class='table'>

    <div class='td'> 홈짱닷컴  </div>

    <div class='td'> <span>homzzang.com</span>  </div>

    <div class='td'> 홈페이지 무료 제작  </div>

    <div class='boxmaker'>   </div>

    <div class='td'> HTML </div>

    <div class='td'> CSS  </div>

    <div class='td'> JS  </div>

    <div class='boxmaker'>   </div>

</div> 

결과보기

<table> 예제 - 높이 100% 설정

 

<style>

html { height:100%; }

body { height:100%; margin:0; padding:0; }

table {height:100%; width:100%; border-collapse:collapse}

td {text-align:center; color:silver;}

td.hz1 {height:50px; background:blue;}

td.hz2 {background:yellow}

td.hz3 {height:50px; background:red;}

</style>

 

<table>

    <tr>

        <td class='hz1'>홈짱닷컴</td>

    </tr>

    <tr>

        <td class='hz2'>Homzzang.com</td>

    </tr>

    <tr>

        <td class='hz3'>Since 2012</td>

    </tr>

</table>

 

결과보기

<table> 예제 - 테이블 이중 테두리 만들기 (= 선 겹침)

<style>

table {

  border: 10px solid red;

  box-shadow: 0 0 0 10px yellow;

}

</style>

 

<table>

  <tr>

    <td>홈짱닷컴</td>

    <td>Homzzang.com</td>

    <td>홈페이지 제작관리 강의</td>

  </tr>

</table>

 

결과보기