Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > HTML表格标记教程(48):CSS修饰表格_HTML/Xhtml_网页制作

HTML表格标记教程(48):CSS修饰表格_HTML/Xhtml_网页制作

PHP中文网
Release： 2016-05-16 16:44:24
Original
2043 people have browsed it

现在我们来看看怎样巧妙运用css语法美化表格。 注：除非特殊声明，本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。 例一：1px表格
现在我们来看看怎样巧妙运用css语法美化表格。 注：除非特殊声明，本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。 例一：1px表格

很多人热衷于制作1px表格，于是发明了各式各样的方法，用css做起来可就灵活的多。如果要制作一个1x1的1px表格只要简单定义一下边框值就可以了。我们首先用Dreamweaver插入一个1x1表格，宽度为50，然后在该表格table或者td中定义border:1 solid teal ，所做的表格的效果如下：

但是要制作一个非1x1的表格(如2x2)就稍微麻烦些，因为如果直接定义td样式border:1 solid teal，则显示的效果如下：

你会发现表格外框为1px，而里面则变成了2px了，这是由于叠加的原因。为了解决这么问题我们可以这样做：
首先为td定义样式：border:#cc0000 solid;border-width:0 1 1 0，这样表格表现为

然后再为table定义样式：:border:#cc0000 solid;border-width:1 0 0 1，这样就可做作成一个完整的1px表格了。
                                                                                       例二：粗边框的1px表格

此表格的内格线为1px而外边框为3px，有了例一的基础做起来就不难了，只要修改border-width值就行了。
对table所使用的样式的代码是：border:blue solid;border-width:3 2 2 3，对td所使用的样式的代码是：border:blue solid;border-width:0 1 1 0例三：虚线框表格

做法和例一类似，border-style从solid改为dashed。对table所使用的样式的代码是：border:black dashed;border-width:1 0 0 1，对td所使用的样式的代码是：border:black dashed;border-width:0 1 1 0例四：点线边框表格

注意点线(dotted)的最小象素为2，对table所使用的样式的代码是 ：border:green dotted ;border-width:2 0 0 2，对td所使用的样式的代码是 ：border:green dotted;border-width:0 2 2 0例五：双线边框表格

注意双线(double)的最小象素为3，对table所使用的样式的代码是：border:teal 4 dou，对td所使用的样式的代码是：border:teal 1 solid 例六：outset外框表格

对table所使用的样式的代码是：border: 3 outset，对td所使用的样式的代码是： border: 1 solid 例七：inset外框表格

对table所使用的样式的代码是：border: 3 inset，对td所使用的样式的代码是：border: 1 solid 例八：ridge外框表格

对table所使用的样式的代码是：border:#ee0000 3 ridge对td所使用的样式的代码是：border: 1 solid
                                               #p# 例九：综合使用一

这个表格的外框采用的是脊线，内单元格边框是槽线，注意表格插入时cellspacing设为1了。对table所使用的样式的代码是：border:skyblue 4 ridge 对td所使用的样式的代码是：border: navy 1 groove例十：综合使用二

别以为这是九个表格，其实他们是一个表格中的九个单元格，由于表格外边框为0，所以你看不到罢了。只需对td使用样式：border:maroon 3 double 另外别忘了把表格的cellspacing设为1哦。 例十一：综合使用三

此表格的上下左右边框采用了不同的样式，你可以根据喜好自行更改。对table所使用的样式的代码是：border:purple 4 ;border-style:dashed double 对td所使用的样式的代码是：border:1 solid 例十二：综合使用四

这是一个双线边框的1px表格，和例五比较起来要显得精巧，具体做法是这样的：
1.先做一个1x1的1px表格，并将cellspacing设为1;
2.再做一个3x3的1px表格，将width和height均设为100%;
3.将后做的表格插入先前做的表格中即可。 例十三：背景边框一

利用改变cellspacing的值可以把背景做成边框，上面的表格的制作方法是：
1.首先做一个1x1的表格，并设置好背景，将cellspace的值设为3;
2.再做一个3x3的1px表格，width和height均设为100%;
3.将后做的表格插入先前做的表格中即可。如果你采用一幅会变色的gif动画，那么表格的边框就会自动连续改变颜色。 例十四：背景边框二

