표관련 태그(HTML)

<table>, <tr>, <td>, <th> 태그

- <table>로 먼저 표 전체 형태를 잡은 후 row를 <tr>로 만들고 row안에서 각 셀을 <td>로 만든다.

<table>
	<tr>
    	<td>셀1</td>
        <td>셀2</td>
        <td>셀3</td>
    </tr>
    <tr>
    	<td>셀4</td>
        <td>셀5</td>
        <td>셀6</td>
    </tr>
</table>

셀1	셀2	셀3
셀4	셀5	셀6

- 표의 첫번째 행에 각 열이 무엇을 나타내는지 제목을 넣는경우가 있다. 이때 <th>태그를 사용한다. <td>태그와 같은데 차이점은 글을 중앙에 배치해주고 글씨도 긁게 나타내준다.

<table>
	<tr>
    	<th>숫자</th>
        <th>영어</th>
        <th>한글</th>
    </tr>
    <tr>
    	<td>1</td>
        <td>a</td>
        <td>가</td>
    </tr>
    <tr>
    	<td>2</td>
        <td>b</td>
        <td>나</td>
    </tr>
</table>

숫자	영어	한글
1	a	가
2	b	나

 

 

colspan, rowspan 속성

- 표를 가로로 합치고 싶을때 colspan을 이용한다. td나 th에 colspan속성으로 합칠 셀의 개수를 넣어주면 된다.

<table>
	<tr>
    	<th colspan="2">셀1</th>
        <th>셀2</th>
    </tr>
    <tr>
        <td>셀3</td>
        <td conspan="2">셀4</td>
    </tr>
    <tr>
        <td colspan="3">셀5</td>
    </tr>
</table>

셀1		셀2
셀3	셀4
셀5

- rowspan은 세로로 표를 합칠때 사용한다. 

<table>
	<tr>
    	<td rowspan="1">셀1</td>
        <td rowspan="2">셀2</td>
        <td rowspan="3">셀3</td>
    </tr>
    <tr>
    	<td>셀4</td>
    </tr>
    <tr>
    	<td>셀5</td>
        <td>셀6</td>
    </tr>
</table>

셀1	셀2	셀3
셀4
셀5	셀6

 

 

<caption>, <figcaption> 태그

- 표에 제목을 붙여줄때 <caption>과 <figcaption>을 이용한다. 

- <caption>은 <table> 태그안에 <caption> 태그를 넣어 제목을 넣는다. 그럼 표의 위쪽 중앙에 제목이 표시된다.

<table>
	<caption> 표 제목 </caption>
	<tr>
    	<th>숫자</th>
        <th>영어</th>
        <th>한글</th>
    </tr>
    <tr>
    	<td>1</td>
        <td>a</td>
        <td>가</td>
    </tr>
    <tr>
    	<td>2</td>
        <td>b</td>
        <td>나</td>
    </tr>
</table>

표 제목

숫자	영어	한글
1	a	가
2	b	나

- <figcaption> 태그는 <table>를 <figure> 태그로 감싸고 그 안에 <figcaption> 제목을 나타낸다. <caption>과 차이점은 제목이 <table>태그 보다 앞에 넣으면 표 위에 제목이 나오고 </table> 다음에 넣으면 밑에 제목이 나온다.

<figure>
	<figcaption>figcaption 제목 위</figcaption>
    <table>
        <tr>
            <th>숫자</th>
            <th>영어</th>
            <th>한글</th>
        </tr>
        <tr>
            <td>1</td>
            <td>a</td>
            <td>가</td>
        </tr>
        <tr>
            <td>2</td>
            <td>b</td>
            <td>나</td>
        </tr>
    </table>
    <figcaption>figcaption 제목 아래</figcaption>
</figure>

figcaption 제목 위

숫자	영어	한글
1	a	가
2	b	나

figcaption 제목 아래

 

aria-describedby 속성

