一, 背景
表格的背景样式同样可以使用 background 属性来进行设置.
示例如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- #t1{
- background-image: url(https://augustwuli.github.io/test/img/mafumafu.jpg);
- filter: alpha(opacity=40);/* 低版本 IE 使用 */
- float: left;/* 使此 div 的显示区域自适应内部元素大小 */
- }
- #t1 table{
- position: relative;/*IE 的 bug, 可以取消继承 filter 属性 */
- background: rgba(255,255,255,0.6);/* 在非 IE 浏览器里起作用 */
- }
- .head{
- background: #999999;
- }
- </style>
- </head>
- <body>
- <div id="t1">
- <table border="1" cellpadding="5" rules="all">
- <tr>
- <th class="head">Head1</th>
- <th class="head">Head2</th>
- </tr>
- <tr>
- <td>colum1</td>
- <td>colum2</td>
- </tr>
- <tr>
- <td>colum1</td>
- <td>colum2</td>
- </tr>
- </table>
- </div>
- </body>
- </html>
为 table 标签添加背景时, 如果要使用模糊效果, 那么可以使用 CSS3 的 opacity 属性, 但是使用 opacity 属性的同时将字体模糊掉, 所以需要用另外一种方法.
首先添加父节点的背景 "background-image: url(https://augustwuli.github.io/test/img/mafumafu.jpg);", 然后在 table 标签里添加 "background https://augustwuli.github.io/test/img/mafumafu.jpg);”,然后在table标签里添加“background : rgba(255,255,255,0.6);" 来实现背景模糊, 而低版本的 IE 不支持 rgba 形式的三色加透明度的颜色设置方式, 所以父节点需要使用 "filter: alpha(opacity=40);" 来设置模糊效果. 且利用 IE 的 bug 错误, 我们使用 "position:relative;" 来取消对滤镜属性的效果.
二, 边框
对于表格, 可以通过 HTML 提供 table 的属性 border,frame 和 rules 来进行边框的设置, 另外还可以通过 CSS 提供的 border 来进行边框的设置. 如果同时设置 HTML 所提供的边框属性以及 CSS 提供的边框属性, 可能会产生冲突, 建议只是用 CSS 来进行边框样式设置.
示例如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- table{
- background: #FFFF00;
- border:#FF0000 solid 1px;
- }
- table *{
- background:FFFFFF;
- border:#FF0000 solid 1px;
- }
- </style>
- </head>
- <body>
- <table cellpadding="5">
- <tr>
- <th class="head">Head1</th>
- <th class="head">Head2</th>
- </tr>
- <tr>
- <td>colum1</td>
- <td>colum2</td>
- </tr>
- <tr>
- <td>colum1</td>
- <td>colum2</td>
- </tr>
- </table>
- </body>
- </html>
三, 边距
可以通过 HTML 提供的 table 属性 cellspacing 来进行边距的设置, 另外还可以通过 CSS 提供的 padding 和 margin 属性来进行边距的设置.
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- #div1{
- border:#FF0000 solid 1px;
- background:#FFFF00;
- float: left;
- padding: 1px 4px 8px 12px;
- }
- #div1 table{
- border: #FF0000 solid 1px;
- background: #fff;
- padding-bottom: 10px;
- }
- table *{
- border:#00FF00 solid 1px;
- /* 对 table 内部所有标签的操作 */
- }
- </style>
- </head>
- <body>
- <div id="div1">
- <table border="1" rules="all" cellpadding="5">
- <tr>
- <th class="head">Head1</th>
- <th class="head">Head2</th>
- </tr>
- <tr>
- <td>colum1</td>
- <td>colum2</td>
- </tr>
- <tr>
- <td>colum1</td>
- <td>colum2</td>
- </tr>
- </table>
- </div>
- </body>
- </html>
四, 表格嵌套
表格标签可以互相嵌套, 这样可以使得样式更加丰富.
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- #t1{
- border-collapse: collapse;/* 表格的边框合并成一个单一的边框 */
- }
- #t2{
- width: 100%;
- text-align: center;
- }
- #t3{
- padding-top: 50px;
- border: #FF0000 solid 1px;
- }
- </style>
- </head>
- <body>
- <table id="t1" border="1" cellspacing="0" cellspacing="0">
- <tr>
- <td>Row1</td>
- <td>Content1</td>
- </tr>
- <tr>
- <td>Row2</td>
- <td>
- <table id="t2" cellpadding="0" cellspacing="0" rules="cols">
- <tr>
- <td>c1</td>
- <td>c2</td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td>Row3</td>
- <td>
- <table id="t3" border="1">
- <tr>
- <td>c3</td>
- <td>c4</td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </body>
- </html>
五, 跨行, 列表格项
为了实现一个表格项跨越多行或者多列的样式, 可以使用 HTML 提供的 colspan 属性以及 rowspan 属性来进行跨行, 列表格的设置.
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <table border="1">
- <tr>
- <td colspan="3">Heading</td>
- </tr>
- <tr>
- <td rowspan="3">Image</td>
- <td>Content1</td>
- <td>Content2</td>
- </tr>
- <tr>
- <td>Content3</td>
- <td>Content4</td>
- </tr>
- <tr>
- <td>Content5</td>
- <td>Content6</td>
- </tr>
- </table>
- </body>
- </html>
六, 表格倾斜角
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- .border{
- border-top:30px transparent solid;
- border-left: 100px #000 solid;
- }
- .border1{
- border-top: 30px transparent solid;/* 实线透明边框 */
- border-left: 100px #FFF solid;
- position: absolute;
- top: 1px;
- left: 0;
- }
- #head1{
- position: relative;
- }
- #title{
- position: absolute;
- top: -2px;
- left: 0px;
- width: 100px;
- }
- #row{
- text-align: right;
- }
- #column{
- text-align: left;
- }
- </style>
- </head>
- <body>
- <table border="1">
- <tr><th id="head1">
- <div class="border"></div>
- <div class="border1"></div>
- <div id="title">
- <div id="row">Row</div>
- <div id="column">COLUMN</div>
- </div>
- </th>
- <th>Column1</th>
- <th>Column2</th>
- </tr>
- <tr>
- <td>Row1</td>
- <td>Content1</td>
- <td>Content2</td>
- </tr>
- <tr>
- <td>Row2</td>
- <td>Content1</td>
- <td>Content2</td>
- </tr>
- </table>
- </body>
- </html>
来源: http://www.qdfuns.com/article/48075/5a92ac123c742728d09d13374c62f785.html