[HTML] 03_표 관련 태그

<meta name="viewport" content="width=device-width, initial-scale=1.0">

== 반응형 웹을 만들기 위한 설정(기계의 넓이를 인식)

table 태그

• 웹 문서에서 자료 정리를 위해 주로 사용하는 태그
• 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell) 이라고 함
• table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함

<tr> : Table Row의 약자로 한 행을 나타내는 태그
<td> : Table Data의 약자로 한 행의 한 컬럼(== cell)을 나타내는 태그
<th> : Table Header의 약자로 컬럼명을 표시하는 용도의 태그
	 : 기본 성질은 td와 같으나 추가적으로 굵은 글씨, 가운데 정렬이 이루어짐
     
<caption> : 테이블의 제목이나 설명 내용을 추가하는 태그



 <table border="1">
          
            <tr>   <!-- 1행 -->
                <th>브라우저</th>   <!-- 1행 1열 -->
                <th>제조사</th>   <!-- 1행 2열 -->
                <th>제조사 홈페이지</th>   <!-- 1행 3열 -->
            </tr>

            <tr> <!-- 2행 -->
                <td>크롬</td> <!-- 2행 1열 -->
                <td>Google</td> <!-- 2행 2열 -->
                <td>https://www.google.com</td> <!-- 2행 3열 -->
            </tr>

            <tr> <!-- 3행 -->
                <td>엣지</td> <!-- 3행 1열 -->
                <td>MS</td> <!-- 3행 2열 -->
                <td>https://www.microsoft.com</td> <!-- 3행 3열 -->
            </tr>

            <tr> <!-- 4행 -->
                <td>파이어폭스</td> <!-- 4행 1열 -->
                <td>Mozilla</td> <!-- 4행 2열 -->
                <td>https://www.mozilla.org</td> <!-- 4행 3열 -->
            </tr>

        </table>

위의 표가 화면에서 보이는 모습

행 병합(rowspan), 열 병합(colspan)

: td 또는 th 태그에 작성하는 속성

rowspan : 행(상하)병합
colspan : 열(좌우)병합

<table border="1">
            <tr>
                <th width="70px">이름</th>
                <td width="210px"></td>
                <th width="140px" height="140px" rowspan="2">사진</th>
            </tr>

            <tr>
                <th>연락처</th>
                <td></td>
            </tr>
            
            <tr>
                <th height="35px">주소</th>
                <td colspan="2"></td>
            </tr>

            <tr>
                <th height="140px">자기소개</th>
                <td colspan="2"></td>
            </tr>

        </table>

위의 표가 화면에서 보이는 모습

테이블 구조 설정 태그

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

밑의 표를 위한 css

            .tb3 {
                border: 2px solid black;
                border-collapse: collapse;
            }

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

            .tb3 thead {
                background-color: aquamarine;
            }

            .tb3 tbody {
                background-color: cornsilk;
            }

            .tb3 tfoot{
                background-color: goldenrod;
                color: red;
            }

        </style>

<table class="tb3">
            <thead>
                <tr>
                    <th>이름</th>
                    <th>나이</th>
                    <th>주소</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>홍길동</td>
                    <td>20</td>
                    <td>서울시 구로구</td>
                </tr>
                <tr>
                    <td>김미미</td>
                    <td>100</td>
                    <td>인천</td>
                </tr>
                <tr>
                    <td>조나나</td>
                    <td>50</td>
                    <td>서울시 성동구</td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <th colspan="2">총인원</th>
                    <th>3명</th>
                </tr>
            </tfoot>

        </table>

위의 표가 화면에서 보이는 모습