css3のテーブル属性とは何ですか？
css3 テーブル属性: 1. border-collapse; 2. border-spacing; 3. caption-side; 4. empty-cells; 5. table-layout; 6. width; 7. padding; 8.テキスト整列など
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
1.CSS テーブル
CSS を使用すると、HTML テーブルをより美しくすることができます。 CSS テーブルの境界線を指定するには、border 属性を使用します。
省略された境界線プロパティは、1 つの宣言ですべての境界線プロパティを設定します。
設定できるプロパティは (順番に) border-width、border-style、border-color です。 (つまり、境界線の幅、境界線のスタイル、境界線の色)
上記の値のいずれかが欠落していても問題ありません。たとえば、 、ボーダー: #FF0000; は許可されます。
#1.1 境界属性
| 説明 | |
|---|---|
| border-width | 境界線の幅を指定します|
| border-style | ##境界線のスタイルを指定します|
| 境界線の色を指定します |
#1.2 border-width 属性
| thin | |
|---|---|
| 中 | |
| thick | |
| 境界線の幅をカスタマイズできます。 |
値
| none | |
|---|---|
| hidden | |
| 点線 | |
| dashed | |
| solid | |
| #double | 二重線を定義します。二重線の幅は、border-width の値と同じです。 |
| groove | 3D 溝の境界線を定義します。効果はborder-colorの値によって異なります。 |
| ridge | 3D 尾根の境界を定義します。効果はborder-colorの値によって異なります。 |
| inset | 3D 差し込み枠を定義します。効果はborder-colorの値によって異なります。 |
| アウトセット | 3D アウトセット境界線を定義します。効果はborder-colorの値によって異なります。 |
| #1.4 境界線の色属性 |
値
説明| color | |
|---|---|
| transparent | 境界線の色を透明にすることを指定します。これはデフォルトの |
| 小さな例です: | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS简单学习</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>英文名</th>
<th>中文名</th>
</tr>
<tr>
<td>HTML</td>
<td>超文本标记语言</td>
</tr>
<tr>
<td>CSS</td>
<td>层叠样式表</td>
</tr>
</table>
</body>
</html>ログイン後にコピー |
上記の例では、テーブルが二重枠があります。これは、table 要素と th/td 要素に別々の境界があるためです。
テーブルの単一の境界線を表示するには、border-collapse プロパティを使用します。次のように: 
#1.5 border-collapse 属性
値 説明
| 可能であれば、境界線は 1 つの境界線に結合されます。 border-spacing および empty-cells プロパティの | |||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| デフォルト値は無視されます。国境は分離されます。 border-spacing および empty-cells プロパティは無視されません | |||||||||||||||||||||||||||||||
值 | 描述 |
length length | 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个length参数，那么定义的是水平和垂直间距。 如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。 |
1.7 caption-side属性
（1）作用：设置表格标题的位置，该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。
（2）可能的值：
值 | 描述 |
top | 默认值。把表格标题定位在表格之上。 |
bottom | 把表格标题定位在表格之下。 |
（3）浏览器的兼容性：除IE外的所有主流浏览器都支持 caption-side 属性。如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side属性。
1.8 empty-cells 属性
（1）作用：该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate，否则将忽略这个属性。
（2）可能的值：
值 | 描述 |
hide | 不在空单元格周围绘制边框。 |
| show | 在空单元格周围绘制边框。默认。 |
（3）浏览器的兼容性：除IE外的所有浏览器都支持 empty-cells 属性。如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 属性。
1.9 table-layout属性
（1）作用：来显示表格单元格、行、列的算法规则，该属性指定了完成表布局时所用的布局算法。
（2）两种算法：
<1>固定表格布局: fixed
#优点：允许浏览器更快地对表格进行布局, （在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。）；
#缺点：不太灵活。
<2>自动表格布局：automatic
#优点：更能反映传统的 HTML，（在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。）；
#缺点：自动算法比较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。
（3）可能的值：
值 | 描述 |
automatic | 默认。列宽度由单元格内容设定。 |
fixed | 列宽由表格宽度和列宽度设定。 |
inherit | 规定应该从父元素继承 table-layout 属性的值。 |
2.CSS表格的宽度和高度（width、height）
width和height属性定义表格的宽度和高度。
下面的例子是设置30％的宽度，30像素的th元素，20像素的td元素的高度的表格：
小实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
table {
width: 30%;
}
th {
height: 30px;
}
td {
height: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>43</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</body>
</html>
3.CSS表格的文字对齐方式（text-align）
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心。
vertical-align属性设置垂直对齐方式，比如顶部，底部或中间。
小实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
th {
width: 40%;
height: 30px;
text-align: center;
}
td {
width: 40%;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>43</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</body>
</html>
4.CSS表格填充（padding）
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
| 值 | 说明 |
|---|---|
| length | 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px |
| % | 规定基于父元素的宽度的百分比的填充 |
| inherit | 指定应该从父元素继承padding |
小实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
th,td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>43</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</body>
</html>
5.CSS表格的背景颜色及字体颜色（background-color、color）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
table,th,td {
border: 1px solid black;
}
th {
background-color: burlywood;
color: aqua;
}
td {
background-color: chartreuse;
color: brown;
}
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table>
<caption>表1.1-学生个人信息表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>43</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>24</td>
</tr>
</table>
</body>
</html>
6.CSS表格多属性综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
/*对应整个表格的样式*/
#LOL {
font-family: "楷体", sans-serif;
width: 50%;
height: 100%;
text-align: center;
border-collapse: collapse;
}
/*对应表格中的边框线的样式*/
#LOL th,#LOL td {
font-size: 20px;
border: 1px solid #00FFFF;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 10px;
}
/*对应表格表头的样式*/
#LOL th {
font-size: 30px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 10px;
background-color: #7FFF00;
color: deeppink;
}
/*对应表格中行为a的列的样式*/
#LOL tr.a td {
background-color: #DEB887;
color: #FF0000;
}
/*对应表格中行为b的列的样式*/
#LOL tr.b td {
background-color: antiquewhite;
color: #FF1493;
}
/*对应表格标题的样式*/
caption {
font-size: 16px;
caption-side: bottom;
}
</style>
</head>
<body>
<table id="LOL">
<caption>表6.66-英雄联盟娱乐信息表</caption>
<tr>
<th>英雄名称</th>
<th>定位</th>
<th>推荐符文</th>
<th>可选神话装备</th>
</tr>
<tr class="a">
<td>熔岩巨兽</td>
<td>辅助</td>
<td>不灭之握</td>
<td>霜火护手</td>
</tr>
<tr class="b">
<td>战争女神</td>
<td>AD Carry</td>
<td>致命节奏</td>
<td>海妖杀手</td>
</tr>
<tr class="a">
<td>战争之影</td>
<td>打野</td>
<td>征服者</td>
<td>三项之力</td>
</tr>
<tr class="b">
<td>诺克萨斯之手</td>
<td>上单</td>
<td>征服者</td>
<td>渴血战斧</td>
</tr>
<tr class="a">
<td>疾风剑豪</td>
<td>中单</td>
<td>征服者</td>
<td>不朽盾弓</td>
</tr>
</table>
</body>
</html>
（学习视频分享：css视频教程）
以上がcss3のテーブル属性とは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7553
15
1382
52
83
11
22
96
純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例)
Jun 28, 2022 pm 01:39 PM
純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。
CSSを上手に使って色々な変わった形のボタンを実現（コード付き）
Jul 19, 2022 am 11:28 AM
この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。
スペースを取らずにCSS内の要素を非表示にする方法
Jun 01, 2022 pm 07:15 PM
2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。
CSS3でレースボーダーを実装する方法
Sep 16, 2022 pm 07:11 PM
CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレース スタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。
テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。
Jun 10, 2022 pm 01:00 PM
テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。
CSS3でマウスクリックで画像を拡大する方法
Apr 25, 2022 pm 04:52 PM
実装方法: 1. ":active" セレクターを使用して、画像上のマウス クリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。
CSS3でアニメーションの回転速度を設定する方法
Apr 28, 2022 pm 04:32 PM
CSS3 では、「animation-timing-function」属性を使用してアニメーションの回転速度を設定できます。この属性は、アニメーションがサイクルを完了する方法を指定し、アニメーションの速度曲線を設定するために使用されます。構文は「element {アニメーションタイミング関数: 速度属性値;}"。
css3のアニメーション効果に変形はありますか？
Apr 28, 2022 pm 02:20 PM
css3 のアニメーション効果には変形があり、「animation: アニメーション属性 @keyframes ..{..{transform: 変換属性}}」を使用して変形アニメーション効果を実現できます。アニメーション属性はアニメーション スタイルを設定するために使用され、変形スタイルを設定するには、transform 属性を使用します。
