CSSでテーブルスタイルを実装する方法

CSS でテーブル スタイルを実装する方法: 最初に HTML サンプル ファイルを作成し、次に td タグの「colspan、rowspan」属性を設定し、最後に「background-color」およびその他のスタイルを設定してテーブル スタイルを実装します。 。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS でテーブル スタイルを実装するにはどうすればよいですか?

#html、美しいテーブルを実装するための CSS

#最終効果: HTML と CSS を使用して美しく充実した表を作成します。非常にシンプルで使いやすいです。

---

前書き:

CSS が登場する前、Web ページは通常、使用したテーブル レイアウト;
• 現在、時代が変わり、テーブルは Web ページのレイアウトに適さなくなりました。
• テーブルのレンダリング速度が遅すぎるため、
• ブラウザーは表示されませんレンダリングが完了するまでテーブル
  

ただし、テーブルは依然として便利です:

開発者にとって、テーブルは一般にバックグラウンド管理システムで使用されます
2. 初心者向け 学者向け フォームは特に使いやすく、絶妙な効果を生み出します

Webサイトは通常、フロントデスクとバックデスクの2つの部分に分かれています

フロントデスク: ユーザー指向
• バックエンド: 管理者指向 (インターフェイスの要件は低く、機能の要件は高い)

h5 の時代が近づいている今、私たちは 1 つ明確にしておく必要があります HTML は Web サイトの骨格を担うだけです HTML タグ要素は（検索エンジンが見るための）意味論的なものであり、Web サイトのスタイルは Web サイトのスタイルを担当します

1: テーブルタグの説明

##Table
• table タグの下にこれがあります 4 つのサブタグ: caption、thead、tbody、tfoot (記述してもしなくてもよい)
  
テーブル タイトル (キャプション) )
Header (thead)
• サブ要素 tr
  
Table body (tbody)
• がありますサブ要素 tr
  
テーブル フィート (tfoot)
• サブ要素 tr
  があります。テーブルは要素の行と行で構成されます。
Table row (tr)
• サブ要素 th と td があります
  テーブルは行、列は複数のセルに分割されています、
タイトル セル (th)、セル ( td)
• 慣例により、これは広告に表示されます
  

2: 純粋な HTML 効果これは確かにそうです醜いですが、CSS を追加すると、振り返ってみると、みにくいアヒルの子は白い白鳥になります

html :
コードは長くて退屈なので、勝ちましたすべてを表示するわけではありません (tbody タグの折りたたまれた内容は 10 個の tr タグであり、各 tr タグの中に 5 個の td タグがあります)

テーブルのセルの結合

td タグの 2 つの属性:colspan、rowspan
• 
  Cross-column:
• 、上記のように、セルの 5 列をマージします。 1 行行全体:
• 、2 行のセルを 1 列に結合

##3: CSS を使用してテーブル スタイルを変更する

css:

table{
    width: 100%;
    border-collapse: collapse;}table caption{
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;}th,td{
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;}table thead tr{
    background-color: #008c8c;
    color: #fff;}table tbody tr:nth-child(odd){
    background-color: #eee;}table tbody tr:hover{
    background-color: #ccc;}table tbody tr td:first-child{
    color: #f40;}table tfoot tr td{
    text-align: right;
    padding-right: 20px;}

ご興味がございましたら、引き続きお読みください:

4: 上記の CSS に関するいくつかの興味深い知識ポイント

border-collapse

border-collapse は table タグの属性であり、次の 2 つの値があります:

seperate

境界線を分離
1. collapse
隣接する境界線を結合します

:nth-child()

:nth -child() は擬似クラスです。

擬似クラスはセレクターの一種です

table tbody tr:nth-child(odd)

意味:

は tr 要素でなければならず、テーブル tbody

の下の奇数番号のサブ要素

正是用这个伪类，我实现了表格中表格主体内的奇数行和偶数行的背景颜色不同

（）内的参数：

• odd或者2n+1：第奇数个
• even或者2n：第偶数个
• 6n：第6、12、18、24、… 、6n个
• 5：第5个

