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

웹사이트의 검색 엔진 최적화(SEO) 전략

2023년 07월 20일

현재의 디지털 시대에, 인터넷은 사람들이 정보를 찾고 상품과 서비스를 구매하는 중요한 수단이 되었습니다. 따라서 검색 엔진 최적화(SEO)는 웹 사이트를 운영하는 회사 또는 개인이 온라인 존재감을 향상시키는 데 필수적인 전략입니다. SEO는 검색 엔진 결과 페이지(SERP)에서 상위를 차지하도록 웹 사이트를 최적화하는 프로세스입니다. 주제 1: 키워드 연구 키워드 연구는 SEO의 첫 단계입니다. 키워드…

Read More
html

HTML과 JS의 차이점은 무엇인가요?

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

안녕하세요! 오늘은 많은 분들이 궁금해하는 HTML과 JS의 차이점, 무엇이 있는지 알아보려고 해요. 각자의 역할과 기능을 이해하면 웹 개발에서 매우 유용하답니다. 어렵지 않으니 같이 시작해 볼까요?     HTML이란? HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조와 내용을 만드는 데 사용되는 언어예요. 주로 다음과 같은 기능이 있어요   정적 타입 언어와…

Read More
html

html 띄어쓰기

2023년 07월 11일

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