프로그래밍 공부 일기

2020년 11월 14일
평소에는 table 태그를 아무렇지도 않게 사용했지만, 단점도 있다는 것을 알고 다시 table 태그의 사용법을 정리한다.

table 태그란?

table 태그는 이름대로 테이블(표)을 작성하는 태그. 테이블의 기본 구조는 <table></table> 안에 <tr></tr> 로 테이블의 한 행을 정의하고, 그 안에 <td></td> 로 셀을 정의한다.
표의 각 셀에는 표제를 정의하는 헤더 셀과 데이터를 정의하는 데이터 셀이 있으며, 헤더 셀 내의 텍스트는 일반적인 브라우저에서는 굵은 문자로 센터링되어 표시된다.

HTML

<table border=1>
    <tr>
        <th>スポーツ</th>
        <th>種類</th>
        <th>考案者</th>
    </tr>
    <tr>
        <td>バスケ</td>
        <td>球技</td>
        <td>ネイスミスによって考案されたスポーツ</td>
    </tr>
</table>

실행 결과

장점

텍스트 등의 덩어리가 되어 있는 요소를 단조 레이아웃으로 하는 경우에는 몇 가지 방법이 있어, table 태그를 이용하는 방법은 이전의 Web 사이트에서 자주 사용되고 있었다.
그 이점은 CSS에 기술하지 않고 가로 줄줄의 단조로 할 수 있다는 것이다. 세세한 기술 방법을 신경쓰지 않고 HTML 파일에 기술하는 것만으로 단조를 실현할 수 있다. CSS를 사용하여 vertical-align 속성을 사용하려면 table 태그를 사용하여 구현합니다. vertical-align 프로퍼티는 인라인 요소와 테이블 셀에만 사용하는 것으로, 폰트 조정을 할 수 있게 된다.

단점

수정이 어려운 일이다. 여러 사람이 유지보수를 하는 경우에 일이 경과하고 나서 코드를 재검토했을 때에, 마크업으로서의 HTML의 기술과 시각적인 스타일 조정으로서의 CSS가 혼재한 쓰는 방법이므로, 보기 어려워져 버린다.
또, 새롭게 단조로서 추가의 컬럼을 기술하고 싶은 경우에 table 안에 불필요한 요소 등을 더하거나, table 모두를 재작성하거나 필요가 나오는 경우가 있어 복잡해져 버린다.

참고문헌

테이블(테이블) 만들기
HTML로 table 태그를 사용하지 않고 단조 레이아웃하는 방법을 현역 엔지니어가 해설【초보자용】