- 화면 낭독기에서 표를 읽어줄 때 표가 어떤 표인지 부가적인 설명을 붙이고 싶다면 aria-describedby 속성을 이용하면 된다. 

<table aria-describedby="sum">
	<caption> 표 제목 </caption>
	<tr>
    	<th>숫자</th>
        <th>영어</th>
        <th>한글</th>
    </tr>
    <tr>
    	<td>1</td>
        <td>a</td>
        <td>가</td>
    </tr>
    <tr>
    	<td>2</td>
        <td>b</td>
        <td>나</td>
    </tr>
</table>

<p id="sum">이 표는 HTML공부를 위한 표이다.</p>

표 제목

숫자	영어	한글
1	a	가
2	b	나

이 표는 HTML공부를 위한 표이다.

 

 

<thead>,<tbody>,<tfoot> 태그

- thead 부분에 보통 각 열의 제목을 넣고 tbody에는 제목에 해당하는 내용들, tfoot은 합계나 요약내용을 나타낸다. 이렇게 표의 각 구조를 사용할때 사용된다.

- HTML4에서는 tfoot 태그를 tbody 태그 밑에 사용하면 오류가 생겨서 tfoot 태그를 tbody 태그보다 앞에 사용하는것을 기본으로 하고 있다. 하지만 HTML5부터는 tfoot 태그를 tbody밑에 두어도 상관없다.

<table>
    <thead>
        <tr>
            <td>헤드1</td>
            <td>헤드2</td>
            <td>헤드3</td>
            <td>헤드4</td>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
        <tr>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
            <td>내용</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">이것이 tfoot이다~ </td>
        </tr>
    </tfoot>
</table>

헤드1	헤드2	헤드3	헤드4
내용	내용	내용	내용
내용	내용	내용	내용
이것이 tfoot이다~

 

<col>, <colgroup> 태그

- 표에서 특정 열(column)에 스타일을 지정할때 <colgroup>과 <col>을 이용한다. <colgroup>안에 표에 있는 열의 개수만큼 <col> 태그를 만들어준다. 그리고 특정열에 해당하는 col태그에 스타일 효과를 주면 해당 열만 스타일이 적용된다.

- <col>,<colgroup> 태그는 <caption> 태그뒤에 그리고 <thead>,<tr>,<td>태그보다는 앞에 위치해야한다.

- span 속성으로 몇개의 열을 한번에 스타일 지정할 수 있다. 숫자로 몇개를 적용할지 값을 넣는다.

<table aria-describedby="sum">
	<caption> 표 제목 </caption>
    <colgroup>
    	<col style="background-color:gray">
        <col style="background-color:yellow">
        <col>
    </colgroup>
	<tr>
    	<th>숫자</th>
        <th>영어</th>
        <th>한글</th>
    </tr>
    <tr>
    	<td>1</td>
        <td>a</td>
        <td>가</td>
    </tr>
    <tr>
    	<td>2</td>
        <td>b</td>
        <td>나</td>
    </tr>
</table>

<p id="sum">이 표는 HTML공부를 위한 표이다.</p>

표 제목

숫자	영어	한글
1	a	가
2	b	나

이 표는 HTML공부를 위한 표이다.

<table aria-describedby="sum">
	<caption> 표 제목 </caption>
    <colgroup>
    	<col>
        <col style="background-color:gray" span="2">
    </colgroup>
	<tr>
    	<th>숫자</th>
        <th>영어</th>
        <th>한글</th>
    </tr>
    <tr>
    	<td>1</td>
        <td>a</td>
        <td>가</td>
    </tr>
    <tr>
    	<td>2</td>
        <td>b</td>
        <td>나</td>
    </tr>
</table>

<p id="sum">이 표는 HTML공부를 위한 표이다.</p>

표 제목

숫자	영어	한글
1	a	가
2	b	나

이 표는 HTML공부를 위한 표이다.