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

HTML Form 태그 사용법

2023년 06월 07일

HTML Form은 다양한 유형의 입력 필드를 제공하며, 이를 통해 사용자로부터 정보를 수집할 수 있습니다. 이 글에서는 HTML Form 태그 사용법 및 기본적인 구조와 속성, 사용 방법에 대해 알아보겠습니다.

Read More
html

HTML Table 꾸미는 방법

2024년 05월 15일

HTML Table 스타일링은 웹 디자인에서 중요한 역할을 합니다. 테이블은 정보를 구조화하고 사용자에게 시각적인 안내를 제공하는 데 도움이 됩니다. 이 글에서는 HTML 테이블을 스타일링하는 데 유용한 정보과 트릭을 살펴보겠습니다. 올바른 스타일링은 사용자 경험을 향상시키고 웹사이트의 전체적인 디자인을 향상시킬 수 있습니다. HTML 테이블을 보기 좋게 디자인하고 효율적으로 활용하는 방법을 알아보겠습니다.

Read More
html

html 주석 처리 단축키

2025년 01월 29일2025년 01월 29일

HTML에서는 주석 처리를 통해 코드의 설명을 추가할 수 있습니다. 주석 처리는 디버깅이나 코드 설명에 유용하게 사용됩니다. 이 글에서는 HTML 주석 처리하는 방법과 이를 위한 단축키를 알아보겠습니다. 1. HTML 주석 처리란? HTML 주석은 코드 내에서 설명을 추가할 수 있는 특별한 방법입니다. 주석은 코드 실행에 영향을 미치지 않으며, 주로 개발자가 코드의 의도를…

Read More

답글 남기기 응답 취소

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

최신 글

  • 포토샵 단축키 모음 정리본
  • express vpn이란? 장점 및 단점
  • 안드로이드 버전 업그레이드 방법
  • 그래픽 카드 고장 증상, 해결법도 같이 알아보자
  • 그래픽카드 가격, 2025년 시세

최신 댓글

  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