ホームページ > 記事 > ウェブフロントエンド > 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 コンピューター。
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)两种算法:
f35d6e602fd7d0f0edfa6f7d103c1b57固定表格布局: fixed
#优点:允许浏览器更快地对表格进行布局, (在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。);
#缺点:不太灵活。
2cc198a1d5eb0d3eb508d858c9f5cbdb自动表格布局:automatic
#优点:更能反映传统的 HTML,(在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。);
#缺点:自动算法比较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
(3)可能的值:
值 |
描述 |
automatic |
默认。列宽度由单元格内容设定。 |
fixed |
列宽由表格宽度和列宽度设定。 |
inherit |
规定应该从父元素继承 table-layout 属性的值。 |
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>
表格中的文本对齐和垂直对齐属性。
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>
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>
<!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>
<!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 サイトの他の関連記事を参照してください。