目次
HTML には 10 個の表関連タグがあります
可选的属性
 经过CSS添加后的table
ホームページ ウェブフロントエンド htmlチュートリアル table_html/css_WEB-ITnose に関するいくつかのレコード

table_html/css_WEB-ITnose に関するいくつかのレコード

Jun 24, 2016 pm 12:03 PM
table 記録

HTML には 10 個の表関連タグがあります

表の大きなタイトル。このタグは

の間のどこにでも表示できます。検索エンジンロボットにとって情報を記録することは重要です。パラメータは align、valign です

,これらはそれぞれ、テーブルのヘッダー、本文、および脚部を表します。 Web コンテンツを印刷する場合、表が大きすぎて 1 ページに印刷できない場合、 がすべてのページに表示されます (注: IE では無効ですが、Firefox では有効です)。

tbody の特徴:

ダウンロード時、つまりブラウザが HTML を解析する際に、大きなテーブルをセグメントに分けて表示できるようにするため、テーブルは全体として解釈され、tbody を使用して、画面。テーブルが非常に長い場合は、tbody セグメンテーションを使用して、テーブル全体がダウンロードされるのを待たずに部分ごとにテーブルを表示します。 1 つの部分をダウンロードし、1 つの部分を表示します。テーブルが大きい場合に効果的です。 tbody に含まれる行の内容は、ダウンロード後、テーブルの終わりを待たずに最初に表示されます。さらに、もう 1 つ注意しなければならないことがあります。テーブルの行は、本来は上から下に表示されます。ただし、thead/tbody/tfoot を適用すると、コード行の順序に関係なく、「頭からつま先まで」表示されます。つまり、tbody の後に thead が記述されている場合、HTML が表示されるときに、やはり最初に表示され、次に tbody が表示されます。

<table border="1">          <caption>Table caption here</caption>          <colgroup span="1" style="background:#DEDEDE;"/>          <colgroup span="2" style="background:#EFEFEF;"/>           <!-- Table Header-->          <thead>            <tr>                <th>Head 1</th>                <th>Head 2</th>                <th>Head 3</th>            </tr>          </thead>          <!-- Table Footer-->          <tfoot>                <tr>                    <td>Foot 1</td>                    <td>Foot 2</td>                    <td>Foot 3</td>                </tr>          </tfoot>           <!-- Table Body-->          <tbody>                <tr>                    <td>A</td>                    <td>B</td>                    <td>C</td>                </tr>                <tr>                    <td>D</td>                    <td>E</td>                    <td>F</td>                </tr>          </tbody>        </table>
ログイン後にコピー

テーブル内に thead と tfoot は 1 つだけ存在できますが、tbody は複数を持つことができます。

    tfoot は tbody の前に出現する必要があります。これにより、ブラウザはメイン データを受信する前にテーブルの末尾をレンダリングでき、これは有益です高速化 表の表示速度です。これは大きなテーブルの場合に特に重要です
  1. Thead、tbody、tfoot は tr タグを使用する必要があります
2.

テーブルの列定義属性

テーブル列のグループ化、Firefox、Chrome、およびSafariのみcolgroup要素のspanとwidth属性をサポート

行を定義するテーブルの rree
define table

テーブル本体を定義する

< ;td> ;

セルを定義する

テーブルの注釈を定義する(下)

のヘッダーを定義しますtable では、 th 要素内のテキストは通常​​太字で表示されます

テーブルのヘッダーを定義します

一、

キャプションの align 属性を left に設定すると、各ブラウザの動作が異なります。

FirefoxクロームIE6 7 8 IE9 サファリ3.

キャプションの align 属性が left に設定されている場合、IE6 7 はこの属性を反映し、他のブラウザーは無関心です。タグスタイルに text-align を追加する場合も同様です

IE6 7IE8 9、firefox、safari、chrome

可选的属性

属性

描述

align

left

center

right

不赞成使用。请使用样式代替。

规定表格相对周围元素的对齐方式。

bgcolor

rgb(x,x,x)

#xxxxxx

colorname

不赞成使用。请使用样式代替。

规定表格的背景颜色。

border

pixels

规定表格边框的宽度

cellpadding

pixels
%

规定单元边沿与其内容之间的空白

cellspacing

pixels
%

规定单元格之间的空白

frame

void
above
below
hsides
lhs
rhs
vsides
box
border

规定外侧边框的哪个部分是可见的

rules

none
groups
rows
cols
all

