垂直表格 HTML-html教學-PHP中文網

首頁

web前端

html教學

垂直表格 HTML

王林

Sep 04, 2024 pm 04:45 PM

htmlhtml5HTML TutorialHTML PropertiesHTML tags

以下文章提供了 Vertical Table HTML 的概述。在 HTML 表中，每個新記錄都會作為行和列插入到資料庫中。在資料庫中，行被視為水平，列被視為垂直。 HTML 表格實際上用於呈現 Bootstrap 等框架的資訊；我們能夠輕鬆地增強桌子的外觀和感覺。表格用於大多數應用程序，例如網頁、桌面或行動應用程式；對於向最終用戶提供資訊也很重要。使用引導框架和許多其他功能來為表格等不同元素提供樣式設定和最佳化演示的功能。

如何在 HTML 中建立垂直表格？

一般來說，我們在

、、中指定第行在外部 HTML 表中使用 valign 屬性的預設值。標籤，甚至有時也不使用正文標籤，並且該時間值位於中間，因此如果外部 HTML 表格的單元格內被阻止的內容將自動在網頁瀏覽器區域中垂直居中對齊。

使用 HTML 表格單元格的內容使其內部的內容塊在Web 瀏覽器區域中水平居中，內部表格是另一種HTML 表格單元格，它構成給定大小的框，正如我們在前面的範例圖像中提到的那樣在限制範圍內顯示，某些瀏覽器將不接受頁面本身的圖像方向。

如果我們使用 HTML 的內部表格，它就是外部 HTML 表格單元格內部的表格。它可能不會設定表格的高度和寬度。然後，無論我們設定什麼尺寸，大小都會自動調整以適應內容。如果寬度和高度較大，則網頁瀏覽器區域將自動在中心查看。

在上面的範例中，有時它會突出顯示標籤這樣就不會在 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

輸出：

垂直表格 HTML

在上面的例子中，我們看到兩個標題顯示在垂直方向；它們以列格式顯示。它是 HTML 表格中垂直資料顯示的基本範例之一。

範例#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

輸出：

垂直表格 HTML

在上面的範例中，我們將使用捲動選項。預設情況下，為表格資料啟用垂直捲動選項。如果需要，我們還啟用了水平滾動選項。

範例#3

代碼：

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

輸出：

垂直表格 HTML

在上面的範例中，我們使用背景顏色樣式突出顯示了列。我們還使用前景色來突出顯示需要的部分。

不同部分的表格

我們也在 HTML 表格中使用了一組不同的表格格式。在上面的例子中，我們使用了垂直表格對齊的基礎知識；我們有一組不同的格式來突出顯示表格：

邊框和規則：使用邊框，它將突出顯示桌子周圍的框架。

IT
Name	Age	Number
Sivaraman	30	8220244056
Raman	31	123456789

垂直表格 HTML

我們已經看到了上面例子的邊界；這是一個有規則的邊界；我們也使用一些其他邊框，例如虛線等

如何在 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>

輸出：

垂直表格 HTML