コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド htmlチュートリアル HTML表格标记教程(48):CSS修饰表格_HTML/Xhtml_网页制作

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

PHP中文网
PHP中文网
May 16, 2016 pm 04:44 PM

现在我们来看看怎样巧妙运用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）！


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
2週間前 By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
1 か月前 By DDD
R.E.P.O.最高のグラフィック設定
2週間前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
1週間前 By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
2週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7411
15
CakePHP チュートリアル
1358
52
Steamのアカウント名の形式は何ですか
76
11
Win11 Activation Key Permanent
17
19
もっと見る
Related knowledge
HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

PHPでHTML/XMLを解析および処理するにはどうすればよいですか？ PHPでHTML/XMLを解析および処理するにはどうすればよいですか？ Feb 07, 2025 am 11:57 AM

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML（拡張可能なマークアップ言語）は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

See all articles