现在我们来看看怎样巧妙运用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 }第二步：建立一个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> 以上就是HTML表格标记教程(48):CSS修饰表格_HTML/Xhtml_网页制作的内容，更多相关内容请关注PHP中文网（www.php.cn）！
HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！
html和css算编程语言吗Sep 21, 2022 pm 04:09 PM不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。
web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！
HTML5中画布标签是什么May 18, 2022 pm 04:55 PMHTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。
html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PMhtml5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。
html中document是什么Jun 17, 2022 pm 04:18 PM在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。
html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PMhtml5支持boolean值属性；boolean值属性指是属性值为true或者false的属性，如input元素中的disabled属性，不使用该属性表示值为flase，不禁用元素，使用该属性可以不设置属性值表示值为true，禁用元素。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
Dreamweaver Mac版
ビジュアル Web 開発ツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