这个表格的制作方法和前面一个类似，你肯定能研究出来! 例十五：3D边框表格
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
这是一个具有3D边框效果的表格，做起来有点窍门，我们先来学做1x1的。
第一步：建立两个样式如下

.out { border-width:1px;border-style:solid;border-color:#dddddd #777777 #777777 #dddddd }
.in { border-width:1px;border-style:solid;border-color:#777777 #dddddd #dddddd #777777;
background:#ffcccc }
Copy after login

第二步：建立一个1x1的表格，高和宽均为100，cellspacing设为1，如下所示：

第三步：对整个表格(即table标签)采用out样式，而单元格(即td标签)采用in样式。现在存盘看看效果吧，是不是和下面的一样?

学会了1x1的3D边框的表格的制作，要做出本例的效果就不难了，读者不妨自己摸索一下。
#p#
前面我们通过举例讲述了一些用css美化表格边框的方法，您可以尝试不同的组合，从而做出更漂亮的表格!为了方便你学习，这里为你提供了各种效果表格的全部代码，您可以将代码复制到写字板生成一个txt文件，然后将其扩展名改为htm，这样就可以用Ie直接打开了。 代码如下

       <html>
<head>
<title>用css美化表格边框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.table1 { border:#000000 dashed;border-width:1 0 0 1 }
.td1 { border:#000000 dashed;border-width:0 1 1 0 }
.table2 { border:#cc0000 solid;border-width:1 0 0 1;
background:#ffffff }
.td2 { border:#cc0000 solid;border-width:0 1 1 0 }
.table3 { border:green dotted;border-width:2 0 0 2 }
.td3 { border:green dotted;border-width:0 2 2 0 }
.table4 { border:blue solid;border-width:2 1 1 2 }
.td4 { border:blue solid;border-width:0 1 1 0 }
.table5 { border:teal 4 double }
.td5 { border:teal 1 solid }
.table6 { border:3 outset }
.td6 { border: 1 solid }
.table7 { border:3 inset }
.td7 { border:1 solid }
.table8 { border:#ee0000 3 ridge }
.td8 { border:1 solid }
.table9 { border: 4 skyblue ridge }
.td9 { border:1 navy groove ;background:#ffffff }
.td10 { border:maroon 3 double }
.table11 {border:purple 4 ;border-style:dashed double}
.td11 { border:1 solid }
.out { border-width:1;border-style:solid;
border-color:#cccccc #333333 #333333 #cccccc }
.in { border-width:1;border-style:solid;
border-color:#333333 #cccccc #cccccc #333333;background:#ffcccc }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p align="center"> 
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table1">
<tr > 
<td class=td1> </td>
<td class="td1"> </td>
<td class="td1"> </td>
</tr>
<tr> 
<td class="td1"> </td>
<td class="td1"> </td>
<td class="td1"> </td>
</tr>
<tr> 
<td class="td1"> </td>
<td class="td1"> </td>
<td class="td1"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table2">
<tr > 
<td class="td2"s> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr> 
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr> 
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table3">
<tr > 
<td class="td3"s> </td>
<td class="td3"> </td>
<td class="td3"> </td>
</tr>
<tr> 
<td class="td3"> </td>
<td class="td3"> </td>
<td class="td3"> </td>
</tr>
<tr> 
<td class="td3"> </td>
<td class="td3"> </td>
<td class="td3"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table4">
<tr > 
<td class="td4"> </td>
<td class="td4"> </td>
<td class="td4"> </td>
</tr>
<tr> 
<td class="td4"> </td>
<td class="td4"> </td>
<td class="td4"> </td>
</tr>
<tr> 
<td class="td4"> </td>
<td class="td4"> </td>
<td class="td4"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table5">
<tr > 
<td class="td5"> </td>
<td class="td5"> </td>
<td class="td5"> </td>
</tr>
<tr> 
<td class="td5"> </td>
<td class="td5"> </td>
<td class="td5"> </td>
</tr>
<tr> 
<td class="td5"> </td>
<td class="td5"> </td>
<td class="td5"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table6">
<tr > 
<td class="td6"> </td>
<td class="td6"> </td>
<td class="td6"> </td>
</tr>
<tr> 
<td class="td6"> </td>
<td class="td6"> </td>
<td class="td6"> </td>
</tr>
<tr> 
<td class="td6"> </td>
<td class="td6"> </td>
<td class="td6"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table7">
<tr > 
<td class="td7"> </td>
<td class="td7"> </td>
<td class="td7"> </td>
</tr>
<tr> 
<td class="td7"> </td>
<td class="td7"> </td>
<td class="td7"> </td>
</tr>
<tr> 
<td class="td7"> </td>
<td class="td7"> </td>
<td class="td7"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table8">
<tr > 
<td class="td8"> </td>
<td class="td8"> </td>
<td class="td8"> </td>
</tr>
<tr> 
<td class="td8"> </td>
<td class="td8"> </td>
<td class="td8"> </td>
</tr>
<tr> 
<td class="td8"> </td>
<td class="td8"> </td>
<td class="td8"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="1" cellpadding="0" border="0" class="table9">
<tr > 
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr> 
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr> 
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="2" cellpadding="0" border="0">
<tr > 
<td class="td10"> </td>
<td class="td10"> </td>
<td class="td10"> </td>
</tr>
<tr> 
<td class="td10"> </td>
<td class="td10"> </td>
<td class="td10"> </td>
</tr>
<tr> 
<td class="td10"> </td>
<td class="td10"> </td>
<td class="td10"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table11">
<tr > 
<td class="td11"> </td>
<td class="td11"> </td>
<td class="td11"> </td>
</tr>
<tr> 
<td class="td11"> </td>
<td class="td11"> </td>
<td class="td11"> </td>
</tr>
<tr> 
<td class="td11"> </td>
<td class="td11"> </td>
<td class="td11"> </td>
</tr>
</table>
<p> </p>
<table width="500" border="0" cellspacing="1" cellpadding="0" style="border:#cc0000 1 solid" >
<tr>
<td>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="table2">
<tr > 
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr> 
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr> 
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<table width="500" border="0" cellspacing="3" cellpadding="0" 
style="border:#cc0000 1 solid" background="back.jpg">
<tr> 
<td> 
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="table2">
<tr > 
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr> 
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr> 
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="2" cellpadding="0" border="0" style="border:1 navy solid" background="back.jpg">
<tr > 
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr> 
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr> 
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
</table>
<p> </p>
<table width="500" border="0" cellspacing="3" cellpadding="0">
<tr> 
<td> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr> 
<td class="in"> </td>
</tr>
</table>
</td>
<td> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr> 
<td class="in"> </td>
</tr>
</table>
</td>
<td> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr> 
<td class="in"> </td>
</tr>
</table>
</td>
</tr>
<tr> 
<td> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr> 
<td class="in"> </td>
</tr>
</table>
</td>
<td> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr> 
<td class="in"> </td>
</tr>
</table>
</td>
<td> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr> 
<td class="in"> </td>
</tr>
</table>
</td>
</tr>
<tr> 
<td> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr> 
<td class="in"> </td>
</tr>
</table>
</td>
<td> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr> 
<td class="in"> </td>
</tr>
</table>
</td>
<td> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr> 
<td class="in"> </td>
</tr>
</table>
</td>
</tr>
</table>
</p>
</body>
</html>
Copy after login

 以上就是HTML表格标记教程(48):CSS修饰表格_HTML/Xhtml_网页制作的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！


Related labels：
HTML，格标记，CSS修饰
source：php.cn
Previous article：HTML table markup tutorial (37): Background image attribute of table header BACKGROUND_HTML/Xhtml_Web page production Next article：XHTML三种文件类型声明_HTML/Xhtml_网页制作
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2223
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2365
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1977
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1863
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1933
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template