Agregar una página de datos

La construcción de un sitio web desde cero. Parte IV: Agregar una página de datos.

Lo que haremos

En este capítulo vamos a:

Agregar pagina de datos

En la carpeta DemoWeb, edite el archivo llamado site.css.

Coloque el siguiente código dentro del archivo 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;
} 

Crear la pagina de datos

En la carpeta DemoWeb, crear el archivo datos.html.

Insertar el siguiente contenido al archivo datos.html:

datos.html
<!DOCTYPE html>
<html>
<head>
<title>Customers</title>
<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 snabbköp</td>
<td>Luleå</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>México 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>Galería del gastrónomo</td>
<td>Barcelona</td>
<td>Spain</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Cowes</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich 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 spécialités</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>København</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>

Privacidad | Legal | Sitemap | Google+