Los últimos tutoriales de desarrollo web
 

Web Construcción - Adición de una página de datos


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


Lo que haremos

En este capítulo vamos a:

  • Añadir una página de datos de la página web

Editar la hoja de estilo

En la carpeta demoweb, editar su site.css hoja de estilos

Agregue el siguiente al contenido del archivo:

Además de 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 una página de datos

En la carpeta demoweb, crear un nuevo archivo con el nombre customers.html.

Coloque el código siguiente en el archivo:

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>
Inténtalo tú mismo "

Lee mas

Más información acerca de las tablas HTML en nuestro Tutorial de HTML .