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 Table 디자인 및 레이아웃, 같이 알아봅시다.

2024년 05월 14일

웹 개발에서 테이블은 정보를 구조화하고 시각적으로 표현할 때 매우 유용한 도구입니다. HTML 테이블은 웹 페이지의 디자인 및 레이아웃에 중요한 역할을 합니다. 테이블 요소를 활용하면 데이터를 구성하여 보기 쉽게 표시할 수 있습니다. 또한, 테이블을 사용하여 레이아웃을 구성할 수도 있어서 다양한 웹 사이트에서 다양한 스타일의 테이블을 볼 수 있습니다. 이 문서에서는 HTML 테이블을 디자인할 때 체크해야 할 아이디어와 레이아웃에 대해 자세히 살펴보겠습니다. 웹 개발자들은 효과적인 테이블 디자인을 위해 다양한 기술과 정보을 활용해야 합니다.

Read More
html

all html tag 설명 및 예제

2023년 05월 27일

HTML은 웹 페이지를 만들기 위해 사용되는 마크업 언어입니다. 웹 브라우저에게 웹 페이지를 어떻게 표시해야 하는지 알려주는 일종의 지시어이죠. HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 데 중요한 역할을 하며, 다양한 태그를 사용해 내용을 표시합니다. 이번 글에서는 all html tag 설명 및 예제 까지 제공하겠습니다. 1. All HTML Tag – 기본 태그…

Read More
html

웹 보안 – XSS와 CSRF 공격 방어

2023년 07월 14일

현재, 웹 보안을 유지하는 것은 매우 중요한 이슈 중 하나입니다. 그 중 일부인 XSS와 CSRF는 가장 일반적인 웹 공격입니다. 이러한 공격을 방어하려면 적절한 보안 조치를 취해야 합니다. 이번 글에서는 XSS와 CSRF 공격 방어에 대해 자세히 알아보겠습니다. 웹 보안 문제는 끊임없이 발생하고 있습니다. 이에 따라, XSS와 CSRF 공격 방어는 매우 중요한…

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