垂直表格 HTML
- 王林原创
- 2024-09-04 16:45:201038浏览
以下文章提供了垂直表格 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中文网其他相关文章！