垂直テーブルHTML

次の記事では、Vertical Table HTML の概要を説明します。 HTML テーブルでは、新しいレコードがそれぞれデータベースの行と列として挿入されます。 DB では行は水平、列は垂直とみなされます。 HTML テーブルは実際には、Bootstrap のようなフレームワークの情報を表示するために使用されます。テーブルの見た目と雰囲気を簡単に向上させることができます。テーブルは、Web、デスクトップ、モバイル アプリケーションなど、ほとんどのアプリケーションで使用されます。エンドユーザーに情報を提供するためにも重要です。ブートストラップ フレームワークやその他の多くの機能を使用して、テーブルなどのさまざまな要素のプレゼンテーションをスタイル設定および最適化する機能を提供します。

HTML で垂直テーブルを作成するには?

一般に、

、、 を使用して、外部 HTML テーブルで valign 属性を使用するためのデフォルト値を行に配置します。タグ、場合によっては body タグも使用されないこともあります。その時間値は中央にあるため、外側の HTML テーブルのセル内のブロックされたコンテンツは、Web ブラウザー領域で垂直方向の中央に自動的に配置されます。

の使用HTML テーブル セルのコンテンツ ブロックは、Web ブラウザ領域の水平方向の中央に配置されます。内部テーブルは、前の画像例で述べたように、指定されたサイズのボックスを構成する別の種類の HTML テーブル セルです。制限内で表示されるため、ブラウザによってはページ自体の画像の向きを受け付けません。

HTML の内部テーブルを使用している場合、それは外部 HTML テーブルのセル内のテーブルです。テーブルの高さと幅を設定できない場合があります。その後、設定した寸法に関係なく、コンテンツに合わせてサイズが自動的に調整されます。幅と高さが大きい場合、Web ブラウザー領域は自動的に中央に表示されます。

上記の例では、タグ が強調表示される場合があります。 IE バージョン 3 では画像が表示されないようにします。ただし、HTML テーブルでブラウザーの互換性も設定しました。

結論

HTML テーブルでは、データを整理しており、HTML 内で表形式のデータを意味論的にレイアウトする方法と、CSS スタイルを使用して主導権を握る方法を知っています。また、ブートストラップ関数、JavaScript を使用した Jquery ライブラリを使用して、テーブルの強調表示や順序の変更を行います。 Jquery プラグインを使用する必要がある場合、表のセルにカーソルを置くと色が自動的に強調表示されるなど、表に関する多くの高度な機能が備わっています。同様に、いくつかの高度な概念を使用している場合、テーブルの形式が変更され、データが整列される可能性があります。

、

を使用してテーブルを作成します。タグ。その

行を指定します。テーブルヘッダーを指定します。

HTML で値を指定します。以下にいくつかの例を示します:

例 #1

コード:

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>

Name:	Sivaraman
Mobile:	123456789

出力:

上の例では、垂直方向に 2 つの見出しが表示されています。列形式で表示されます。これは、HTML テーブルでの垂直方向のデータ表示の基本的な例の 1 つです。

例 #2

コード:

<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #c6c7cc;
padding: 10px 15px;
}
th {
font-weight: bold;
}
table.scroll {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead tr { display: block; }
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 140px;
border-right: 1px solid black;
}
table.scroll thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
thead tr th {
height: 30px;
line-height: 30px;
/*text-align: left;*/
}
tbody { border-top: 2px solid black; }
tbody td:last-child, thead th:last-child {
border-right: none !important;
}
</style>

ID	Name	Age
1	Siva	30
2	Raman	29
3	Sivaraman	31

出力:

上記の例では、スクロール オプションを使用します。デフォルトでは、テーブル データに対して垂直スクロール オプションが有効になっています。必要に応じて、水平スクロール オプションも有効にしました。

例 #3

コード:

<style>
table { border-collapse: separate; line-height:25px; }
tr { display: block; float: left; width:200px;}
th,  td { display: block; }
</style>

Name

Number

Age

ID

出力:

上記の例では、背景色のスタイルを使用して列を強調表示しています。必要に応じて、その部分を強調表示するために前景色も使用します。

さまざまなセクションの表

HTML テーブルでは、別のテーブル書式設定セットも使用しました。上記の例では、テーブルの垂直方向の配置の基本を使用しました。強調表示されたテーブルには別の書式設定セットがあります:

枠線とルール:枠線を使用すると、テーブルの周囲のフレームが強調表示されます。

IT

Name	Age	Number
Sivaraman	30	8220244056
Raman	31	123456789

上記の例の境界線を見てきました。それは境界線です。点線などの他の境界線も使用します。

HTML で画像を垂直方向の中央に配置する方法

HTML 用に画像を垂直方向にも配置します。 CSS スタイルを使用する場合は、スタイル タグで設定を割り当てる必要があり、画像を垂直モードで表示しました。

コード:

<center>
<table width="100%" height="100%" bgcolor="#a3ddc4">
<tr>
<td align="center">
<table width="800" height="500" bgcolor="#ff6f6f">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- For Internet Explorer 3-->
<center>

</center>
</center>

出力:

上の例は、画像が垂直モードであることを示しています。必要に応じて向きも変更します。垂直モードを使用すると、水平モードと比較してスペースが削減され、ページの他のコンテンツが 1 ページ自体に表示されます。外側の HTML テーブルは、境界線を除く Web ブラウザー領域、HTML テーブルを作成し、領域全体が HTML テーブルのセルになります。

外側と内側の HTML テーブルのセルは、親テーブルの行と子テーブルの行から属性を揃えるためのデフォルト値を継承します。また、

以上が垂直テーブルHTMLの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。