엑셀과 같은 형식을 표현하려면 HTML에서는 테이블이라는 태그를 사용합니다.
목차
- 기본 테이블(Basic table) : table, tr 및 td 요소
- 머리글 셀(Header cells) : th 요소.
- 셀 병합(Merging cells) 1 : rowspan 속성.
- 셀 병합(Merging cells) 2 : colspan 속성.
- 테두리 축소(Border collapsing) 1 : 표 셀 테두리 축소.
- 테두리 축소(Border collapsing) 2 : 표 셀 테두리 및 표 테두리 축소.
- 열 그룹(Column groups) : col 및 colgroup 요소
- 빈 셀(Empty cells) : 빈 셀(empty-cells) 속성을 사용하여 빈 셀을 표시하는 방법을 지정합니다.
- 자동 테이블 레이아웃(Automatic table layout) : 테이블이 사용하는 기본 레이아웃 알고리즘.
- 고정 테이블 레이아웃(Fixed table layout) : table-layout 속성을 사용하여 설정합니다.
기본 테이블(Basic table) : table, tr 및 td 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic table</title>
<style>
td {
border: 1px solid #999;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cats</td>
<td>Dogs</td>
<td>Lemurs</td>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Caracal</td>
<td>Red fox</td>
<td>Brown lemur</td>
</tr>
<tr>
<td>Wildcat</td>
<td>Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>머리글 셀(Header cells) : th 요소.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Header cells</title>
<style>
table {
margin-bottom: 2em;
}
td, th {
border: 1px solid #999;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<tr>
<th>Cats</th>
<th>Dogs</th>
<th>Lemurs</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Caracal</td>
<td>Red fox</td>
<td>Brown lemur</td>
</tr>
<tr>
<td>Wildcat</td>
<td>Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
<table>
<tr>
<th>Cats</th>
<td>Tiger</td>
<td>Cheetah</td>
<td>Caracal</td>
<td>Wildcat</td>
</tr>
<tr>
<th>Dogs</th>
<td>Grey Wolf</td>
<td>Cape hunting dog</td>
<td>Red fox</td>
<td>Fennec</td>
</tr>
<tr>
<th>Lemurs</th>
<td>Indri</td>
<td>Sifaka</td>
<td>Brown lemur</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>셀 병합(Merging cells) 1 : rowspan 속성.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Row spans</title>
<style>
td, th {
border: 1px solid #999;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Carnivores</th>
<td>Tiger</td>
<td>Cheetah</td>
<td>Caracal</td>
<td>Wildcat</td>
</tr>
<tr>
<td>Grey Wolf</td>
<td>Cape hunting dog</td>
<td>Red fox</td>
<td>Fennec</td>
</tr>
<tr>
<th>Primates</th>
<td>Indri</td>
<td>Sifaka</td>
<td>Brown lemur</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>셀 병합(Merging cells) 2 : colspan 속성.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Column spans</title>
<style>
td, th {
border: 1px solid #999;
padding: 0.1em 1em;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Carnivores</th>
<th>Primates</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Caracal</td>
<td>Red fox</td>
<td>Brown lemur</td>
</tr>
<tr>
<td>Wildcat</td>
<td>Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>테두리 축소(Border collapsing) 1 : 표 셀 테두리 축소.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Border collapsing 1</title>
<style>
td, th {
padding: 0.1em 1em;
border: 1px solid #999;
}
#t2 {
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Border collapsing 1</h1>
<h2><code>border-collapse: separate;</code> (default)</code></h2>
<table>
<tr>
<th colspan="2">Carnivores</th>
<th>Primates</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Caracal</td>
<td>Red fox</td>
<td>Brown lemur</td>
</tr>
<tr>
<td>Wildcat</td>
<td>Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
<h2><code>border-collapse: collapse;</code></code></h2>
<table id="t2">
<tr>
<th rowspan="2">Carnivores</th>
<td>Tiger</td>
<td>Cheetah</td>
<td>Caracal</td>
<td>Wildcat</td>
</tr>
<tr>
<td>Grey Wolf</td>
<td>Cape hunting dog</td>
<td>Red fox</td>
<td>Fennec</td>
</tr>
<tr>
<th>Primates</th>
<td>Indri</td>
<td>Sifaka</td>
<td>Brown lemur</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>테두리 축소(Border collapsing) 2 : 표 셀 테두리 및 표 테두리 축소.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Border collapsing 2</title>
<style>
table {
border: 1px solid black;
}
td, th {
padding: 0.1em 1em;
border: 10px solid #ccc;
}
#t2 {
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Border collapsing 2</h1>
<h2><code>border-collapse: separate;</code> (default)</code></h2>
<table>
<tr>
<th colspan="2">Carnivores</th>
<th>Primates</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Caracal</td>
<td>Red fox</td>
<td>Brown lemur</td>
</tr>
<tr>
<td>Wildcat</td>
<td>Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
<h2><code>border-collapse: collapse;</code></code></h2>
<table id="t2">
<tr>
<th rowspan="2">Carnivores</th>
<td>Tiger</td>
<td>Cheetah</td>
<td>Caracal</td>
<td>Wildcat</td>
</tr>
<tr>
<td>Grey Wolf</td>
<td>Cape hunting dog</td>
<td>Red fox</td>
<td>Fennec</td>
</tr>
<tr>
<th>Primates</th>
<td>Indri</td>
<td>Sifaka</td>
<td>Brown lemur</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>열 그룹(Column groups) : col 및 colgroup 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Column groups</title>
<style>
body {
font: 80%/1.5 arial, helvetica, sans-serif;
}
table {
border: 1px solid #668;
border-collapse: collapse;
caption-side: bottom;
}
td {
padding: 0.1em 2em;
border-spacing: 1em;
}
col.alternative {
background: #ddf;
}
</style>
</head>
<body>
<table>
<caption>Caption</caption>
<colgroup>
<col>
<col class="alternative">
<col>
<col class="alternative">
<col>
</colgroup>
<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
<td>Lunch</td>
<td>Lunch</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
<td>Lunch</td>
<td>Lunch</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
<td>Lunch</td>
<td>Lunch</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
<td>Lunch</td>
<td>Lunch</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
<td>Lunch</td>
<td>Lunch</td>
</tr>
</table>
</body>
</html>빈 셀(Empty cells) : 빈 셀(empty-cells) 속성을 사용하여 빈 셀을 표시하는 방법을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Empty cells</title>
<style>
table {
width: 100%;
}
td, th {
border: 1px solid #999;
padding: 0.1em 1em;
empty-cells: hide;
}
.alternative {
background-color: #ddf;
}
</style>
</head>
<body>
<table>
<caption>Animal groups</caption>
<colgroup>
<col span="3">
<col class="alternative">
<col>
</colgroup>
<tr>
<th>Apes</th>
<th colspan="2">Cats</th>
<th style="background: #ddf;">Dogs</th>
<th>Lemurs</th>
</tr>
<tr>
<td>Gorilla</td>
<td></td>
<td>Cheetah</td>
<td style="background: #ddf;">Grey Wolf</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Lion</td>
<td>Puma</td>
<td style="background: #ddf;"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Serval</td>
<td style="background: #ddf;"></td>
<td>Red ruffed lemur</td>
</tr>
<tr>
<td>Chimpanzee</td>
<td>Leopard</td>
<td>Caracal</td>
<td style="background: #ddf;">Red Fox</td>
<td>Ring tailed lemur</td>
</tr>
<tr>
<td>Bonobo</td>
<td> </td><!-- a non-breaking space makes this not an empty cell -->
<td>Wild cat</td>
<td style="background: #ddf;"> </td>
<td> </td>
</tr>
</table>
</body>
</html>자동 테이블 레이아웃(Automatic table layout) : 테이블이 사용하는 기본 레이아웃 알고리즘.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Automatic table layout</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #999;
padding: 0.1em 1em;
}
.alternative {
background-color: #ddf;
}
</style>
</head>
<body>
<table>
<caption>Animal groups</caption>
<colgroup>
<col span="3">
<col class="alternative">
<col>
</colgroup>
<tr>
<th>Apes</th>
<th colspan="2">Cats</th>
<th style="background: #ddf;">Dogs</th>
<th>Lemurs</th>
</tr>
<tr>
<td>Gorilla</td>
<td>Tiger</td>
<td>Cheetah</td>
<td style="background: #ddf;">Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Orangutan</td>
<td>Lion</td>
<td>Puma</td>
<td style="background: #ddf;">Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Man</td>
<td>Jaguar</td>
<td>Serval</td>
<td style="background: #ddf;">Very silly big long-long named dog woof</td>
<td>Red ruffed lemur</td>
</tr>
<tr>
<td>Chimpanzee</td>
<td>Leopard</td>
<td>Caracal</td>
<td style="background: #ddf;">Red Fox</td>
<td>Ring tailed lemur</td>
</tr>
<tr>
<td>Bonobo</td>
<td>Snow leopard</td>
<td>Wild cat</td>
<td style="background: #ddf;">Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>고정 테이블 레이아웃(Fixed table layout) : table-layout 속성을 사용하여 설정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed table layout</title>
<style>
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
td, th {
border: 1px solid #999;
padding: 0.1em 1em;
}
.alternative {
background-color: #ddf;
}
</style>
</head>
<body>
<table>
<caption>Animal groups</caption>
<colgroup>
<col span="3">
<col class="alternative">
<col>
</colgroup>
<tr>
<th>Apes</th>
<th colspan="2">Cats</th>
<th style="background: #ddf;">Dogs</th>
<th>Lemurs</th>
</tr>
<tr>
<td>Gorilla</td>
<td>Tiger</td>
<td>Cheetah</td>
<td style="background: #ddf;">Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Orangutan</td>
<td>Lion</td>
<td>Puma</td>
<td style="background: #ddf;">Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Man</td>
<td>Jaguar</td>
<td>Serval</td>
<td style="background: #ddf;">Very silly big long-long named dog woof</td>
<td>Red ruffed lemur</td>
</tr>
<tr>
<td>Chimpanzee</td>
<td>Leopard</td>
<td>Caracal</td>
<td style="background: #ddf;">Red Fox</td>
<td>Ring tailed lemur</td>
</tr>
<tr>
<td>Bonobo</td>
<td>Snow leopard</td>
<td>Wild cat</td>
<td style="background: #ddf;">Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
</body>
</html>
