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

CSS 웹 페이지 스타일 변경

2023년 06월 26일

CSS(Cascading Style Sheets)는 HTML 문서를 시각적으로 매력적인 웹 페이지로 변환하는 중추적인 역할을 합니다. 이 글에서는 CSS 웹 페이지 스타일 변경 및 수정에 대해 알아보겠습니다.

Read More
html

CSS의 효과적인 활용 방법

2024년 05월 11일

CSS는 Cascading Style Sheets의 약자로, 웹사이트 및 웹 애플리케이션의 디자인을 정의하는 데 사용되는 스타일 시트 언어입니다. CSS의 효과적인 활용은 웹 개발자에게 매우 중요합니다. 웹 페이지의 레이아웃, 색상, 폰트, 그림자 등 다양한 디자인 요소를 CSS를 통해 쉽게 제어할 수 있습니다. 또한 CSS를 효과적으로 활용하면 웹 페이지의 성능을 최적화하고 검색 엔진 최적화(SEO)에도 도움을 줄 수 있습니다. 이러한 이유로 CSS의 잘못된 사용은 웹 페이지의 외관뿐만 아니라 사용자 경험에도 부정적인 영향을 미칠 수 있습니다. 따라서 CSS의 효과적인 활용 방법을 알고 적절히 적용하는 것이 매우 중요합니다.

Read More

함수형 프로그래밍과 반응형 프로그래밍의 비교

2023년 07월 18일

요즘 소프트웨어 개발에서 함수형 프로그래밍과 반응형 프로그래밍이 많은 관심을 받고 있습니다. 이 둘은 서로 다른 패러다임이며, 이 글에서는 이 둘의 차이점과 장단점을 알아보겠습니다. 함수형 프로그래밍 함수형 프로그래밍은 계산을 수학적 함수의 계산으로 다루며, 상태와 가변 데이터를 피하려고 노력합니다. 이를 통해 부작용(side effect)을 최소화하여 코드의 안정성과 예측 가능성을 높이는 효과를 얻을 수…

Read More

답글 남기기 응답 취소

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

최신 글

  • usb a타입에 대해 알아보자
  • 포토샵 누끼따기 방법
  • vpn 연결방법 쉽게 설명해드립니다.
  • usb 장치 인식 실패시 해결방안
  • cpu i5와 i7 차이, 확실히 알려드릴게요

최신 댓글

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

보관함

  • 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