html tableタグのスタイル紹介(html5 table cssセンタリングの例を添付します) この記事では主にhtml5 tableタグの定義と各種スタイルの紹介をお伝えします。
HTML 5 タグの定義と使用法:
タグはテーブルを定義できます。 タグ内には、表のタイトル、表の行、表の列、表のセル、およびその他の表を配置できます。
HTMLテーブルタグの標準属性:
class、contenteditable、contextmenu、dir、draggable、id、inquired、
lang、ref、registrationmark、tabindex、template、title
htmlテーブルスタイルの例の紹介:
<table border="1">
<tr>
<td width="95" align="right" valign="top" nowrap="nowrap"><strong>处理意见:</strong></td>
<td id="fnote" width="300px" colspan="8"> </td>
</tr>
<tr>
<td><a href="#" onclick="showad()">审批记录</a></td>
</tr>
</table>
ログイン後にコピー
width: 列の幅
align: セルの内容の水平方向の配置: 右左中央
valign: セルの内容の垂直方向の配置: 上、下、中央のベースライン
colspan: 配置される列の数セルは複数にまたがることができます
rowspan: セルがまたがることができる行の数
rowspan=3 tr
nowrap: セル内のコンテンツを折りたたむかどうかを指定します
テーブル固有のスタイル属性:
1。
1、関数
隣接するセルの境界線間の距離を設定します(cellspacingと同様)2. 属性 border-spacing値: 1.値を1つとりますは、水平方向と垂直方向の間隔が等しいことを意味します 2、2 つの値を取ります
最初の値で表される水平方向の間隔 2 番目の値で表される垂直方向の間隔 2 つの値をスペースで区切ります 3.
border-collapse は分離する必要があります 分離ボーダーモードで有効にする必要があります3. タイトルの位置機能: タイトルの位置をデフォルトの位置から表の下に変更します
属性: caption-side 値: 1.topdefault
2.bottomタイトルはテーブルの下にあります CSSでテーブルを中央に配置するにはdivを使用します:
次のことができることを確認してください。 use display: table-cell div がセルにレンダリングされ、テーブル td の内容がすべて中央揃えになります。次に、div を含む div を考えました。内部の div を垂直方向に中央揃えにする方法が使用できると思います。 外側の div を display:table-cell に設定すると、内側の div が自動的に垂直方向の中央に配置されます。 テストでは、内側の div が中央に配置されていないことが判明したため、vertical-align を使用して中央に配置します。 1 つの要素が inline または inline-block (table-cell は inline-block horizontal とも解釈できます) レベルに属している場合、その要素のvertical-align 属性が有効になります。 たとえば、画像、ボタン、単一のチェック ボックス、単一行/複数行のテキスト ボックスなどの HTML コントロール。デフォルトでは、これらの要素のみがvertical-align 属性に影響します。 これで、table-cell でvertical-align:middle を使用して、コンテンツを垂直方向に中央揃えにすることができます。 text-algin: center、インライン要素に適しています。その後、内部の div を line-block に設定するだけです コード検証: <style>
.table {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.like {
display: inline-block;
width:100px;
height:50px;
border:2px solid black;
}
</style>
<div class="table" style="width:300px;height: 300px;background-color: #13c4a5">
<div class="like">
</div>
</div>
ログイン後にコピー
[関連推奨事項]
html 強力なタグは何を意味しますか? htmlのstrongタグの具体的な使い方を紹介
html5のaudioタグの使い方は? HTML5自動再生実装コード例
以上がhtml5 tableタグのスタイル紹介(html5 table CSSのセンタリング例を添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2018-09-11 16:45:17
-
2018-09-11 16:39:07
-
2018-09-11 16:29:40
-
2018-09-11 16:10:13
-
2018-09-11 16:05:55
-
2018-09-11 16:01:50
-
2018-09-11 15:55:13
-
2018-09-11 15:50:18
-
2018-09-11 15:43:40
-
2018-09-11 15:34:44