[HTML/CSS] 표(table)의 태그를 사용해서 깔끔하게 만들어보자

저번에 table을 만드는 방법과 tr, th, td에 대한 기본 정의를 한 적이 있다.

이번에는 table의 태그와 css를 이용해 좀 더 깔끔하게 만들어 볼 것이다.

1.thead와 tbody란?

<thead>와 <tbody>는 단어에서 알 수 있듯이 thead는 html에서 각 영역별로 head,body,footer라고 나누듯

table에서 콘텐츠 영역을 나눠 그룹화시킬 때 사용한다.

​

그리고 thead와 tbody는 table의 자식요소로써 table 밖에서 사용하면 안됨.

또한, table에서 <caption>, <colgroup>요소 아래에 위치힌다.

​

2. caption, colgroup이란?

caption와 colgroup 또한 table의 자식요소로써

caption는 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.

나 같은 경우 웹접근성으로 table이 어떤 폼인지 알려줄 때 사용한다.

​

colgroup의 경우 table에서 서식 지정을 위해 하나 이상의 col을 그룹으로 묶을 때 사용하며,

각 행이나 셀에 스타일을 반복하지 않고 col의 전체에 스타일을 적용하고 싶을 때 사용한다.

col마다 다른 스타일을 적용하고 싶을 때 사용할 수 있는데 대게 width값을 잡을 때 사용한다.

<table>
  <caption>상품코드, 제휴몰명, 상품명, 판매자ID, 판매가, 재고수량, 판매상태, 복사 등 상품조회</caption>
  <colgroup>
     <col style="width: 3%;">
     <col style="width: 35%;">
     <col style="width: 5%;">
     <col style="width: 7%;">
     <col style="width: 5%;">
   </colgroup>
   <thead>
      <tr>
        <th>No</th>
        <th>제목</th>
        <th>작성자</th>
        <th>등록일시</th>
        <th>조회수</th>
       </tr>
    </thead>
     <tbody>
       <tr>
         <td>10</td>
         <td><a href="#">공지사항 테스트</a></td>
         <td>관리자</td>
         <td>2021-10-20 15:43:55</td>
         <td>299</td>
       </tr>
       <tr>
         <td>9</td>
         <td><a href="#">공지사항 테스트</a></td>
         <td>관리자</td>
         <td>2021-10-20 15:43:55</td>
         <td>299</td>
       </tr>
        <tr>
         <td>8</td>
         <td><a href="#">공지사항 테스트</a></td>
         <td>관리자</td>
         <td>2021-10-20 15:43:55</td>
         <td>299</td>
       </tr>
       <tr>
         <td>7</td>
         <td><a href="#">공지사항 테스트</a></td>
         <td>관리자</td>
         <td>2021-10-20 15:43:55</td>
         <td>299</td>
       </tr>        
     </tbody>
</table>

위의 코드처럼 caption을 이용해 table에 대해 간단하게 설명해주며 colgroup 안에 col을 넣어 width값을 지정해서 주로 사용한다.

 

3. table 꾸미기

border속성

table에서 깔끔하게 테두리를 주고싶을 때 사용하는데 어디에 주느냐에 따라 그 느낌이 다르다.

table {border:1px solid red;} <!-- 첫번째 -->
table th {border:1px solid red;} <!-- 두번째 -->
table td {border:1px solid red;} <!-- 세번째 -->

첫번째는 table 자체를 border로 감싸 테두리를 줌

두번째와 세번째는 th와 td 각자에 border를 줘 감싸진 곳만 테두리가 생겻으며 띄어진부분이 싫어서 table에 cellspacing="0"을 줌

 

이번엔 table 자체에 border-collapse 옵션을 줘봤을 때 경우이다.

css로 배경컬러도 줘보고 한번 꾸며봤다ㅎㅎ

table {width: 100%; padding: 10px 0; border-collapse: collapse;}
table th {text-align: center; font-weight: 300; color:#fff; padding: 5px 0; background-color: #652D87;}
table td {text-align: center; padding: 5px 0; border-bottom: 1px solid #B5B5B5;}

위의 css코드가 추가된 부분이며, border-collapse: collapse를 주면 cellspacing="0"과 동일한 효과를 나타낸다.

border-bottom 이렇게 주면 아래 선만 생성되며, border(전체), border-top(위 선만), border-left(왼쪽 선), border-right(오른쪽 선)

이렇게 구분해서 선을 줄 수 도 있다.

​

선 종류는 solid 외에 dashed(짧은 점선),dotted(점선), double(두 줄선) 등이 있다.

​

이렇게 table 태그에 대해 알아보았다.

​