2023. 9. 28. 08:24ㆍHTML CSS
<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>
숫자 | 영어 | 한글 |
---|---|---|
1 | a | 가 |
2 | b | 나 |
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공부를 위한 표이다.
'HTML CSS' 카테고리의 다른 글
링크 만들기(HTML) (0) | 2023.10.01 |
---|---|
이미지 태그(HTML) (0) | 2023.09.29 |
목록 관련 태그정리(HTML) (0) | 2023.09.27 |
텍스트 관련 태그 정리(HTML) (0) | 2023.09.27 |
무료 웹 호스팅 서비스(닷홈), FTP로 파일 올리기(FileZilla) (0) | 2023.09.27 |