표 관련 태그

▶ 표 관련 태그

• table 태그
  : 웹 문서에서 자료 정리를 위해 주로 사용하는 태그
  : 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell)이라고 함
  : table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함
  
  
• tr 태그
  : Table Row의 약자로 한 행을 나타내는 태그
  
  
• td 태그
  : Table Data의 약자로 한 행의 한 컬럼( == 셀)을 나타내는 태그
  
  
• th 태그
  : Table Header의 약자로 컬럼명을 표시하는 용도의 태그
  : 기본 성질은 td 태그와 같으나, 추가적으로 굵은 글씨, 가운데 정렬이 이루어짐
  
  
• caption 태그
  : 테이블의 제목이나 설명 내용을 추가하는 태그

<!-- border = "1" : table, td 태그에 1px짜리 검은색 테두리 추가 -->
    <table border = "1">
        <caption>
            <strong style = "color:blue;">웹 브라우저의 종류</strong>
        </caption>
        <tr> <!-- 1행 -->
            <th>브라우저</th> <!-- 1행 1열 -->
            <th>제조사</th> <!-- 1행 2열 -->
            <th>제조사 홈페이지</th> <!-- 1행 3열 -->
        </tr>
        <tr> <!-- 2행 -->
            <td>크롬</td>
            <td>Google</td>
            <td>https://www.google.com</td>
        </tr>
        <tr> <!-- 3행 -->
            <td>엣지</td>
            <td>MS</td>
            <td>https://www.microsoft.com</td>
        </tr>
    </table>

---

• 행 병합 (rowspan), 열 병합 (colspan)
  : td 또는 th 태그에 작성하는 속성
  : rowspan : 행 (상하)병합
  : colspan : 열 (좌우)병합

    <h3>회원 정보</h3>
    <!-- width(폭/너비), height(높이) -->
    <table border = "1">
        <tr> <!-- 1행 -->
            <th width="70px">이름</th>
            <td width="210px"></td>
            <th width="140px" height="140px" rowspan="2">사진</th>
        </tr>
        <tr> <!-- 2행 -->
            <th>연락처</th>
            <td></td>
            <!-- 병합한 셀에 해당하는 것 지우기 -->
        </tr>
        <tr> <!-- 3행 -->
            <th height="35px">주소</th>
            <td colspan="2"></td>
            <!-- 병합한 셀에 해당하는 것 지우기 -->
        </tr>
        <tr> <!-- 4행 -->
            <th height="140px">자기소개</th>
            <td colspan="2"></td>
        </tr>
    </table>

---

• 테이블 구조 설정
  - thead : 테이블의 상단 부분 영역 (컬럼명)
  - tbody : 테이블의 중단 부분 영역 (실제 값, 내용)
  - tfoot : 테이블의 하단 부분 영역 (합계)

        <table class="tb3">
            <thead>
                <tr>
                    <th>이름</th>
                    <th>나이</th>
                    <th>주소</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>홍길동</td>
                    <td>34</td>
                    <td>서울시 강남구</td>
                </tr>
                <tr>
                    <td>박철수</td>
                    <td>28</td>
                    <td>경기도 부천시</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="2">총인원</th>
                    <th>2명</th>
                </tr>
            </tfoot>
        </table>

    <!-- HTML 문서의 스타일(크기, 색상, 모양 등)을 지정하는 태그  == CSS -->
    <style>
        .tb3{
            border: 2px solid black;
            border-collapse: collapse;
        }
        .tb3 th, td{
            border: 1px solid black;
        }
        .tb3 thead{
            background-color: green;
        }
        .tb3 tbody{
            background-color: yellow;
        }
        .tb3 tfoot{
            background-color: orange;
            color : white;
        }
    </style>