표 태그

이해하기 어려우니 잘 들어보자.

기본적인 표의 구조

표 생성-기본

기본적으로 표를 만드는 방법은 다음과 같다.

<caption>태그는 표 제목을 적어주는 태그이다
각 칸에 들어갈 데이터들을 <td></td> 태그로 감싼다.

한 행에 들어갈 <td>태그들을 <tr></tr>태그로 감싼다.

모든 행들을 <table></table>태그로 감싼다.

 

표의 구조를 다루기

표재목, 제목행, 결과행 사용

표에서 각 열의 내용을 설명해주는 표의 첫 행을 <thead></thead>태그로 감싸고

table data를 의미했던 <td>를 <th>태그로 바꾸어주면 html은 이부분이 표의 첫 행이고 정보를 표시하는 부분이라는 것을 인식한다. th태크로 감싸진 텍스트는 굵게 표시한다.

합계 등을 표의 맨 아래에 적을때는 <tfoot>이라는 태그로 감싸주면 인식한다.

그 외의 내용에 해당하는 부분은 <tbody>태그로 감싸주면 일반 데이터 부분이라고 인식한다.

이렇게 재목행과 결과행을 만들 수 있다.

만약 제목행이 아닌 제목열을 만들고 싶다면???

그럴때는 각 열을 tr로 만든 다음, tr 태그 안에 첫 td태그를 th태그로 바꾸어주면 제목열을 만들어줄 수 있다.

또는 열에 스타일을 부여할 수 있는 col과 colgroup태그를 활용하는 방법도 있다.

열에 스타일 부여하기

열에 스타일 부여하기

table태그 내의 caption태그 다음에 <colgroup></colgroup>태그를 넣어주고 그 안에 표의 열 개수만큼 <col> 태그를 적어준다. 그런 뒤 내가 스타일을 부여하고 싶은 열에 대응하는 <col>태그에 스타일을 부여하면 된다. 만약 여러 열에 같은 스타일을 부여하고 싶다면 span속성을 활용하여 묶어줄 수도 있다.

 

 

여러 칸을 합치기

표의 여러 칸을 합치고싶다면 어떻게 해야할까?

표의 합침을 시작하는 태그에 속성으로 rowspan="5" 혹은 colspan="6"이렇게 적어주면 된다.

여러개의 row를 합칠때는 rowspan이고 여러개의 column을 합칠때는 colspan이다.

이때 주의해야 할 점은 span을 함으로써 차지당하는 칸들은 소스코드에서 지워줘야 한다는 점이다.