Ahora lo que vamos a realizar es una tabla con un poco de diseño con Css.
Dentro de las etiquetas <style> y </style> se encuentra el diseño para los colores, el título, y la tabla.
Dentro del cuerpo del documento Html, que le indicamos con el inicio de la etiqueta <body> y el fin con </body> se encuentra la tabla, que consta con tres columnas, encabezado, pie y tres filas.
Las columnas nos la indica las etiquedas <td> </td>
Las filas nos la indica las etiquetas <tr> </tr>
Como existen tres columnas y le hemos puesto encabezado, lo hemos hecho con las etiquetas <th> y </th>
La etiqueta <caption> </caption> nos indica el titulo de la tabla.
La etiqueta <tfoot></tfoot> nos indica el pie de la tabla.
Este es el código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style>
table{
border: medium #ED1316;
/*estilo de los bordes*/
border-style:double;
/*color de fondo*/
background: #A7CAF4;
/*ocupa el 50 por ciento de la web*/
width: 50%;
/*nos lo centra*/
margin: auto;
}
caption{
text-align: center;
font-size: 20px;
padding: 15px;
color: cadetblue;
}
th{
border-style:double;
/*nos realiza una separacion*/
padding: 20px;
/*creamos un degradado*/
background: -moz-linear-gradient(top, #677a26, #bfd571);
}
td{
border-style:solid;
border:dotted #45B508;
text-align: center;
padding: 5px;
}
#pie{
text-align: center;
padding: 10px;
font-size: 20px;
color: blue;
margin: auto;
}
#pietabla{
background: #E92A2D;
font-size: 20px;
}
</style>
</head>
<body>
<table>
<caption>Tabla de Ejemplo</caption>
<tfoot id="pietabla">
<td>Pie1</td>
<td>Pie2</td>
<td>Pie3</td>
</tfoot>
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Nacionalidad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Luis</td>
<td>García</td>
<td>Español</td>
</tr>
<tr>
<td>Antonio</td>
<td>Romero</td>
<td>Croata</td>
</tr>
<tr>
<td>Rafael</td>
<td>Rodríguez</td>
<td>Rumano</td>
</tr>
</tbody>
</table>
<section id="pie">
Created by Mariano Garrido
</section>
</body>
</html>
No hay comentarios:
Publicar un comentario
Gracias por participar en esta página.