웹 개발의 기본 중 하나인 HTML은 웹 페이지의 구조를 정의하는 데 사용됩니다. 그 중에서도 테이블은 정보를 체계적으로 정렬하고 구조화하는 데 굉장히 강력한 도구입니다. 이번 글에서는 html table 만들기 및 셀병합 등 기본적인 사용법 (css포함) 부터 고급 기술까지 알아보겠습니다.
[목차]
1. 기본적인 테이블 생성
2. 테이블 요소 스타일링
3. 병합된 셀
4. 테이블 제목과 머리글
5. 접근성 고려하기
6. 결론 및 의견
기본적인 테이블 생성
HTML에서 테이블을 생성하려면 <table> 태그를 사용합니다. 테이블은 행(<tr>)과 열(<td>)로 구성됩니다. 예를 들어, 간단한 테이블은 다음과 같이 만들 수 있습니다.
<table>
<tr>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td>셀4</td>
</tr>
</table>이렇게 하면 2x2 크기의 테이블이 생성됩니다.
테이블 요소 스타일링
테이블을 보기 좋게 꾸미려면 CSS를 활용할 수 있습니다. 예를 들어, 다음과 같이 테이블에 스타일을 적용할 수 있습니다.
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}이렇게 하면 테이블이 더 깔끔하게 보이게 됩니다.
전체실행코드
|
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
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td>셀4</td>
</tr>
</table>
</body>
</html>
|
cs |
병합된 셀
테이블에서 여러 셀을 병합하여 복잡한 구조를 만들 수 있습니다. 이를 위해서는 colspan 및 rowspan 속성을 사용합니다.
<table>
<tr>
<td colspan="2">병합된 셀</td>
<td>셀3</td>
</tr>
<tr>
<td>셀4</td>
<td>셀5</td>
<td rowspan="2">병합된 셀</td>
</tr>
<tr>
<td>셀6</td>
<td>셀7</td>
</tr>
</table>
전체실행코드
|
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">병합된 셀</td>
<td>셀3</td>
</tr>
<tr>
<td>셀4</td>
<td>셀5</td>
<td rowspan="2">병합된 셀</td>
</tr>
<tr>
<td>셀6</td>
<td>셀7</td>
</tr>
</table>
</body>
</html>
|
cs |
테이블 제목과 머리글
테이블에 제목과 머리글을 추가하려면 <thead>와 <th> 태그를 사용합니다.
<table>
<thead>
<tr>
<th>머리글1</th>
<th>머리글2</th>
</tr>
</thead>
<tbody>
<tr>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td>셀4</td>
</tr>
</tbody>
</table>전체실행코드
|
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>머리글1</th>
<th>머리글2</th>
</tr>
</thead>
<tbody>
<tr>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td>셀4</td>
</tr>
</tbody>
</table>
</body>
</html>
|
cs |
접근성 고려하기
테이블은 정보를 구조화하고 시각적으로 표현하는 중요한 수단입니다. 이를 위해 다음과 같은 추가적인 요소를 고려하여 테이블을 더욱 확장시킬 수 있습니다.
- 테이블에 적절한 머리글(<th>)을 사용하여 정보를 명확하게 구분합니다.
- 텍스트 대신 이미지를 사용하는 경우, 적절한 대체 텍스트를 제공하여 시각적으로 장애가 있는 사용자들에게도 정보를 전달할 수 있도록 합니다.
이러한 접근성을 고려한 테이블 작성은 정보의 이해도를 높이고, 모든 사용자들이 쉽게 정보를 활용할 수 있게 도와줍니다.
결론 및 의견
HTML 테이블은 정보를 구조적으로 표현하고 시각적으로 보기 좋게 표현하는 데에 굉장히 유용한 도구입니다. 기본적인 사용법부터 병합된 셀, 테이블 스타일링, 접근성까지 다양한 측면에서 활용할 수 있습니다.
[인기글]
[파이썬(python)] - html 파일 엑셀 파일로 변환 (파이썬 활용)
html 파일 엑셀 파일로 변환 (파이썬 활용)
HTML 파일을 Excel 파일로 변환하는 것은 데이터 처리와 시각화에 유용한 방법 중 하나입니다. 변환하는 방법은 여러가지가 있는데, 이 글에서는 파이썬으로 html 파일 엑셀 파일로 변환 저장하는
2toy.tistory.com
[html, css, js] - html 파일 간단히 여는법 (메모장, 텍스트 편집기)
html 파일 간단히 여는법 (메모장, 텍스트 편집기)
HTML 파일은 웹 개발의 핵심이며, 웹 페이지를 만들기 위한 기본이 되는 파일 형식 중 하나입니다. 이 글을 통해 html 파일 간단히 여는법, 어떻게 하는지 순차적으로 설명하고 윈도우11에서 메모장
2toy.tistory.com
[여러가지 정보 모음] - VPN 해외 우회 사이트 추천 정보 및 best 3
VPN 해외 우회 사이트 추천 정보 및 best 3
오늘은 VPN 우회 사이트 정보를 같이 알아보려 합니다. 인터넷 사용시 지역 제한된 컨텐츠에 접근할 수 없거나, 보안 문제로 인해 인터넷 사용이 제한될 때가 있습니다. 이러한 문제를 해결하고
2toy.tistory.com
'프로그래밍, 코딩, 컴퓨터 > html, css, js' 카테고리의 다른 글
| html 주석 처리 및 종료 코드 (단축키) (0) | 2023.10.03 |
|---|---|
| html 파일 간단히 여는법 (메모장, 텍스트 편집기) (0) | 2023.09.04 |
| 웹 사이트 테스트와 디버깅 방법 (0) | 2023.08.05 |
| JavaScript 모듈 시스템과 번들러 소개 (0) | 2023.08.04 |
| CSS 그라디언트와 배경 효과 구현 (0) | 2023.08.03 |