HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<link href="style.css" rel="stylesheet">
<link href="table.css" rel="stylesheet">
</head>
<body>
<h1>table style</h1>
<h2>1. stripe table
<i>tr:nth-of-type(2n-1)</i>
</h2>
<table id="tab01">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
<h2>2. table-layout:fixed;
<i>셀들의 너비가 일정하게 고정</i>
</h2>
<table id="tab02">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
<div id="div03">
<h2>3. border-spacing:n(n n);
<i>셀 간격을 조절(값이 두개일 때는 좌우가 먼저)</i>
</h2>
<table id="tab03">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</div>
<div id="div04">
<h2>4. border-collapse: collapse;
<i>셀 간격을 없앰(이중테두리 제거)</i>
</h2>
<table id="tab04">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</div>
</body>
</html>
CSS
@charset "UTF-8";
table, th, td {border: 1px solid; }
h2 {margin-top:3em;
color:#18b; }
h2>i {font-size: 14px;
font-style: normal; }
/* 1. stripe table */
#tab01, #tab01 th, #tab01 td {
border: none; }
#tab01 {width: 70%;}
#tab01 th {background-color: #3a6;
padding:17px 10px;
text-align: left;
color: #fff;}
#tab01 th:nth-of-type(1) {
border-radius: 16px 0 0 0;}
#tab01 th:nth-of-type(3) {
border-radius: 0 16px 0 0;}
#tab01 tr:nth-of-type(6)>td:nth-of-type(2) {
color: #f00;}
#tab01 td {padding: 12px 10px;}
#tab01 tr:nth-of-type(2n-1) {
/* A:nth-of-type(n)는 A중에서
n번째 요소를 지정하는 순서선택자.
n은 수식 가능 */
background-color: #ccc;}
#tab01 tr:hover {
background-color:#2da;
cursor: pointer; }
/* 2. table-layout:fixed; */
#tab02 {width: 900px;
height: 600px;
table-layout: fixed; }
#div03, #div04 {/* border: 1px solid red; */
float: left;
margin: 2em 3em 2em 0;}
#div03 table {margin: 0 auto; }
/* 3. border-spacing */
#tab03 {border-spacing: 16px 10px;}
/* 4. border-collapse: collapse; */
#tab04 {border-collapse: collapse;}
#tab04 th, #tab04 td {padding: 10px;}
