Categoría: HTML

Tabla con formato

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table{
border:2px solid grey;
width:100%;
 
}
th, tfoot{
background-color:black;
color:yellow;
}
.ciudad{
background-color:lightgreen;
}
.pares{
background-color:#BBBBBB;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table>
<tr>
<th colspan="3">Ventas</th>
</tr>
<tr>
<td rowspan="2" class="ciudad">BCN</td>
<td >Ana</td>
<td>10</td>
</tr>
<tr class="pares">
<td>Rosa</td>
<td>20</td>
</tr>
<tr>
<td rowspan="2" class="ciudad">GIR</td>
<td >Juan</td>
<td>30</td>
</tr>
<tr class="pares">
<td>Eva</td>
<td>40</td>
</tr>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>100</td>
</tr>
</tfoot>
</table>

Ejemplos tablas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<table border=1>
 
<tr><th colspan="3">Ventas</th>
</tr>
<tr><td>Empleado</td><td>Enero</td><td>Febrero</td></tr>
<tr><td>Ana</td><td>10</td><td>10</td></tr>
<tr><td>Rosa</td><td>20</td><td>10</td></tr>
 
</table>
 
<table border="1">
<tr>
<th colspan="3">Ventas</th>
</tr>
<tr>
<td rowspan="2">BCN</td>
<td>Ana</td>
<td>10</td>
</tr>
<tr>
<td>Rosa</td>
<td>20</td>
</tr>
<tr>
<td rowspan="2">GIR</td>
<td>Juan</td>
<td>30</td>
</tr>
<tr>
<td>Eva</td>
<td>40</td>
</tr>
</table>

Ejemplo estilos listas inline-block

<ul>
<li><iframe name="iframe1" src="http://trifulcas.com"></iframe></li>
<li><iframe name="iframe2" src="http://sport.com"></iframe></li>
<li><iframe name="iframe3" src="http://bcn.com"></iframe></li>
</ul>
<ul>
<li><a href="http://sport.com" target="iframe1">Sport</a></li>
<li><a href="http://trifulcas.com" target="iframe2">Trifulcas</a></li>
<li><a href="http://sport.com" target="iframe3">Sport</a></li>
</ul>
iframe{
 border:0;
}
li{
 display:inline-block;
 width:200px;
 border: solid 1px grey;
}
li iframe{
 width:200px;
}

Layout semántico

html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="divs.css">

</head>

<body>

<header><h1>El mundo de los perros</h1>
</header>
<main>
<aside>
<ul>
<li><a href="#">Galería</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Tienda</a></li>
<!--
<li><a href="#">Contacto</a></li>
-->
</aside>
<section><br/>
<h1>Bienvenido a la página sobre el mejor amigo del hombre</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</section>
</main>
<footer >(C) Netmind 2017</footer>
</body>

</html>

css

header{
 background-color:#173e43;
 height:200px;
 padding:20px;
}
header h1{
 color:rgba(255,0,0,.6);
 font-size:80px;
}
aside{
 background-color:#fae596 ;
 height:600px;
 width:20%;
 float:right;
}
section{
 background-color:#dddfd4;
 height:600px;
}
footer{
 background-color:#3fb0ac;
 height:100px;
}

Mini layout

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>

<div style=”background-color:blue;height:200px”>título
</div>
<div>
<div style=”background-color:orange;height:600px;width:20%;float:right”>Barra</div>
<div style=”background-color:#BBBBBB;height:600px”>Contenido</div>
</div>
<div style=”background-color:blue;height:100px”>Pie</div>
</body>

</html>