表ラベル、ラベル属性、スタイル属性の概要
10363 ワード
ターゲット:表ラベルとラベルのプロパティをまとめ、表スタイルを設定する
PS:フォームの用途はユーザーデータを収集することであり、表の用途はグリッド形式でユーザーに二次元データを表示することである.
一、表ラベル
理論的にはtable、tr、tdだけで目的を達成できるが、構造がより明確になり、意味化の効果を達成するためにはthead、th、tbody、tfoot、captionを組み合わせる必要があり、より良い制御テーブルのためにcolgroup、col
1、表の構成構造:tabel(タイトル+ヘッダー+本体+足)1)、タイトルcaption 2)、ヘッダー:thead+(tr+th)またはtr+td、1つのthead、1つのtheadに1つのtr 3しかない)、本体:tbody+(tr+td)またはtr+td、複数のtbodyがあり、1つのtbodyに複数のtr 4があり、足:tfoot+(tr+td)またはtr+tdがあり、1つのtfootしかありません.1つのtfootにはtrが1つしかありません
2、colgroupとcolは、行単位で表をtrラベルで直接制御することで目的を達成しやすく、列単位でcolgroupラベルとcolラベルを使用することができる
3、html 5は以前の各バージョンの表のラベルの属性の大部分に対してもう支持しなくて、その中の多くの属性はすべてスタイルの属性で実現することができて、表のラベル、ラベルの属性は構造だけを担当します
4、いくつかの一般的な設定1、行をまたいでセル(td、th)にrowspan="3"2、列をまたいでセル(td、th)にcolspan="2"を設定する
二、表table独自のスタイル属性1、セルが独立して存在するかどうかを設定するスタイル属性border-collapse 1.1)、属性値:separate(デフォルト)セルが独立して1.2)、属性値:collapse隣接セルの枠線が結合し、tableの別のスタイルborder-spacingが無効である
2、隣接セル間の距離border-spacingを設定し、属性値はcss長さ値である
3、表のタイトルの位置caption-sideを設定し、属性値top(デフォルト)、bottom->タイトルはそれぞれ上、下にある
4、空のセルに枠線empty-cellsを表示するかどうか、属性値show(デフォルト)、hide->はそれぞれ表示、非表示
5、内容が長すぎる場合、セルtable-layout 5.1を伸ばすかどうか、autoデフォルト値を設定し、内容が長すぎる場合、セル全体を伸ばす5.3)、fixed内容が長すぎる場合、セルPS全体を引っ張らない:表の幅を設定した場合、引張りを設定し、内容が長すぎる場合、他の空きスペースのあるセルを先に押し出すそしてストレッチPS:表の幅を設定した場合、ストレッチをしないように設定し、内容が長すぎると自動的に改行します.セルや表に高さを設定しても同じです
PS:上記の表の独立したスタイル属性を除いて、その他のスタイル属性とその他のラベルの差は多くありませんPS:trラベルは高さを設定することしかできなくて、幅を設定することができません
PS:フォームの用途はユーザーデータを収集することであり、表の用途はグリッド形式でユーザーに二次元データを表示することである.
一、表ラベル
理論的にはtable、tr、tdだけで目的を達成できるが、構造がより明確になり、意味化の効果を達成するためにはthead、th、tbody、tfoot、captionを組み合わせる必要があり、より良い制御テーブルのためにcolgroup、col
1、表の構成構造:tabel(タイトル+ヘッダー+本体+足)1)、タイトルcaption 2)、ヘッダー:thead+(tr+th)またはtr+td、1つのthead、1つのtheadに1つのtr 3しかない)、本体:tbody+(tr+td)またはtr+td、複数のtbodyがあり、1つのtbodyに複数のtr 4があり、足:tfoot+(tr+td)またはtr+tdがあり、1つのtfootしかありません.1つのtfootにはtrが1つしかありません
<table>
<caption> caption>
<thead>
<tr>
<th> th>
<th> th>
<th> th>
tr>
thead>
<tbody>
<tr>
<td>1，1td>
<td>1，2td>
<td>1，3td>
tr>
<tr>
<td>2，1td>
<td>2，2td>
<td>2，3td>
tr>
tbody>
<tfoot>
<tr>
<td> 1td>
<td> 2td>
<td> 3td>
tr>
tfoot>
table>2、colgroupとcolは、行単位で表をtrラベルで直接制御することで目的を達成しやすく、列単位でcolgroupラベルとcolラベルを使用することができる
3、html 5は以前の各バージョンの表のラベルの属性の大部分に対してもう支持しなくて、その中の多くの属性はすべてスタイルの属性で実現することができて、表のラベル、ラベルの属性は構造だけを担当します
4、いくつかの一般的な設定1、行をまたいでセル(td、th)にrowspan="3"2、列をまたいでセル(td、th)にcolspan="2"を設定する
二、表table独自のスタイル属性1、セルが独立して存在するかどうかを設定するスタイル属性border-collapse 1.1)、属性値:separate(デフォルト)セルが独立して1.2)、属性値:collapse隣接セルの枠線が結合し、tableの別のスタイルborder-spacingが無効である
2、隣接セル間の距離border-spacingを設定し、属性値はcss長さ値である
3、表のタイトルの位置caption-sideを設定し、属性値top(デフォルト)、bottom->タイトルはそれぞれ上、下にある
4、空のセルに枠線empty-cellsを表示するかどうか、属性値show(デフォルト)、hide->はそれぞれ表示、非表示
5、内容が長すぎる場合、セルtable-layout 5.1を伸ばすかどうか、autoデフォルト値を設定し、内容が長すぎる場合、セル全体を伸ばす5.3)、fixed内容が長すぎる場合、セルPS全体を引っ張らない:表の幅を設定した場合、引張りを設定し、内容が長すぎる場合、他の空きスペースのあるセルを先に押し出すそしてストレッチPS:表の幅を設定した場合、ストレッチをしないように設定し、内容が長すぎると自動的に改行します.セルや表に高さを設定しても同じです
PS:上記の表の独立したスタイル属性を除いて、その他のスタイル属性とその他のラベルの差は多くありませんPS:trラベルは高さを設定することしかできなくて、幅を設定することができません
<html>
<head lang="en">
<meta charset="UTF-8">
<title> title>
<style>
#myT{border-collapse: collapse;}
th,td{border: 1px solid darkcyan;padding: 10px;}
tr:hover{background-color: #00aaff;cursor: pointer;}
style>
head>
<body>
<table id="myT">
<caption> caption>
<thead>
<tr>
<th>APth>
<th>ADth>
<th>ADCth>
tr>
thead>
<tbody>
<tr>
<td> td>
<td> td>
<td> td>
tr>
<tr>
<td> td>
<td> EZtd>
<td> td>
tr>
tbody>
<tfoot>
<tr>
<td>GGtd>
<td>GGtd>
<td>GGtd>
tr>
tfoot>
table>
body>
html>