次の記事では、Vertical Table HTML の概要を説明します。 HTML テーブルでは、新しいレコードがそれぞれデータベースの行と列として挿入されます。 DB では行は水平、列は垂直とみなされます。 HTML テーブルは実際には、Bootstrap のようなフレームワークの情報を表示するために使用されます。テーブルの見た目と雰囲気を簡単に向上させることができます。テーブルは、Web、デスクトップ、モバイル アプリケーションなど、ほとんどのアプリケーションで使用されます。エンドユーザーに情報を提供するためにも重要です。ブートストラップ フレームワークやその他の多くの機能を使用して、テーブルなどのさまざまな要素のプレゼンテーションをスタイル設定および最適化する機能を提供します。
一般に、
| 、 | を使用してテーブルを作成します。タグ。その |
|---|---|
| 行を指定します。テーブルヘッダーを指定します。 | HTML で値を指定します。以下にいくつかの例を示します:
例 #1コード: <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:75%">
<tr>
<th>Name:</th>
<td>Sivaraman</td>
</tr>
<tr>
<th>Mobile:</th>
<td>123456789</td>
</tr>
<tr>
</table>
</body>
</html>ログイン後にコピー 出力:
上の例では、垂直方向に 2 つの見出しが表示されています。列形式で表示されます。これは、HTML テーブルでの垂直方向のデータ表示の基本的な例の 1 つです。 例 #2コード: <html>
<head>
<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>
</head>
<table class="scroll">
<thead>
<tr>
<th scope="col" colspan="1">ID</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Siva</td>
<td>30</td>
</tr>
<tr>
<td>2</td>
<td>Raman</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>Sivaraman</td>
<td>31</td>
</tr>
</tbody>
</table>
</html>ログイン後にコピー 出力:
上記の例では、スクロール オプションを使用します。デフォルトでは、テーブル データに対して垂直スクロール オプションが有効になっています。必要に応じて、水平スクロール オプションも有効にしました。 例 #3コード: <style>
table { border-collapse: separate; line-height:25px; }
tr { display: block; float: left; width:200px;}
th, td { display: block; }
</style>
<form >
<table border="1" class="variant-table" >
<tr>
<td style="background-color: #53B3AE;">Name</td>
<td style="background-color: #53B3AE;">Number</td>
<td style="background-color: #53B3AE;">Age</td>
<td style="background-color: #53B3AE;">ID</td>
</tr>
</table>
</form>ログイン後にコピー 出力:
上記の例では、背景色のスタイルを使用して列を強調表示しています。必要に応じて、その部分を強調表示するために前景色も使用します。 さまざまなセクションの表HTML テーブルでは、別のテーブル書式設定セットも使用しました。上記の例では、テーブルの垂直方向の配置の基本を使用しました。強調表示されたテーブルには別の書式設定セットがあります: 枠線とルール:枠線を使用すると、テーブルの周囲のフレームが強調表示されます。 <TABLE border="1" summary="Welcome to My Domain."> <CAPTION>IT</CAPTION> <TR> <TH>Name</TH> <TH>Age</TH> <TH>Number</TH> <TR> <TD>Sivaraman</TD> <TD>30</TD> <TD>8220244056</TD> <TR> <TD>Raman</TD> <TD>31</TD> <TD>123456789</TD> </TABLE> ログイン後にコピー
上記の例の境界線を見てきました。それは境界線です。点線などの他の境界線も使用します。 HTML で画像を垂直方向の中央に配置する方法HTML 用に画像を垂直方向にも配置します。 CSS スタイルを使用する場合は、スタイル タグで設定を割り当てる必要があり、画像を垂直モードで表示しました。 コード: <html> <body bgcolor="#ffffff"> <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> </body> </html> ログイン後にコピー 出力:
上の例は、画像が垂直モードであることを示しています。必要に応じて向きも変更します。垂直モードを使用すると、水平モードと比較してスペースが削減され、ページの他のコンテンツが 1 ページ自体に表示されます。外側の HTML テーブルは、境界線を除く Web ブラウザー領域、HTML テーブルを作成し、領域全体が HTML テーブルのセルになります。 外側と内側の HTML テーブルのセルは、親テーブルの行と子テーブルの行から属性を揃えるためのデフォルト値を継承します。また、 |
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
