Tailwind, HTML, CSS

HTML에서 <table>, <tr>, <th>, <td> 태그들은 모두 하나의 테이블을 구성하는 서로 다른 요소들이다.

🖥️ html

<table> <!-- 테이블의 시작과 끝을 정의 -->
    <tr> <!-- Table Row: 테이블의 행(가로줄)을 정의 -->
        <th> <!-- Table Header: 테이블의 헤더 셀을 정의 (열의 제목) -->
            제목
        </th>
    </tr>
    <tr>
        <td> <!-- Table Data: 테이블의 일반 데이터 셀을 정의 -->
            내용
        </td>
    </tr>
</table>

🖥️ jsx

<table className="w-full border-separate border-spacing-0 h-[280px]">
    <tr>
        <th scope="row" className="...">
            이름  {/* 헤더 셀 */}
        </th>
        <td className="...">
            신한은행  {/* 데이터 셀 */}
        </td>
    </tr>
    <!-- 다른 행들도 같은 구조로 반복 -->
</table>

장점

• 시맨틱한 HTML 구조를 제공 (웹 접근성 향상)
• 스크린 리더가 테이블 구조를 올바르게 해석 가능
• SEO 최적화에 도움
• 브라우저의 기본 테이블 스타일링과 호환

➡️ 이 태그들은 서로 다른 역할을 하지만,
하나의 테이블을 만들기 위해 함께 사용되는 연관된 태그들이다.