规定内侧边框的哪个部分是可见的

width

%
pixels

规定表格的宽度

summary

text

规定表格的摘要。用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。摘要是不会显示出来的,给一些其它的工具使用的,比如盲人阅读器等。

bordercolor

rgb(x,x,x)

#xxxxxx

colorname

设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。(不推荐使用bordercolor 属性,而推荐使用CSS 样式表的border 属性来进行设置)

一、cellspacing

cellspacing在大部分浏览器中与style中的border-spacing效果相同,但在IE6 7中略有不同

IE6 7 cellspacing=0 IE6 7 border-spacing=0

二、css中的border-collapse

css中的border-collapse:collapse | separate 可以设置表格的边框是否被合并成一个边框。将设置为border-collapse:collapse后,各个浏览器显示各不相同

firefox chrome IE6 7 8 IE9
safari

中的scope

  scope属性定义将表头单元与数据单元相关联的方法;标识某个单元是否是列、行、列组或行组的表头;不会在普通浏览器中产生任何视觉变化;屏幕阅读器可以利用该属性。

  使用 scope 属性,可以将数据单元格与表头单元格联系起来。通过属性值 row,表头行包括的所有表格都将和表头单元格联系起来。指定 col,会将当前列的所有单元格和表头单元格绑定起来。

<table border="1">  <tr>    <th scope="col">Month</th>    <th scope="col">Savings</th>  </tr>  <tr>    <td scope="row">1</td>    <td>January</td>    <td>$100.00</td>  </tr>  <tr>    <td scope="row">2</td>    <td>February</td>    <td>$10.00</td>  </tr></table>
ログイン後にコピー

、frame , rules

frame常见属性
属性值 说明
above 显示上边框
border 显示上下左右边框
below 显示下边框
hsides 显示上下边框
lhs 显示左边框
rhs 显示右边框
void 不显示边框
vsides 显示左右边框

rules常见属性
属性值 说明
all 显示所有内部边框
groups 显示介于行列边框
none 不显示内部边框
cols 仅显示列边框
rows 仅显示行边框

<table border="1" frame="hsides" rules="groups">          <caption>Table caption here</caption>          <colgroup span="1" style="background:#DEDEDE;text-align:center"/>          <colgroup span="2" style="background:#EFEFEF;"/>           <!-- Table Header-->          <thead>            <tr>                <th>Head 1</th>                <th>Head 2</th>                <th>Head 3</th>            </tr>          </thead>          <!-- Table Footer-->          <tfoot>                <tr>                    <td>Foot 1</td>                    <td>Foot 2</td>                    <td>Foot 3</td>                </tr>          </tfoot>           <!-- Table Body-->          <tbody>                <tr>                    <td>A</td>                    <td>B</td>                    <td>C</td>                </tr>                <tr>                    <td>D</td>                    <td>E</td>                    <td>F</td>                </tr>          </tbody>        </table>
ログイン後にコピー

firefox chrome IE6 7 IE8
IE9 safari

、CSS中的table-layout

  用来指定表格显示的样式

table { table-layout: fixed } 
ログイン後にコピー

* auto(缺省)* fixed* inherit
ログイン後にコピー

  auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的,由第一个指定大小的单元格决定;如果所有单元格都没有指定大小,则由第一个单元格的默认大小决定;如果单元格中的内容超出单元格的大小,则用CSS中的overflow命令控制。微软公司声称使用这个命令,表格的显示速度可以加快100倍。为了加快表格显示,最好事先就在CSS(或者table标签的width和height属性)中指定表格的宽度和高度。

、跨行rowspan 跨列colspan

熟练掌握表格的colspan、 rowspan属性,可以随心所欲的制作出复杂的表格。

<table border="1">          <caption>Table caption here</caption>          <colgroup span="1" style="background:#DEDEDE;text-align:center"/>          <colgroup span="2" style="background:#EFEFEF;"/>           <!-- Table Header-->          <thead>            <tr>                <th>Head 1</th>                <th>Head 2</th>                <th>Head 3</th>            </tr>          </thead>          <!-- Table Footer-->          <tfoot>                <tr>                    <td>Foot 1</td>                    <td>Foot 2</td>                    <td>Foot 3</td>                </tr>          </tfoot>           <!-- Table Body-->          <tbody>                <tr>                    <td rowspan="2">A</td>                    <td>B</td>                    <td>C</td>                </tr>                <tr>                    <td colspan="2">D</td>                </tr>          </tbody>        </table>
ログイン後にコピー

 经过CSS添加后的table

