En un pots anterior había mostrado los diferentes tipos de tablas que se pueden obtener con HTML, ahora te quiero mostrar esas mismas tablas pero incluyendo un poco de CSS para obtener un efecto tipo 3D.
Demostración
El CSS colócalo arriba de ]]></b:skin>
/* Tabla en general */
table{
background-color: #BBB; /* Color de fondo */
color: #FFFFFF; /* Color de texto */
font-family: Helvetica; /* Tipo de letra */
font-size: 16px; /* Tamaño de letra */
width: 800px;/* Ancho */
height: 500px;/* Alto */
padding: 20px; /* Expansión */
border-top:8px solid #F4F4F4; /* Borde de arriba */
border-left:8px solid #F4F4F4; /* Borde de izquierda */
border-right:8px solid #CCC; /* Borde de derecha */
border-bottom:8px solid #CCC; /* Borde de abajo */
}
th{
border-top:20px solid #CCC; /* Borde de arriba */
border-left:20px solid #CCC; /* Borde de izquierda */
border-right:20px solid #F4F4F4; /* Borde de derecha */
border-bottom:20px solid #F4F4F4;/* Borde de abajo */
}
th:hover{
border-top:20px solid #F4F4F4; /* Borde de arriba */
border-left:20px solid #F4F4F4; /* Borde de izquierda */
border-right:20px solid #CCC; /* Borde de derecha */
border-bottom:20px solid #CCC;/* Borde de abajo */
}
/* Un enlace */
a{
font-size: 10px; /* Tamaño de letra */
text-decoration: underline;/* Texto subrayado */
}
a:hover{
text-decoration: none; /* Texto sin subrayado */
}
Y el HTML colócalo en una entrada o como Elemento HTML/Javascript
<!— Tabla 1 --> <div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;"> <table> <tr align="center"><th>Titulo</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Leer mas</a></th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</th></tr> </table> </div> <!— Tabla 2 --> <div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;"> <table> <tr align="center"><th>Titulo 1</th><th>Titulo 2</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> </table> </div> <!— Tabla 3 --> <div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;"> <table> <tr align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> </table> </div> <!— Tabla 4 --> <div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;"> <table> <tr align="center"><th colspan="3">Titulo</th></tr> <tr align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> </table> </div> <!— Tabla 5--> <div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;"> <table> <tr align="center"><th rowspan="5">Mensaje</th></tr> <tr align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> </table> </div> <!— Tabla 6 --> <div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;"> <table> <tr align="center"><th rowspan="5">Mensaje</th><th colspan="4">Titulo</th></tr> <tr align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th></tr> </table> </div> <!— Tabla 7 --> <div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;"> <table> <tr align="center"><th rowspan="2">Mensaje</th><th colspan="3">Titulo</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> <tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr> </table> </div>
