テーブルとアクセス可能なデータテーブルの再理解例

テーブルとアクセス可能なデータテーブルの再理解例_CSS/HTML

WBOY

リリース： 2016-05-16 12:11:03

オリジナル

1908 人が閲覧しました

特に指定のない限り、このサイトのコンテンツはクリエイティブコモンズライセンス表示および非営利使用に基づいてライセンスされています。あなたの労力の成果を尊重してください。

テーブルは常に Web デザインと制作プロセスの重要な部分であり、CSS レイアウトを学ぶ前は主にレイアウトに使用されていました。フォームを再理解する必要があります...

現代の Web デザインと制作では、テーブルの主な目的は多次元の 2 次元データを保存することです。テーブルに関連するタグには、table、tr、td、th、tbody、thead、tfoot、col、colgroup、caption などがあります。これらのタグを適切に適用するにはどうすればよいでしょうか。まずは名詞の説明から始めましょう。

用語の説明

テーブル

2Dデータを表示

tr

テーブル内の行

TD

データセル

番目

行または列のヘッダー情報を定義するヘッダーセルは、レイアウトテーブルでは使用できません。

あなた

テーブル内の 1 つまたは複数の行はグループ化されており、thead および tfoot と一緒に使用する必要があります

頭

テーブル内の 1 つまたは複数の行をグループ化し、tbody および tfoot と一緒に使用します

足

テーブル内の 1 つまたは複数の行をグループ化し、tbody および thead と一緒に使用します

コル

列、特定の属性を特定の列または複数の列に適用します。colgroup

と一緒に使用します。

コルグループ

列の組み合わせ、col と一緒に使用します

キャプション

テーブルのタイトルを定義します。テーブルの先頭で 1 回だけ使用します

概要

フォームの目的を説明してください

例:

<table summary="这是一个具有亲和力的表格的演示" id="demotab">
<caption>
访问 <a href="http://www.forest53.com">www.forest53.com</a> 浏览器统计
</caption>
<thead>
<tr>
<th>浏览器 / 月 </th>
<th>2005 / 11 </th>
<th>2006 / 04 </th>
<th>2006 / 05 </th>
</tr>
</thead>
<tfoot>
<tr>
<th>总计</th>
<td>1,646 ( 98.45% )</td>
<td>6,978 ( 99.48% ) </td>
<td>5,366 ( 99.56% ) </td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Internet Explorer</th>
<td>1,535 (91.81%)</td>
<td>5,905 (86.41%)</td>
<td>4,550 (84.42%)</td>
</tr>
<tr>
<th>Firefox</th>
<td>98 (5.86%)</td>
<td>746 (10.92%)</td>
<td>640 (11.87%)</td>
</tr>
<tr>
<th>Opera</th>
<td>13 (0.78%)</td>
<td>147 (2.15%)</td>
<td>176 (3.27%)</td>
</tr>
</tbody>
</table>

ログイン後にコピー