发挥你的想象力,玩转table

 

附加中保存的是示例的html代码

table.rar

也可以进入页面http://download.csdn.net/download/loneleaf1/7500555下载

 

参考资料:

http://blog.csdn.net/lujunql/article/details/5529989 table标签中thead、tbody、tfoot的作用
http://www.w3school.com.cn/tags/tag_table.asp HTML

标签
http://blog.csdn.net/nightelve/article/details/7957726 四个好看的CSS样式表格
http://www.divcss5.com/wenji/w503.shtml CSS如何设置html table表格边框样式
http://www.divcss5.com/html/h380.shtml HTML Table tr td th表格标签元素
http://www.divcss5.com/jiqiao/j470.shtml css table width表格宽度样式设置定义技巧教程篇
http://blog.csdn.net/neoxuhaotian/article/details/6596280 HTML学习笔记(三)
http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html 精通HTML表格的使用
http://www.douban.com/group/topic/10207896/ html常用标记详讲(二)--Table
http://www.787866.com/835.html html中10个与表格(table)相关标签
http://www.it118.org/specials/f27a38ab-a491-4669-bc47-108d9daed52c/fa512118-f79b-4693-958a-357e44086656.htm html中的表格(table)标签详解
http://www.cnblogs.com/xugang/archive/2010/08/11/1797305.html
标签中比较少见的属性和子标签:
http://www.iteye.com/topic/560496 主题:十个最简单实用的Table设计模板

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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ヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Pinduoduo で購入したものの記録はどこで確認できますか? 購入した製品の記録を表示するにはどうすればよいですか? Pinduoduo で購入したものの記録はどこで確認できますか? 購入した製品の記録を表示するにはどうすればよいですか? Mar 12, 2024 pm 07:20 PM

Pinduoduo ソフトウェアは多くの優れた製品を提供し、いつでもどこでも購入でき、各製品の品質は厳しく管理され、すべての製品は正規品であり、多くの優遇ショッピング割引があり、誰もがオンラインで買い物をすることができます。携帯電話番号を入力してオンラインにログインし、オンラインで複数の配送先住所や連絡先情報を追加し、最新の物流動向をいつでも確認できます さまざまなカテゴリの商品セクションが開き、検索して上下にスワイプして購入および注文することができます家から出ることなく利便性を体験することができます.オンライン ショッピング サービスでは、購入した商品を含むすべての購入記録を確認することもでき、数十のショッピング赤い封筒とクーポンを無料で受け取ることもできます.今回、編集者は Pinduoduo ユーザーに詳細なオンライン サービスを提供しました購入した製品の記録を表示する方法。 1. 携帯電話を開き、Pinduoduo アイコンをクリックします。

Linux コマンド履歴を表示および管理する方法 Linux コマンド履歴を表示および管理する方法 Aug 01, 2023 pm 09:17 PM

Linux でコマンド履歴を表示する方法 Linux では、history コマンドを使用して、以前に実行されたすべてのコマンドのリストを表示します。構文は非常に単純です:history History コマンドと組み合わせるオプションには次のものがあります: オプションの説明 -c 現在のセッションのコマンド履歴をクリアします -w コマンド履歴をファイルに書き込みます -r 履歴ファイルからコマンド履歴を再ロードします - n 最近のコマンドの出力数を制限するhistory コマンドを実行するだけで、Linux ターミナルで以前に実行されたすべてのコマンドのリストが表示されます。コマンド履歴の表示に加えて、コマンド履歴を管理したり、以前に実行したコマンドの変更を実行したり、逆に実行したりすることもできます。コマンド履歴を検索したり、履歴を完全に削除したりすることもできます

iPhoneの通話履歴を確認してエクスポートするにはどうすればよいですか? iPhoneの通話履歴を確認してエクスポートするにはどうすればよいですか? Jul 05, 2023 pm 12:54 PM

iPhone の通話録音は過小評価されがちですが、iPhone の最も重要な機能の 1 つです。この機能はシンプルであるため非常に重要であり、デバイス上で発信または受信された通話に関する重要な洞察を提供できます。仕事の目的でも、法的手続きの場合でも、通話記録にアクセスできる機能は非常に貴重であることがわかります。簡単に言うと、通話履歴とは、電話をかけたり受けたりするたびに iPhone に作成されるエントリを指します。これらのログには、連絡先の名前 (連絡先として保存されていない場合は番号)、タイムスタンプ、継続時間、通話ステータス (ダイヤル、不在、応答なし) などの重要な情報が含まれています。これらはあなたの通信履歴の簡潔な記録です。通話履歴には、iPhone に保存されている通話履歴ストリップが含まれます

