- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
用CSS实现一个具有立体感的表格效果，主要是表格背景与边框的结合作出的效果，技术实现容易，但对美化表格很有帮助，本段代码是实现的一个蓝色调的立体表格，你当然可以修改颜色，换成其它色调。
<html> <head> <title>立体效果表格的制作方法</title> <style type="text/css"> <!-- td {font-family: "宋体"; font-size:12px} --> </style> </head> <body> <div align="center"> <table width="750" border="0" cellspacing="0"> <tr> <td> <table width="30%" border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#40A4EE"> <tr> <td width="50%" height="18">A</td> <td width="50%" height="18"> </td> </tr> <tr> <td width="48%" height="18"> </td> <td width="52%" height="18"> </td> </tr> </table> </td> <td> <table width="30%" border="1" cellspacing="2" cellpadding="0" bgcolor="#40A4EE"> <tr> <td width="50%">B</td> <td width="50%"> </td> </tr> <tr> <td width="46%"> </td> <td width="54%"> </td> </tr> </table> </td> <td> <table width="40%" border="1" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#40A4EE"> <tr> <td width="50%">C</td> <td width="50%"> </td> </tr> <tr> <td width="50%"> </td> <td width="50%"> </td> </tr> </table> </td> </tr> <tr> <td height="131" colspan=3> <p align="left">A表格的参数：border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#40A4EE"</p> <p align="left">B表格的参数：border="1" cellspacing="2" cellpadding="0" bgcolor="#40A4EE"</p> <p align="left">C表格的参数：border="1" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#40A4EE"</p> <p align="left"> </p> </td> </tr> </table> </body> </html>