. 데이터 페이지를 추가 : 처음 파트 IV에서 웹 사이트를 구축.
우리는 무엇을 할 것 인
우리는 것이 장의 내용 :
- 웹 사이트 데이터 페이지 추가
스타일 시트를 편집
demoweb 폴더에서 스타일 시트 site.css을 편집
하여 파일 내용에 다음을 추가합니다 :
site.css에 추가
table {
width:100%;
}
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
th {
text-align: left;
}
table
tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even)
{
background-color: #ffffff;
}
데이터 페이지 만들기
demoweb 폴더에서 customers.html 사용라는 새 파일을 만듭니다.
파일 내부에 다음 코드를 입력 :
customers.html 사용
<!DOCTYPE html>
<html>
<head>
<title>Customers</title>
<meta charset="UTF-8">
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Customers</h1>
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Berlin</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds
snabbkop</td>
<td>Lulea</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico D.F.</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Graz</td>
<td>Austria</td>
</tr>
<tr>
<td>FISSA Fabrica Inter. Salchichas
S.A.</td>
<td>Madrid</td>
<td>Spain</td>
</tr>
<tr>
<td>Galeria del gastronomo</td>
<td>Barcelona</td>
<td>Spain</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Cowes</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Brandenburg</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Wine Cellars</td>
<td>Vancouver</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Bergamo</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>London</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>Paris</td>
<td>France</td>
</tr>
<tr>
<td>Rattlesnake Canyon
Grocery</td>
<td>Albuquerque</td>
<td>USA</td>
</tr>
<tr>
<td>Simons bistro</td>
<td>Kobenhavn</td>
<td>Denmark</td>
</tr>
<tr>
<td>The Big Cheese</td>
<td>Portland</td>
<td>USA</td>
</tr>
<tr>
<td>Vaffeljernet</td>
<td>Århus</td>
<td>Denmark</td>
</tr>
<tr>
<td>Wolski Zajazd</td>
<td>Warszawa</td>
<td>Poland</td>
</tr>
</table>
<footer id="foot01"></footer>
</div>
<script src="script.js"></script>
</body>
</html>»그것을 자신을 시도자세히보기
우리의 HTML 테이블에 대한 자세한 내용을 HTML 자습서 .