HTML (테이블 태그)

1. 테이블 태그

- 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성해주는 태그입니다.
- <table>로 시작하고 </table>로 끝냅니다.
- <tr></tr>로 행을 생성, <td></td>로 셀을 생성합니다.
- <th></th>은 일반적으로 셀의 제목을 쓸때 사용합니다. 제목을 가운데 정렬, 굵은 글씨가 기본으로 설정되어있습니다.

- colspan 속성 : 셀을 가로로 합침
    <td colspan= '합칠 열의 개수'>
- rowspan 속성 : 셀을 세로로 합침
    <td rowspan= '합칠 행의 개수'>

 <table border="1"> 

<!--border은 테이블의 테두리에 선을 나타냅니다.-->

        <tr>

            <td>첫번째 셀</td><td>두번째 셀</td>

        </tr>

        <tr>

            <td>세번째 셀</td><td>네번째 셀</td>

        </tr>

        <tr>

            <td>다섯번째 셀</td><td>여섯번째 셀</td>

        </tr>

    </table>

첫번째 셀	두번째 셀
세번째 셀	네번째 셀
다섯번째 셀	여섯번째 셀

 

    <table border="1">

        <tr>

            <td colspan="2">첫번째+ 두번째 셀</td>

        </tr>

        <tr>

            <td>세번째 셀</td><td>네번째 셀</td>

        </tr>

        <tr>

            <td>다섯번째 셀</td><td>여섯번째 셀</td>

        </tr>

    </table>

첫번째+ 두번째 셀
세번째 셀	네번째 셀
다섯번째 셀	여섯번째 셀

    <table border="1">

        <tr>

            <td>첫번째 셀</td><td>두번째 셀</td>

        </tr>

        <tr>

            <td rowspan="2">세번째 + 다섯번째 셀</td><td>네번째 셀</td>

        </tr>

        <tr>

            <td>여섯번째 셀</td>

        </tr>

    </table>

첫번째 셀	두번째 셀
세번째 + 다섯번째 셀	네번째 셀
	여섯번째 셀

- colgroup 태그
- colgroup 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 합니다.

    <table>

        <caption><p><b>KDT 수강생 리스트</b></p></caption>

        <colgroup>

            <col style="width: 100px; background-color: pink;">                         <!-- css문법 1-->

            <col style="width: 200px; background-color: skyblue;">                  <!-- css문법 2-->

            <col style="width: 300px; background-color: rgb(213, 240, 160);"> <!-- css문법 3-->

        </colgroup>

        <tr>

            <th>이름</th>                                  <!-- css문법1 적용-->

            <th>연락처</th>                              <!-- css문법2 적용-->

            <th>주소</th>                                  <!-- css문법3 적용-->

        </tr>

        <tr>

            <td>김사과</td>                               <!-- css문법1 적용-->

            <td>010-1111-1111</td>                    <!-- css문법2 적용-->

            <td>서울시 서초구 양재동</td>        <!-- css문법3 적용-->

        </tr>

        <tr>

            <td>반하나</td>                                <!-- css문법1 적용-->

            <td>010-2222-2222</td>                  <!-- css문법2 적용-->

            <td>서울시 강남구 역삼동</td>        <!-- css문법3 적용-->

        </tr>

        <tr>

            <td>오렌지</td>                                <!-- css문법1 적용-->

            <td>010-3333-3333</td>                  <!-- css문법2 적용-->

            <td>서울시 동작구 사당동</td>        <!-- css문법3 적용-->

        </tr>

    </table>

 

***다만, 현재 테이블 태그는 예전만큼 많이 사용되지 않습니다.

테이블은 여전히 데이터를 표시하는 데 유용하지만, 웹 페이지의 레이아웃을 구성하는 데는 권장되지 않습니다. 대신, 시맨틱 HTML 요소와 CSS를 활용하여 웹 페이지를 구조화하고 스타일링하는 것이 모던 웹 개발의 추세입니다. CSS의 Flexbox와 Grid 레이아웃 등을 활용하여 웹 페이지의 레이아웃을 구성하는 것이 더 현대적이고 유연한 방법입니다. 이렇게 하면 웹 페이지가 다양한 화면 크기와 장치에서 레이아웃을 보다 쉽게 조정할 수 있으며, 웹 접근성과 호환성을 더욱 개선할 수 있습니다.