HTML 테이블(Table)
테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다.
HTML에서는 <table>태그를 사용하여 이러한 테이블을 작성할 수 있습니다.
<table>태그는 다음과 같은 태그들로 구성됩니다.
|
<table>
|
표를 만들겠다고 선언
|
|
|
<caption>
|
표의 제목을 지정
|
|
|
<colgroup>
|
표의 서식지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용
|
|
|
<thead><tbody><tfoot>
|
표의 각 부분 (머리글, 본문, 바닥글)을 지정하기위해 사용
|
|
|
<tr>
|
표의 헤더 (테이블에서 열을 구분해 줍니다.)
|
|
|
<th>
|
표의 열 (열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다._
|
|
|
<td>
|
표의 행 (테이블의 열을 각각의 셀(cell)로 나누어 줍니다.)
|
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Tables</title>
</head>
<body>
<h1>테이블 만들기</h1>
<table style="width:100%">
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<tr style="background-color:lightgrey">
<th>참치</th>
<th>고래</th>
<th>날치</th>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>오징어</td>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>
</body>
</html>
3열 : <tr></tr>이 3번 쓰였습니다.
2행 : <td></td>이 2번 쓰였습니다.
* 요약하면 한마디로 <tr>은 줄 수 <td>는 칸 수 라고 생각하면 쉽습니다.
* caption은 검색의 용이성과 시각장애인들에게 길잡이가 되므로 특별한 문제가 없다면 쓰는 습관을 기르는게 좋습니다.
웹페이지 표시를 원하지 않을 <style>을 이용하여 capiton {display:none;}으로 감추면 됩니다.
CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다.
border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Tables</title>
<style>
table, th, td { border: 1px solid black }
</style>
</head>
<body>
<h1>다양한 테이블 테두리</h1>
<table style="width:100%">
<tr style="background-color:lightgrey">
<th>참치</th>
<th>고래</th>
<th>날치</th>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>오징어</td>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>
</body>
</html>
위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <table>태그와 <th>태그, <td>태그가 모두 자신만의 테두리를 가지고 있기 때문입니다.
위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 합니다.
border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있습니다.
<style>
table, th, td { border: 1px solid black; border-collapse: collapse }
</style>
테이블의 열 합치기
colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있습니다.
<table style="width:100%">
<tr>
<td>참치</td>
<td colspan="2">고래</td>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
</table>
테이블의 행 합치기
rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있습니다.
<table style="width:100%">
<tr>
<td rowspan="2">상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>
|
colspan="합쳐지는 숫자"
|
행을 합칠 때 (옆과 옆)
|
|
|
rowspan="합쳐지는 숫자"
|
열을 합칠 때 (위와 아래)
|
|
테이블의 열과 행 합치기
colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Tables</title>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse }
</style>
</head>
<body>
<h1>테이블의 열과 행 합치기</h1>
<table style="width:100%">
<tr>
<td colspan="6">1</td>
</tr>
<tr>
<td colspan="6">2</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td rowspan="3">4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td colspan="3">8</td>
<td>9</td>
</tr>
<tr>
<td colspan="4">10</td>
</tr>
</table>
</body>
</html>
* 단순한 표를 만들때는 문제가 없지만, 위의 예제처럼 셀과 셀이 병합되는 복잡한 표들을 만들 땐 아무리 경력이 오래 되어도 헷갈릴 수 밖에 없는게 표 만들기 인것 같습니다. 그래서 편하게 표를 만들 수 있는 툴이나 사이트를 이용하면 한결 코딩하는데 편리하고 시간을 단축하여 만들 수 있습니다.
2022.01.27 - [share/web_etc_tip] -
코딩 - 복잡하게하지말고 쉽게하자
테이블의 캡션(caption) 설정
<caption>태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있습니다.
<table style="width:100%">
<caption>해양 생물</caption>
<tr>
<td>참치</td>
<td>고래</td>
<td>날치</td>
</tr>
</table>
이렇게 간단하게 테이블만들기를 살펴 보았습니다. :)
기초 테이블을 탄탄하게 인지하고 있어야지 나중에 헷갈리지 않고 만들기 쉬워요!
'share > html' 카테고리의 다른 글
| [HTML] 공간분할 - 블록과 인라인 <div>,<span>,<a>,<p> (0) | 2022.02.15 |
|---|---|
| [HTML] 리스트 태그 (list) - <ul><ol><li><dl><dt><dd> (0) | 2022.02.04 |
| [HTML] 이미지 태그 / 이미지주소 <img src="image 주소"> (0) | 2022.02.03 |
| [HTML] 이미지 태그 / 이미지주소 <img src="image 주소"> (0) | 2022.02.03 |
| [HTML] 하이퍼링크(hyperlink)와 타겟(target)넣기 (0) | 2022.01.31 |
