table_html/css_WEB-ITnose に関するいくつかのレコード-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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;"/>  <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead>  <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot>  <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 の前に出現する必要があります。これにより、ブラウザはメインデータを受信する前にテーブルの末尾をレンダリングでき、これは有益です高速化表の表示速度です。これは大きなテーブルの場合に特に重要です

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 までご連絡ください。

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。