html5 tableタグのスタイル紹介（html5 table CSSのセンタリング例を添付）-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

html5 tableタグのスタイル紹介（html5 table CSSのセンタリング例を添付）

寻∝梦

Aug 21, 2018 pm 02:19 PM

html5 table

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 つの値をスペースで区切ります

border-collapse は分離する必要があります

分離ボーダーモードで有効にする必要があります

3. タイトルの位置

機能: タイトルの位置をデフォルトの位置から表の下に変更します

属性: caption-side

値:

1.top

default

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