[HTML] 표 관련 태그

표를 만드는 태그

• <table></table> : 기본적인 표를 생성해주는 태그
• <tr></tr> : 표의 행을 나타내는 태그
• <th></th> : 표의 제목 셀을 나타내는 태그(중앙 정렬 및 굵게 표시)
• <td></td> : 한개의 열을 만드는데 사용하는 태그
• <caption></caption> : 테이블의 제목이나 내용을 추가하는 태그, 기본 위치는 테이블 중앙 위

 

<코드>

<table border="1">
        <caption><b>웹 브라우저의 종류</b></caption>
        <tr>
            <th>브라우저명</th>
            <th>제조사</th>
            <th>홈페이지</th>
        </tr>
        <tr>
            <td>익스플로러</td>
            <td>ms</td>
            <td>https://www.microsoft.com</td>
        </tr>
        <tr>
            <td>크롬</td>
            <td>google</td>
            <td>https://www.google.com</td>
        </tr>
        <tr>
            <td>사파리</td>
            <td>애플</td>
            <td>https://www.apple.com</td>
        </tr>
</table>

• border : <table> 태그의 속성으로 표의 테두리 두께를 지정, border를 지정하지 않으면 테두리가 표시되지 않는다.

* Tip

vs code와 같은 편집기에서 table>(tr>th*3)*3와 같이 작성 후 탭을 누르면 일일이 입력하지 않아도 위와 같은 구조의 태그들이 자동으로 생성된다. (<table> 태그 1개 / <tr> 태그 1개 + <th> 태그 3개 조합 3세트 생성)

 

<결과>

 

표의 행과 열 합치기

• rowspan : <td> 태그의 속성으로 지정한 행만큼 행 병합
• colspan : <td> 태그의 속성으로 지정한 열만큼 열 병합 

 

<코드>

<table border="1">
        <caption><b>웹 브라우저의 종류</b></caption>
        <tr>
            <th>브라우저명</th>
            <th>제조사</th>
            <th>홈페이지</th>
        </tr>
        <tr>
            <td rowspan="2">익스플로러</td> <!--행 병합-->
            <td>ms</td>
            <td>https://www.microsoft.com</td>
        </tr>
        <tr>
            <td colspan="2">google</td> <!--열 병합-->
        </tr>
        <tr>
            <td>사파리</td>
            <td>애플</td>
            <td>https://www.apple.com</td>
        </tr>
</table>

 

<결과>

 

 

표의 구조를 만드는 태그들

• <thead></thead> : 표의 머리말에 해당하는 태그로 테이블에 한 개만 존재 가능(자동으로 중앙 정령 및 굵게 표시됨)
• <tbody></tbody> : 표의 본문에 해당하는 태그로 테이블에 여러 개 존재 가능
• <tfoot></tfoot> : 표의 꼬리말(요약 등)에 해당하는 태그로 테이블에 한 개만 존재 가능

 

<코드>

 <table border="1">
        <thead>
            <tr>
                <th>브라우저명</th>
                <th>제조사</th>
                <th>홈페이지</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>익스플로러</td>
                <td>ms</td>
                <td>https://www.microsoft.com</td>
            </tr>
            <tr>
                <td>크롬</td>
                <td>구글</td>
                <td>https://www.google.com</td>
            </tr>
        </tbody>
        <tbody>
        	<tr>
            	<td>사파리</td>
                <td>애플</td>
            	<td>https://www.apple.com</td>
			<tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">총 개수</td>
                <td>3개</td>
            </tr>
        </tfoot>
</table>

 

<결과>

 

 

<tr>, <th>, <td>와 <thread>, <tbody>, <tfoot>의 차이

• <tr>, <th>, <td>
  • 하나의 표와 셀을 만드는데 사용
  • 간단한 정보만 보여주면 되고, 동적인 기능이나 접근성이 크게 중요하지 않은 경우 사용
• <thead>,<tbody>,<tfoot>
  • 표의 구조적인 구분을 위해 <tr>들을 묶는 그룹 태그
  • 접근성, 유지보수 측면에서 사용하는 것이 좋고, 반응형 웹에서는 구조화된 방식이 훨씬 많이 쓰임