테이블
테이블은 같은 종류의 여러 데이터를 정리하여 표시할 때 많이 사용합니다.
<table> 태그를 사용합니다.
테이블은 제목, 헤더, 본문, 꼬리 중에 필요한 요소를 선택적으로 구성할 수 있습니다.
제목은 테이블 맨 위에 표시합니다.
<caption> 태그를 사용합니다.
헤더는 제목과 본문 사이에 표시하며 컬럼 제목을 정하는 용도로 많이 사용합니다.
<thead> 태그를 사용합니다.
본문은 헤더와 꼬리 사이에 표시합니다.
<tbody> 태그를 사용합니다.
꼬리는 테이블 맨 아래에 표시하며 연락처라 부가 정보를 많이 표시합니다.
<tfoot> 태그를 사용합니다.
헤더, 본문, 꼬리에는 행을 추가할 수 있습니다.
행은 <tr> 태그를 사용합니다.
행 내부에는 쉘을 나타내는 <td> 태그를 사용할 수 있습니다.
헤더에 열 제목을 표시할 때 <th> 태그를 사용하면 접근성 점수를 높게 받습니다.
여러 행에 걸쳐 표시하고자 한다면 rowspan 속성을 사용합니다.
여러 열에 걸쳐 표시하고자 한다면 colspan 속성을 사용합니다.
다음은 테이블을 표시한 예제입니다.
<!DOCTYPE html />
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>언제나 휴일 - 목록</title>
<style>
header
{
height:40px;
width:800px;
background-color:White;
color:Green;
text-align:center;
font-size:xx-large;
font-weight:bold;
}
table
{
width:800px;
height:300px;
border-width:medium;
border-style:inset;
text-align:center;
}
caption
{
width:100%;
height:30px;
color:Navy;
background-color:Orange;
font-size:xx-large;
font-weight:bold;
text-align:center;
}
thead
{
height:30px;
color:White;
background-color:Green;
font-size:large;
font-weight:bold;
text-align:center;
}
tfoot
{
height:30px;
color:White;
background-color:Green;
font-size:small;
text-align:center;
}
tbody
{
background-color:Green;
color:White;
border-color:Black;
}
footer
{
width:800px;
text-align:center;
}
.style_s1
{
width:25%;
background-color:Maroon;
color:White;
font-weight:bold;
}
</style>
</head>
<body>
<header>
<p>HTML 테이블</p>
</header>
<section>
<table>
<caption>인물에 관한 책</caption>
<thead>
<tr>
<th>제목</th>
<th>저자</th>
<th>출판사</th>
<th>가격</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">세계사와 함께 읽는 한국사도 읽어보세요.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="style_s1">인물로 보는 삼국사</td>
<td>정구복</td>
<td rowspan="3">시아</td>
<td rowspan="3">14000원</td>
</tr>
<tr>
<td class="style_s1">인물로 보는 고려사</td>
<td>송은명</td>
</tr>
<tr>
<td class="style_s1">인물로 보는 조선사</td>
<td>김형광</td>
</tr>
</tbody>
</table>
</section>
<footer>
<p>Copyright 2015 언제나 휴일 ehclub.co.kr</p>
</footer>
</body>
</html>
'언어 자료구조 알고리즘 > HTML5' 카테고리의 다른 글
| [HTML5] 6. 안전한 구조를 위해 br 태그에 종료를 표시하자. (0) | 2016.05.05 |
|---|---|
| [HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용! (0) | 2016.05.05 |
| [HTML5] 4. 주석으로 가독성을 높이자. (0) | 2016.05.05 |
| [HTML5] 3. 글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정 (0) | 2016.05.04 |
| [HTML5] 2. 간단해진 HTML 문서 형식 선언 <!DOCTYPE html> (0) | 2016.05.04 |
| [HTML5] 1. 첫 번째 만드는 HTML 문서, "Hello, HTML" (0) | 2016.05.04 |
| [HTML5] 이미지 (0) | 2016.04.09 |
| [HTML5] 목록 태그 <ul>, <ol>, <dl> (0) | 2016.04.09 |
| [HTML5] P 태그와 PRE 태그 (0) | 2016.04.09 |
| [HTML5] 시맨틱 태그와 CSS (0) | 2016.04.09 |