:first-child()

:first-child()是伪类

table tbody tr td:first-child

意思：选中table tbody tr下，第一个子元素并且必须是td元素

利用这个伪类，我实现了将表格主体的第一列全部单元的背景颜色改了

:hover

:hover是伪类

table tbody tr:hover

意思：选中鼠标悬停的table tbody下tr标签

即我通过这个伪类，实现了我鼠标悬停在表格主体的某个地方时，整行变色

最终效果：利用html、css制作一个美观、大方的表格，而且很简单，容易上手。

---

前言：

• 在css出现之前，网页通常使用表格布局；
• 如今，时代变了，表格不再适用于网页布局，
• 因为表格的渲染速度过慢
  浏览器要将表格渲染完，才会显示

不过，表格还是有用的：

1. 对于开发者来说，一般在后台管理系统中使用到表格
2. 对于初学者来说，表格特别容易上手，并且制作出精美的效果

网站通常分为前台、后台两部分

• 前台：面向用户
• 后台：面向管理员（对界面要求不高，对功能性要求高）

如今，h5的时代正在来临，我们需要明确一个观点，HTML只负责网站的骨架，html标签元素是有语义化的（给搜索引擎看的）；而网站的样式是靠css来负责的

一：表格标签讲解

• 表格（table）
  table标签下有这么四个子标签：caption、thead、tbody、tfoot（可写可不写）
• 表格标题（caption）
• 表头（thead）
  有子元素 tr
• 表格主体（tbody）
  有子元素 tr
• 表尾（tfoot）
  有子元素 tr
• 表格是一行一行元素组成的，表格行（tr）
  有子元素 th 和 td
• 表格被行、列划分为多个单元，标题单元格（th）、单元格（td）
  习惯上，th 出现在thead内

二：纯HTML效果

确实丑，但是往后面看，加了css后，丑小鸭就变白天鹅了

html：

代码又长又无趣，我就不把它全部显示出来了（tbody标签折叠的内容就是10个tr标签，每个tr标签内部有5个td标签）

• 表格的单元格合并
  td标签的两个属性：colspan、rowspan
• 跨列：<td colspan="'5'"></td>，如上，合并一行中的5列单元格
• 跨行：<td rowspan="'2'"></td>，合并一列中的2行单元格

三：用CSS修改表格样式

css：

table{
    width: 100%;
    border-collapse: collapse;}table caption{
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;}th,td{
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;}table thead tr{
    background-color: #008c8c;
    color: #fff;}table tbody tr:nth-child(odd){
    background-color: #eee;}table tbody tr:hover{
    background-color: #ccc;}table tbody tr td:first-child{
    color: #f40;}table tfoot tr td{
    text-align: right;
    padding-right: 20px;}

有兴趣的可以继续看看：

四：上述CSS中几个有意思的知识点

border-collapse

border-collapse是table标签的一个属性，有两个取值：

1. seperate 边框之间分离
2. collapse 两两相临边框合并

:nth-child()

:nth-child()是伪类

伪类是选择器的一种

table tbody tr:nth-child(odd)

意思：必须是tr元素，必须是table tbody下的第奇数个子元素

正是用这个伪类，我实现了表格中表格主体内的奇数行和偶数行的背景颜色不同

（）内的参数：

• odd或者2n+1：第奇数个
• even或者2n：第偶数个
• 6n：第6、12、18、24、… 、6n个
• 5：第5个

:first-child()

:first-child()是伪类

table tbody tr td:first-child

意思：选中table tbody tr下，第一个子元素并且必须是td元素

利用这个伪类，我实现了将表格主体的第一列全部单元的背景颜色改了

:hover

:hover是伪类

table tbody tr:hover

意思：选中鼠标悬停的table tbody下tr标签

即我通过这个伪类，实现了我鼠标悬停在表格主体的某个地方时，整行变色
【推荐学习：css视频教程】

以上がCSSでテーブルスタイルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。