table에 대한 HTML / CSS 정리

리액트에서 게시판 모양을 하는데 table이라는 html을 사용하게 되었다.

그 과정에서 좀 정리가 필요할 것 같아 오늘도 이 글을 쓰게 되었다.

 

 

1. <table> 태그란

table은 행과 열로 이루어진 표를 의미한다.

2. Table에 쓰이는 요소 혹은 태그

2-1. 필수 요소

- table

- tr : 행을 구분 짓는 태그이다.

- td : th에 대한 내용을 적는 태그이다.

 

2-2. 선택적 요소

- caption : 표 설명이나 제목을 입력하는 태그이다.

- thead : table에서의 머리 부분으로 전체 테이블의 내용이 무엇인지 알 수 있다.

- tbody : table의 내용에 해당하며, thead에 대한 내용을 정리하여 보여준다.

- tfoot : table의 마지막 결과물에 대한 정리를 할 수 있다.

           예를 들어 숫자가 tbody에 들어간다면, tfoot은 총합계가 될 수 있다.

- th : table에서의 제목과 같은 역할을 한다. 하지만 웹접근성에서는 지양한다고 한다.

 

3. 예제

3-1. 가장 심플한 예제

가장 심플한 예제는 아래와 같다.

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

 

3-2. 모든 태그를 활용한 예제

위에 언급한 태그를 모두활용하였을 때에는 아래와 같은 예제라고 할 수 있다.

<table>
	<caption>표 설명 요소</caption>
	<thead>
    	<tr>
            <th>제목1</th>
            <th>제목2</th>
            <th>제목3</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
            <td>제목1 내용1</td>
            <td>제목2 내용1</td>
            <td>제목3 내용1</td>
        </tr>
        <tr>
            <td>제목1 내용2</td>
            <td>제목2 내용2</td>
            <td>제목3 내용2</td>
        </tr>
        <tr>
            <td>제목1 내용3</td>
            <td>제목2 내용3</td>
            <td>제목3 내용3</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
            <td>테이블푸터1</td>
            <td>테이블푸터2</td>
            <td>테이블푸터3</td>
        </tr>
    </tfoot>
</table>

 

4. table CSS 적용 방법

오래전에 쓰고 웬만하면 크게 쓰일일이 없는 table이다 보니 CSS에 대해 쉽게 생각했지만, 몇 가지 특징만 유념하고 있다면 어렵지 않게 할 수 있다.

 

먼저, 실제 이미지를 참고로 CSS를 해보려고 한다.

리액트 table 사용

먼저 더미데이터를 토대로 테이블을 제작하였다. 이와 같은 html 코드를 위해서는 아래와 같은 구조로 정의를 내릴 수 있다.

이 코드는 리액트를 기준으로 제작되었습니다.

import React from 'react';
import board from 'dummy/board.json';
import 'styles/container2.scss';
const Board = () => {
  return (
    <article>
      <h2>Hot Board</h2>
      <table>
        <thead>
          <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
            <th>조회</th>
          </tr>
        </thead>
        <tbody>
          {board.board.map(item => (
            <tr key={item.id}>
              <td>{item.id + 1}</td>
              <td>{item.title}</td>
              <td>{item.userId}</td>
              <td>{item.writeDate}</td>
              <td>{item.viewCount}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </article>
  );
};

export default Board;

웹접근성을 고려하여 작성을 해보았다.

위에서 border.json은 임의로 더미 데이터를 만든 점을 감안해주면 될 것이다.

 

css 코드는 scss코드로 작성되었다.

article {
  padding: 5vw 10vh;
  > h2 {
    font-size: 2rem;
    margin-bottom: 5rem;
  }
  > table {
    border-spacing: 0;
    width: 100%;
    > thead {
      > tr {
        > th {
          line-height: 3rem;
          border-bottom: 1px solid #aaa;
          font-size: 1.2rem;
        }
        > th:first-child {
          width: 5%;
        }
        > th:nth-child(2) {
          width: 70%;
        }
        > th:nth-child(3) {
          width: 10%;
        }
        > th:nth-child(4) {
          width: 10%;
        }
        > th:last-child {
          width: 5%;
        }
      }
    }
    > tbody {
      > tr {
        > td {
          line-height: 2rem;
          text-align: center;
          border-top: 1px solid #aaa;
        }
      }
    }
  }
}

 

 

여기서 몇가지만 추가적으로 적어본다.

 

border-spacing

인접하고 있는 표들의 테두리의 간격을 조절할 수 있다. 직접 커스터마이징하려는 경우 이 값은 0을 권장한다.

물론 상황에 따라 직접 값을 넣어줄 수 있다. 

td {
    border-spacing: 1px 2px 3px 4px;
}

이렇게 하면 상하좌우에 간격을 조정할 수 있다.

 

 

 

더 자세히 코드를 보고싶으면 필자의 깃허브 방문을 권장한다.

miok-jung 깃허브 소스 보러 가기

또한 현재 프로젝트는 아래 버튼을 클릭하면 된다.

miok-jung 현재 개인 프로젝트 보러 가기