[html] 표 만들기

데이터엔지니어/front

by 숭밍 2023. 7. 21. 13:14

행은 가로축, 열은 세로축을 의미하는 것을 알고 들어가자!

다음 사진은 표의 테두리 만들기이다. <head> 태그 안에 <style>태그를 사용하여, 표의 테두리를 보여준다. 이 부분은 뒷 시간에 자세히 다루기로 하자.

표의 테두리 만들기

<table></table>, <caption></caption> 태그는 표를 제작할 때 사용한다.

<table> 태그는 표 제작의 시작과 끝을 의미한다. <caption>은 표 제목을 나타내는데, <table> 안에 사용하면 제목이 표의 위 중앙에 위치한다.

<tr></tr>과 <td></td>,<th></th>는 행과 셀을 만드는 태그들이다.

<tr> 태그를 사용하여 행을 만든다. <td> 안에는 내용을 입력 받는다.

<th>는 표 안의 제목, 표의 제목 말고, 표의 행 제목을 만들 때 사용한다. 더 굵은 글씨로 표현이 된다.

<thead></thead>는 표에서의 제목 부분에 해당

<tbody></tbody>는 표 내용(본문)에 해당

<tfoot></tfoot>는 표의 요약 마무리 부분에 해당한다.

표로 나타내면 아래와 같다.

이렇게 지정해놓게 되면 나중에 화면 낭독기를 통해 표를 이해하는데 수월해진다.

이 외에 <tbody>가 너무 길어지면 화면에 다 안 담길 수 있는데, js를 이용해 thead와 tfoot을 고정하고, tbody를 스크롤해서 이동할 수 있게 만들 수 있다. js 시간에 자세하게 다루어보자!

rowspan, colspan 행/열 병합

rowspan은 행끼리 합치는 것, colspan은 열끼리 합치는 것이다.

ex) <td rowspan ="n"> 내용 </td>

(*n은 합칠 셀의 개수이다.)

표 병합

<colgroup></colgroup>과 <col> 이 두가지는 열의 배경색이나, 너비를 바꿀 때 사용한다.

<cogroup>은 <caption> 다음에 들어가야한다.(표가 시작되기 전, 어디를 어떻게 다룰지의 사전 알림 느낌?!)

<col>은 배경색이나 너비를 바꾸고 싶은 열 1개만 지정할 때 사용한다.

<colgroup>은 <col>을 감싼다. 따라서 여러개의 <col>이 들어갈 수 있으며, 표 저네 열 개수만큼 <col>이 들어가야한다. 배경색이나, 너비를 적용하고 싶지 않은 열이 있더라도 자리메꿈으로 인해 그 자리를 <col>이라 넣어야 한다

<colgroup>과 <col>의 사용법