垂直表格 HTML

以下文章提供了垂直表格 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 表格中垂直数据显示的基本示例之一。

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

输出：

上面的例子显示图像处于垂直模式；如果需要，我们还会改变方向。与水平模式相比，使用垂直模式会减少空间，并且页面的其他内容都显示在单个页面本身中。外部 HTML 表格使 Web 浏览器区域（除了边框）成为一个 Html 表格，整个区域将是 HTML 表格单元格。

外部和内部 HTML 表格单元格继承了用于对齐父表格行和子表格行属性的默认值。它还使用

以上是垂直表格 HTML的详细内容。更多信息请关注PHP中文网其他相关文章！