iPhoneのヘルスケアアプリで薬の記録履歴を表示する方法 iPhoneのヘルスケアアプリで薬の記録履歴を表示する方法 Nov 29, 2023 pm 08:46 PM

iPhone では、ヘルスケア App に薬を追加して、毎日摂取する薬、ビタミン、サプリメントを追跡および管理できます。デバイスで通知を受信したときに、服用した薬またはスキップした薬を記録できます。薬を記録すると、どれくらいの頻度で薬を服用したか、または服用しなかったかを確認できるので、健康状態を追跡するのに役立ちます。この記事では、iPhone のヘルスケア アプリで選択した薬のログ履歴を表示する方法を説明します。ヘルスケア アプリで薬の記録履歴を表示する方法に関する短いガイド: ヘルスケア アプリ > 参照 > 薬 > 薬 > 薬の選択 > オプション&a に移動します。

C# 開発のアドバイス: システムのログ記録と監視 C# 開発のアドバイス: システムのログ記録と監視 Nov 22, 2023 pm 08:30 PM

C# 開発に関する提案: ログおよび監視システムの概要: ソフトウェア開発プロセスでは、ログおよび監視システムは重要なツールです。この記事では、C# 開発におけるログ記録および監視システムの役割と実装に関する提案を紹介します。はじめに: ロギングとモニタリングは、大規模なソフトウェア開発プロジェクトにおいて不可欠なツールです。これらは、プログラムの実行状況をリアルタイムで把握し、問題を迅速に発見して解決するのに役立ちます。この記事では、C# 開発でログおよび監視システムを使用してソフトウェアの品質と開発効率を向上させる方法について説明します。ロギングシステムの役割

Java 開発プロジェクトをログに記録して監視する方法 Java 開発プロジェクトをログに記録して監視する方法 Nov 03, 2023 am 10:09 AM

Java 開発プロジェクトを記録および監視する方法 1. 背景の紹介 インターネットの急速な発展に伴い、ますます多くの企業が Java を開発し、さまざまな種類のアプリケーションを構築し始めています。開発プロセスでは、ロギングとモニタリングは無視できない重要なリンクです。開発者は、ロギングと監視を通じて問題を発見して時間内に解決し、アプリケーションの安定性とセキュリティを確保できます。 2. ログの重要性 1. 問題の追跡: アプリケーション エラーが発生した場合、ログは問題を迅速に特定するのに役立ちます。

iPhoneの履歴を消去する方法 iPhoneの履歴を消去する方法 Jun 29, 2023 pm 01:13 PM

SafariでiPhoneの履歴を消去するにはどうすればよいですか? Apple の Safari で閲覧履歴と検索履歴をクリアするには、デバイスで設定アプリを開く必要があります。 [設定]を選択した後、下にスクロールして[Safari]を選択する必要があります。次に別のメニューが表示され、[履歴とWebサイトデータを消去]を選択する必要があります。次に、メニューから [履歴とデータを消去] を選択する必要があります。これにより、Apple の Safari ブラウザからすべての検索履歴、閲覧履歴、Cookie、およびデータが削除されます。これで、これまでの閲覧履歴と検索履歴がすべて Safari から削除されました。 Safariの検索履歴をすべて削除したくない場合

ランニングキロをキープに記録するには? ランニングトラックはどこに記録されますか? ランニングキロをキープに記録するには? ランニングトラックはどこに記録されますか? Mar 12, 2024 am 11:10 AM

上記のソフトウェアが私たちにとって非常に優れたスポーツ タイプのソフトウェアであることは誰もが知っており、ユーザーがさまざまなスポーツをリアルタイムで完了するのに役立ち、また、一部の実行プロセス中に上記の軌跡の一部を確認することもできます。ユーザーは上記の機能情報の一部を知らないため、今日は、誰もがさまざまな機能をより適切に実行できるように、コンテンツとエクスペリエンスの一部をわかりやすく説明します。自分の走りの軌跡や記録をぜひお見逃しなく。さらに質の高いコンテンツがあなたを待っています。興味深い攻略情報がたくさん待っています。あなたも知りたいなら、ぜひ手に取ってみましょう今すぐエディターで見てください。​

See all articles