垂直表格 HTML
- 王林原創
- 2024-09-04 16:45:201086瀏覽
以下文章提供了 Vertical Table HTML 的概述。在 HTML 表中，每個新記錄都會作為行和列插入到資料庫中。在資料庫中，行被視為水平，列被視為垂直。 HTML 表格實際上用於呈現 Bootstrap 等框架的資訊；我們能夠輕鬆地增強桌子的外觀和感覺。表格用於大多數應用程序，例如網頁、桌面或行動應用程式；對於向最終用戶提供資訊也很重要。使用引導框架和許多其他功能來為表格等不同元素提供樣式設定和最佳化演示的功能。
如何在 HTML 中建立垂直表格？
一般來說，我們在
| 、 | 的幫助下建立了一個表格。標籤。在那 |
|---|---|
| 行指定表頭， | 它指定 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>
輸出：
在上面的例子中，我們看到兩個標題顯示在垂直方向；它們以列格式顯示。它是 HTML 表格中垂直資料顯示的基本範例之一。 範例#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> 輸出：
上面的範例顯示影像處於垂直模式；如果需要，我們也會改變方向。與水平模式相比，使用垂直模式會減少空間，並且頁面的其他內容都顯示在單一頁面本身中。外部 HTML 表格使 Web 瀏覽器區域（除了邊框）成為一個 Html 表格，整個區域將是 HTML 表格單元格。 外部和內部 HTML 表格單元格繼承了用於對齊父表格行和子表格行屬性的預設值。它也使用 |
以上是垂直表格 HTML的詳細內容。更多資訊請關注PHP中文網其他相關文章！