HTML 간단하게 표 만들기

HTML 표 만들기

Overview

표 형식으로 데이터를 표현하는 것을 웹사이트에서 쉽게 찾아 볼 수 있습니다. 오늘은 그 표를 html 형식으로 어떻게 만드는지 알아보겠습니다.
저의 차트에는 CSS가 미리 적용되어 있습니다. 만약 필요하시다면 아래의 ‘CSS 확인하기’를 클릭하여 확인해주세요.

CSS 확인하기

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  color: #333;
  font-weight: 400;
  font-size: 16px;
}

table {
  max-width: 960px;
  margin: 80px auto;
}

caption {
  font-size: 18px;
  font-weight: 400;
  padding: 12px 0;
}

thead th {
  background: #0c3390;
  color: #fff;
  font-weight: initial;
}

tr { background: #f1f1f1; }

tr:nth-child(2n) { background: #e0e0e0; }

th, td {
  text-align: left;
  padding: 24px;
}

tfoot tr { background: none; }

tfoot td {
  padding: 12px 2px;
  font-style: italic;
  color: #8a97a0;
}

Basic Table

HTML <table>태그를 사용하여 표를 만들 수 있습니다. 시작태그와 끝태그가 존재하고, 그 안에 테이블 row, cell이 들어갑니다.

<table></table>

이제 테이블의 row 를 만들어 봅시다. 간단히 생각해서 테이블의 가로를 생각하시면 됩니다. <tr> 태그를 사용하면 표의 가로줄을 만들 수 있습니다.

<table>
	<tr></tr>
</table>

그러면 한 줄의 테이블안에 각 cell을 만들기위해서는 <td> 태그가 필요합니다. <td>태그는 표의 세로줄을 뜻합니다.
위에서 알려준 방법으로 표를 그려보았어요.

<table>
    <tr>
    	<td>No</td>
        <td>Name</td>
        <td>Age</td>
    </tr>
     <tr>
    	<td>1</td>
        <td>둘리</td>
        <td>43</td>
    </tr>
     <tr>
    	<td>2</td>
        <td>곰돌이 푸</td>
        <td>52</td>
    </tr>
    <tr>
    	<td>3</td>
        <td>스티치</td>
        <td>15</td>
    </tr>
</table>

html 기초 차트 그리기

Table Header Element

아주 기초적인 테이블을 만들었지만 아직 표의 맨 윗줄이 표 속성의 이름을 나타낸다는 표시가 안되어있어 컬럼 명인지 내용인지 구분이 가지 않습니다.

이때 Table Header Element인 <thead>를 사용하여 다른 데이터들과 구분지여서 사용할 수 있습니다. 가장 위쪽의 <tr> 태그를 <thead>로 감싸주세요. 그 후 <thead>안에 있는 <td> 태그를 <th> 태그로 바꾸어 주세요. 자 지금 우리는 테이블의 머리를 구분하였습니다. 그러면 몸통부분도 분리할 수 있겠죠. <tbody> 태그를 사용하시면 됩니다. <tbody>를 사용해 표의 나머지 부분을 감싸 주세요.

<table>
    <thead>
    	<tr>
            <th>No</th>
            <th>Name</th>
            <th>Age</th>
         </tr>
    </thead>
    <tbody>
         <tr>
            <td>1</td>
            <td>둘리</td>
            <td>43</td>
        </tr>
         <tr>
            <td>2</td>
            <td>곰돌이 푸</td>
            <td>52</td>
        </tr>
        <tr>
            <td>3</td>
            <td>스티치</td>
            <td>15</td>
        </tr>
    </tbody>
</table>

thead와 tbody를 사용한 표

Table Foot Element

표의 머리와 몸통을 구분하였다면 당연하게도 발부분 ‘foot’ 이 존재하겠죠. <tfoot>태그로 사용됩니다. 하지만 언제 사용될까요?

일반적으로 테이블의 개요, 테이블을 요약할때 사용합니다. 테이블의 총합, 평균등을 나타낼 수 있겠죠. 아니면 테이블을 만든 사람의 Copyright 를 적을 수 있습니다.

<table>
    <thead>
    	<tr>
            <th>No</th>
            <th>Name</th>
            <th>Age</th>
         </tr>
    </thead>
    <tbody>
         <tr>
            <td>1</td>
            <td>둘리</td>
            <td>43</td>
        </tr>
         <tr>
            <td>2</td>
            <td>곰돌이 푸</td>
            <td>52</td>
        </tr>
        <tr>
            <td>3</td>
            <td>스티치</td>
            <td>15</td>
        </tr>
    </tbody>
     <tfoot>
    	<tr>
        	<td>
    			나이의 총 합은 110 입니다.
        	</td>
        </tr>
    </tfoot>
</table>

tfoor를 사용한 표

Caption Element

자 이제 마지막 입니다. <caption> 그를 사용해서 표의 제목을 나타낼수 있습니다. 기본적으로 <table> 태그의 바로 뒤에 붙여서 사용합니다.

<table>
	<caption>
    	아주 쉬운 표 만들기
    </caption>
    <thead>
    	<tr>
            <th>No</th>
            <th>Name</th>
            <th>Age</th>
         </tr>
    </thead>
    <tbody>
         <tr>
            <td>1</td>
            <td>둘리</td>
            <td>43</td>
        </tr>
         <tr>
            <td>2</td>
            <td>곰돌이 푸</td>
            <td>52</td>
        </tr>
        <tr>
            <td>3</td>
            <td>스티치</td>
            <td>15</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td>
    			나이의 총 합은 110 입니다.
        	</td>
        </tr>
    </tfoot>
</table>

caption 태그를 사용해 제목을 표현

HTML에 관련되어 더 궁금한 점이 있다면 아래의 링크를 확인해주세요. 감사합니다!

Reference

• https://www.freecodecamp.org/news/a-step-by-step-guide-to-getting-started-with-html-tables-7f43b18f962b/

Related Posts

• HTML 이미지 링크거는 법
• HTML 에디터 (jsFiddle,메모장)