Skip to content
toylee blog · 컴퓨터, 프로그램 정보 공유

toylee blog · 컴퓨터, 프로그램 정보 공유

html table 테이블 만들기

toylee, 2023년 06월 01일

HTML은 웹 페이지를 작성하는 데 사용되는 가장 인기있는 마크업 언어 중 하나입니다. HTML을 사용하면 웹 페이지에 다양한 콘텐츠를 삽입 할 수 있습니다. 이 중에서도 테이블은 데이터를 구성하고 표시하기에 유용한 방법입니다. 이번 글에서는 html table 테이블 만들기 방법과 스타일링하고 헤더를 만드는 방법에 대해 알아보겠습니다.

[목차]

  • 1. html table 테이블 만들기
  • 2. html table 테이블 스타일 변경
  • 3. html table 테이블 셀 병합
  • 4. html table 테이블 헤더 만들기
  • 5. html table 테이블 요약 추가
  • 6. 결론 및 의견

1. html table 테이블 만들기

테이블을 만들기 위해서는 <table> 태그를 사용해야 합니다. <table> 태그는 테이블을 시작하는 태그입니다. 그리고 테이블을 구성하는 각 행은 <tr> 태그로 표시되며, 각 열은 <td> 태그로 표시됩니다. <tr> 태그는 테이블의 각 행을 나타내고, <td> 태그는 행 안의 각 셀을 나타냅니다. 아래는 간단한 예시입니다.

1
2
3
4
5
6
7
8
9
10
11
<table>
  <tr>
    <td>열 1</td>
    <td>열 2</td>
  </tr>
  <tr>
    <td>열 3</td>
    <td>열 4</td>
  </tr>
</table>
 
cs

실행화면

html table

코드를 실행하면 2×2 크기의 테이블이 생성됩니다. 테이블을 만들 때, 행의 갯수나 열의 갯수를 지정할 필요가 없으며, 셀의 내용만 작성하면 됩니다.

2. html table 테이블 스타일 변경

HTML 테이블은 CSS를 사용하여 스타일링 할 수 있습니다. 이를 통해 테이블의 배경색, 테두리, 글꼴 등을 설정할 수 있습니다. 아래는 테이블에 스타일을 적용하는 방법입니다.

main.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head><link rel=“stylesheet” type=“text/css” href=“style.css”>
</head>
 
<body>
 
<table>
  <tr>
    <td>열 1</td>
    <td>열 2</td>
  </tr>
  <tr>
    <td>열 3</td>
    <td>열 4</td>
  </tr>
