<Table>태그 기본형식
표는 제목<caption>, 표의 가장 윗부분 <thead>, 본문 <tbody>, 아래부분<tfoot>으로 구성되어 있다. <thead>와 <tfoot> 태그를 사용함으로써 테이블의 본문이 변경되더라도 영향을 받지 않는다.
표는 <tr>을 통해 행 단위를 표현하고 제목 정보를 가진 셀은 <th>로 표현하여 굵게 표시되며 중간 정렬되고, 데이터 정보 셀은 <td>로 표현한다. <Table>태그의 경우 반응형 웹 구현시에 한계가 있다는 단점과 행 단위의 지정은 쉽지만 열 단위의 지정이 어려워 디자인에 어려움이 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<caption> 제목 </caption>
<thead>
<tr>
<th>항목1</th>
<th>항목2</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>결과1</td>
<td>결과2</td>
</tr>
</tfoot>
</table>
</body>
</html>
테이블 행, 열 합치는 방법 및 행, 열 색상 지정
테이블 열 합치기
- <table>
<tr>
<td colspan="합칠 열 갯수"> 내용 </td>
</tr>
</table>
테이블 열 색깔 변경
: 만약 열을 세번째 열부터 시작하고 싶을 경우에는 <colgroup... >앞에 <col>태그를 2개를 넣어주어야 세번째 열부터 지정한 갯수의 열을 색칠한다.
- <table>
<colgroup span="색칠할 열 갯수" style="background-color: 색상;">
<tr>
<td>내용</td>
</tr>
</table>
테이블 행 합치기 및 행 색깔 변경
- <table>
<tr>
<td rowspan="합칠 행 갯수" style="background-color: 색상;" > 내용 </td>
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<figure>
<table border="1" style="text-align: center;">
<caption>월수금 시간표</caption>
<col>
<colgroup span="2" style="background-color: darkgoldenrod;"></colgroup>
<thead>
<th>시간</th>
<th>월</th>
<th>수</th>
<th>금</th>
</thead>
<tbody>
<tr style="background-color: yellow;">
<td>09:00~10:00</td>
<td>과학</td>
<td>수학</td>
<td rowspan="3" style="background-color: white;">없음</td>
</tr>
<tr>
<td>10:00~11:00</td>
<td colspan="2">수학</td>
</tr>
<tr>
<td>11:00~12:00</td>
<td style="background: aqua;">국어</td>
<td>영어</td>
</tr>
</tbody>
</figure>
</table>
테이블 제목을 설정하는 다른 방법
caption을 이용할 경우에는 테이블 안에 caption이 있기 때문에 디자인을 적용할 때에 영향을 끼치는 단점이 있다. 그러한 단점을 보안하고자 <figcaption>태그를 이용할 수 있다. <figure>을 통해 블록화하고, <figcaption>을 통해서 제목을 적을 수 있다. 이 방법은 사진 캡션을 적을 때에도 사용되는 방법이다. <caption>태그와는 다르게 중간정렬이 되지 않는다.
- <figure>
<figcaption>테이블의 제목</figcaption>
<table>
<tr>
<td>셀 내용</td>
</tr>
</table>
</figure>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<figure>
<figcaption>간단한 테이블</figcaption>
<table border="1" style="border-collapse: collapse;">
<thead>
<tr>
<th>항목1</th>
<th>항목2</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
</tbody>
</table>
</figure>
</body>
</html>
'Frontend > HTML' 카테고리의 다른 글
| HTML에서 폼 요소를 사용해서 선택형 입력, 드롭다운 목록을 만들어보자 (0) | 2024.06.30 |
|---|---|
| HTML의 폼 요소를 사용해보자 (0) | 2024.06.30 |
| HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 (0) | 2024.06.29 |
| HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) (0) | 2024.06.28 |
| HTML의 <a>태그에 대해 알아보자 (0) | 2024.06.27 |
| HTML 이미지 삽입을 할 수 있는 <img>태그에 대해 알아보자 (0) | 2024.06.27 |
| HTML의 목록 태그 (0) | 2024.06.27 |
| HTML의 텍스트 관련 태그 (0) | 2024.06.26 |