HTML 기초 2 - table(표) 만들기 (thead, tbody, tfoot, col, colgroup 태그)

IT공부/HTML + CSS + Javascript 2020. 12. 30. 19:04

table(표) 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>표 만들기</title>
</head>
<body>
  <h1>표만들기</h1>
  <table border="1">
    <tr>
        <th>1행1열</th>
        <th>1행2열</th>
        <th>1행3열</th>
        <th>1행4열</th>
    </tr>
    <tr>
        <td>2행1열 (내용)</td>
        <td>2행2열 (내용)</td>
        <td>2행3열 (내용)</td>
        <td>2행4열 (내용)</td>
    </tr>
  </table>
</body>
</html>


위처럼 코드를 작성한 뒤 실행해보면 아래와 같이 표가 출력될 것입니다.

html에서 표를 만들 때는 표에 해당하는 내용을 <table> </table> 태그 안에 작성하게 됩니다.

따라서 <table> 태그는 하나의 표를 선언하는 역할을 한다고 볼 수 있겠습니다.


행을 만드는 역할은 <tr>태그가 수행하며, 열은 <th> 또는 <td> 태그로 만들 수 있습니다.

참고로 html에서는 행을 먼저 만든 후 행 안에 열을 만드는 방식으로 표를 만듭니다. 따라서 <th>, <td> 태그는 <tr> 태그 안에 들어가게 됩니다.

한편, <td> 태그 안에 작성한 내용은 글씨 굵기가 변동되지 않고, 정렬도 왼쪽으로 됩니다. 반면에 <th> 태그 안에 작성한 내용은 볼드체에 중앙으로 정렬이 됩니다. 그래서 <th> 태그는 제목셀을 만들 때 주로 사용됩니다.



<thead>, <tbody>, <tfoot> 태그


표를 만들면 일반적으로 위의 스크린샷 처럼 제목, 내용, 내용요약 부분으로 나뉘게 됩니다. (*해당 표는 excel로 만든 표입니다.)

따라서 제목, 내용, 요약 부분의 색깔이나 폰트 등을 서로 다르게 해야하는 경우도 종종 있을 것 입니다. 이럴때 사용하는 것이 <thead>(제목), <tbody>(내용), <tfoot>(요약) 태그입니다.

표에 있는 행들을 <thead>, <tbody>, <tfoot> 태그로 묶은 후, CSS나 Javascript를 이용하여 서로 다르게 편집할 수 있습니다. 이번 포스팅은 html 기초에 대한 글이므로 실제로 해당 태그들을 이용하여 편집하는 것은 차후 CSS, Javascript에 대한 포스팅에서 다루도록 하겠습니다.


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>표 만들기</title>
</head>
<body>
  <h1>표만들기</h1>
  <table border="1">
    <thead>
        <tr>
            <th>제목 행</th>
            <th>제목 행</th>
            <th>제목 행</th>
            <th>제목 행</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>내용 행</td>
            <td>내용 행</td>
            <td>내용 행</td>
            <td>내용 행</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>요약 행</td>
            <td>요약 행</td>
            <td>요약 행</td>
            <td>요약 행</td>
        </tr>
    </tbody>
  </table>
</body>
</html>



<col>, <colgroup> 태그

<thead>, <tbody>, <tfoot> 태그는 행을 기준으로 표를 나누었다면, <col>, <colgroup> 태그는 열을 기준으로 표를 나누는 태그입니다. <col>, <colgroup> 태그를 통해 열을 나누었다면, 나뉜 열에 스타일을 다르게 지정할 수 있습니다. 


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>표 만들기</title>
</head>
<body>
  <h1>표만들기</h1>
  <table border="1">
        <colgroup>
            <col span="2" style="background-color: green;">
            <col style="background-color: pink;">
            <col style="background-color: brown;">
        </colgroup>
        <tr>
            <td>1행1열</td>
            <td>1행2열</td>
            <td>1행3열</td>
            <td>1행4열</td>
        </tr>
        <tr>
            <td>2행1열</td>
            <td>2행2열</td>
            <td>2행3열</td>
            <td>2행4열</td>
        </tr>
        <tr>
            <td>3행1열</td>
            <td>3행2열</td>
            <td>3행3열</td>
            <td>3행4열</td>
        </tr>
  </table>
</body>
</html>


<table> 태그 바로 아래에 <colgroup> 태그를 작성 한 다음, <col> 태그를 이용해 열 하나 하나에 대해 스타일을 지정하는 방식입니다. 위의 코드엔 4개의 열이 있으므로 <col> 태그를 4개 선언해야할 것입니다. 하지만 span을 이용하면 여러개의 열을 동시에 지정할 수 있습니다. 저는 첫번째 <col> 태그에서 span=2 라고 했기 때문에 3개의 <col> 태그만 사용할 수 있었습니다. 이제 코드를 실행하면 아래와 같이 결과가 나올 것입니다.



저작자표시 비영리 동일조건

'IT공부 > HTML + CSS + Javascript' 카테고리의 다른 글

반응형 웹 만들기 1 - 고정 그리드 레이아웃 vs 가변 그리드 레이아웃  (0) 2021.01.08
HTML 기초 4 - select 태그와 datalist 태그의 차이점  (0) 2021.01.02
HTML 기초 3 - map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기  (0) 2020.12.31
HTML 기초 1 - HTML 문서의 기본구조  (0) 2020.12.29
블로그 이미지

방구석 세계인

관심분야 : 외국어 학습, 프로그래밍, 책 리뷰 등...

,

공지사항

티스토리툴바