</table>
</body>
</html>
Colored by Color Scripter
cs

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    text-align: left;
    padding: 8px;
  }
  th {
    background-color: #dddddd;
    color: black;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
 
cs

실행화면

html 테이블

border-collapse 속성을 사용하여 테이블의 경계를 합칩니다. th와 td 요소에는 text-align 및 padding 속성이 적용되며, th 요소에는 배경색 및 글꼴 색상이 지정됩니다.

3. html table 테이블 셀 병합

HTML 테이블에서는 두 개 이상의 셀을 병합하여 하나의 셀로 만들 수 있습니다. 이를 통해 테이블의 가독성을 높일 수 있습니다. 셀 병합을 위해서는 colspan 및 rowspan 속성을 사용합니다. 아래는 예시입니다.

main.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head><link rel=“stylesheet” type=“text/css” href=“style.css”>
</head>
 
<body>
<table>
  <tr>
    <td colspan=“2”>열 1과 열 2 병합</td>
  </tr>
  <tr>
    <td>열 3</td>
    <td>열 4</td>
  </tr>
</table>
 
</body>
</html>
Colored by Color Scripter
cs

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    text-align: left;
    padding: 8px;
  }
  th {
    background-color: #dddddd;
    color: black;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
 
cs

실행화면

html 테이블 병합

첫 번째 행의 첫 번째 셀과 두 번째 셀이 병합되어 하나의 셀이 됩니다.

4. html table 테이블 헤더 만들기

HTML 테이블에서는 <th> 태그를 사용하여 테이블 헤더를 만들 수 있습니다. <th> 태그는 <td> 태그와 비슷하지만, 보통 테이블의 첫 번째 행에 사용되며, 굵은 글씨로 표시됩니다. 아래는 예시입니다.

main.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head><link rel=“stylesheet” type=“text/css” href=“style.css”>
</head>
 
<body>
<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>성별</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>20</td>
    <td>남자</td>
  </tr>
  <tr>
    <td>김나영</td>
    <td>25</td>
    <td>여자</td>
  </tr>
</table>
</body>
</html>
Colored by Color Scripter
cs

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    text-align: left;
    padding: 8px;
  }
  th {
    background-color: #dddddd;
    color: black;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
 
cs

실행화면

html table 테이블 만들기

첫 번째 행이 테이블 헤더로 사용되며, 각 열의 이름을 표시합니다.

5. html table 테이블 요약 추가

HTML 테이블에서는 <caption> 태그를 사용하여 테이블 요약을 추가할 수 있습니다. <caption> 태그는 테이블 바로 위에 위치하며, 테이블의 내용을 요약하는 텍스트를 포함합니다. 아래는 예시입니다.

main.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head><link rel=“stylesheet” type=“text/css” href=“style.css”>
</head>
 
<body>
<table>
  <caption>학생 정보</caption>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>성별</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>20</td>
    <td>남자</td>
  </tr>
  <tr>
    <td>김나영</td>
    <td>25</td>
    <td>여자</td>
  </tr>
</table>
 
</body>
</html>
Colored by Color Scripter
cs

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    text-align: left;
    padding: 8px;
  }
  th {
    background-color: #dddddd;
    color: black;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
 
cs

실행화면

테이블 타이틀

<caption> 태그를 사용하여 “학생 정보”라는 텍스트를 추가했습니다.

6. 결론 및 의견

이제 HTML을 사용하여 테이블을 만드는 방법과 스타일링하고 헤더를 만드는 방법, 테이블 요약과 접근성 고려에 대해 알아보았습니다. HTML 테이블은 데이터를 구성하고 표시하기에 매우 유용하며, 셀 병합과 테이블 헤더를 사용하여 더욱 보기 좋게 만들 수 있습니다. 또한, 테이블 요약과 접근성 고려를 통해 모든 사용자가 테이블의 내용을 이해할 수 있도록 해야 합니다.

[관련글]

html css 예제 적용 및 연결

all html tag 설명 및 예제

Pyqt6 QML GUI 사용

html html tablehtml 테이블

글 내비게이션

Previous post
Next post

Related Posts

html

도커 컨테이너와 컨테이너 오케스트레이션 도구 소개

2023년 07월 21일

최근에는 도커(Docker)를 비롯한 컨테이너 기술이 많은 인기를 끌고 있습니다. 도커 컨테이너는 가볍고 빠르게 애플리케이션을 배포할 수 있어서 개발자들 사이에서 인기가 높아지고 있습니다. 하지만 컨테이너를 한 개씩 배포하는 것은 수작업이 필요하기 때문에, 여러 개의 컨테이너를 효율적으로 관리할 수 있는 컨테이너 오케스트레이션 도구가 등장하게 되었습니다. 도커 컨테이너 도커 컨테이너는 애플리케이션을 격리된 환경에서…

Read More
html

우분투 서버 아파치(apache) 설치하기

2024년 05월 11일

우분투 서버에 아파치(Apache)를 설치하는 것은 웹 서버를 구축하고 웹 사이트를 호스팅하는데 필수적인 작업입니다. 아파치는 오랜 역사와 높은 신뢰도로 많은 웹 개발자들이 선호하는 웹 서버 소프트웨어입니다. 이번 가이드에서는 우분투 서버에 아파치를 설치하는 방법을 자세히 알아보겠습니다.

Read More

html table in table 이렇게 하면 됩니다.

2025년 02월 01일2025년 02월 01일

안녕하세요! 오늘은 HTML 테이블 안에 또 다른 테이블을 만드는 방법(html table in table) 에 대해 재미있게 풀어보려고 해요. 이 글을 통해 여러분도 쉽게 배워보세요!     HTML 테이블 기본 구조 HTML 테이블은 데이터를 깔끔하게 정리하는 데 도움을 줍니다. 테이블은 선과 열로 이루어져 있는데요, 기본적인 테이블 구조는 다음과 같습니다   파이썬…

Read More

답글 남기기 응답 취소

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

최신 글

  • 드론 비행금지구역에 대해 알아볼게요
  • cpu 온도 측정 방법
  • 포토샵 단축키 모음 정리본
  • express vpn이란? 장점 및 단점
  • 안드로이드 버전 업그레이드 방법

최신 댓글

  1. 윈도우 단축키 모음 Best5의 ace
  2. http https 차이의 챗GPT 란? · Working for you

보관함

  • 2025년 7월
  • 2025년 6월
  • 2025년 5월
  • 2025년 4월
  • 2025년 3월
  • 2025년 2월
  • 2025년 1월
  • 2024년 12월
  • 2024년 11월
  • 2024년 8월
  • 2024년 6월
  • 2024년 5월
  • 2024년 3월
  • 2024년 2월
  • 2023년 11월
  • 2023년 9월
  • 2023년 8월
  • 2023년 7월
  • 2023년 6월
  • 2023년 5월
  • 2023년 4월
  • 2023년 3월
  • 2023년 2월

카테고리

  • flutter
  • html
  • linux
  • macbook
  • Pc Useful Tips
  • 미분류
  • 워드프레스
  • 자바(Java)
  • 파이썬
  • 프로그래밍
©2025 toylee blog · 컴퓨터, 프로그램 정보 공유 | WordPress Theme by SuperbThemes