最新のWeb開発のチュートリアル
 

ウェブの構築 - データ・ページの追加


ゼロからWebサイトを構築パート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チュートリアル