Saltar la navegación

4.3.7. Tablas

El siguiente código refleja un ejemplo de página html de aplicación de estilos css a una tabla:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tabla</title>
<style type="text/css">
table {
    padding: 0px;
    margin: 0px;
    border-spacing: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #333;
}
th, td {
    padding: 0.5em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333;
}
th {
    background-color: #E2E2E2;
}
td {
    background-color: #F0F0F0;
}
</style>
</head>

<body>
<table>
  <tr>
    <th> </th>
    <th>Población</th>
    <th>Hombres</th>
    <th>Mujeres</th>
  </tr>
  <tr>
    <th>Alemania</th>
    <td>82.020.578</td>
    <td>40.346.853</td>
    <td>41.673.725</td>
  </tr>
  <tr>
    <th>Francia</th>
    <td>65.578.819</td>
    <td>31.764.615</td>
    <td>33.814.204</td>
  </tr>
  <tr>
    <th>Reino Unido</th>
    <td>63.896.071</td>
    <td>31.423.339</td>
    <td>32.472.732</td>
  </tr>
</table>
</body>
</html>

Aquí tienes un enlace interesante en el que se puede visualizar la misma página con diferentes estilos: Proyecto Zen garden

Creado con eXeLearning (Ventana nueva)