Como mejor se ven las cosas son con un ejemplo de cada una.
HORIZONTALMENTE
<html>
<head>
<meta charset="utf-8">
<title>Horizontalmente</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;
}
td{
border-style:solid;
border:dotted #45B508;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<table>
<caption>TABLA PRINCIPAL</caption>
<tbody>
<tr>
<td colspan="2">Celdas Horizontalmente</td>
<td>Celda 1</td>
</tr>
<tr>
<td>Celda 2</td>
</tr>
</tbody>
</table>
</body>
</html>
VERTICALMENTE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Verticalmente</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;
}
td{
border-style:solid;
border:dotted #45B508;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<table>
<caption>TABLA PRINCIPAL</caption>
<tbody>
<tr>
<td rowspan="2">Celdas Verticalmente</td>
<td>Celda 1</td>
</tr>
<tr>
<td>Celda 2</td>
</tr>
</tbody>
</table>
</body>
</html>
No hay comentarios:
Publicar un comentario
Gracias por participar en esta página.