数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚学
法律学如何不使用<table>标签创建表格？
网站的数据表示是一个重要的组成部分。如果您拥有或管理大量数据，但不知道如何正确地展示它，用户将无法理解它，它也就没有任何用处。表格表示通常是数据表示的一种重要方式，尤其是在涉及统计信息时。在网页设计中，通常使用<table>和</table>标签来构建表格。创建表格是一项有点困难的任务，尤其是在响应式设计成为考虑因素时。
让我们深入本文，了解有关如何在不使用<table>标签的情况下创建表格的更多信息。这可以通过使用 HTML <div>标签和一些 CSS 样式来实现，并且无需安装任何插件或其他框架。让我们逐一看看。
HTML <div>标签
分隔符标签也称为<div>标签。在 HTML 中，<div>标签用于为内容创建部分，例如文本、图形、标题、页脚和导航栏。它有一个开始(<div>)和结束(</div>)标签。此元素是 Web 开发中最常用的标签，因为它允许我们在网页上划分数据并为不同类型的数据或功能创建特定部分。
语法
以下是 HTML <div>标签的语法。
<div> ……… </div>
让我们跳入示例，以便更好地理解如何在不使用<table>标签的情况下创建表格。
示例
以下是一个示例，我们将使用 HTML <div>标签并应用 CSS 来创建表格。
<!DOCTYPE html>
<html>
<head>
<style>
.table {
display: table;
width: auto;
border: 3px solid #ABEBC6;
}
.table-row {
display: table-row;
width: auto;
}
.table-col {
float: left;
display: table-column;
width: 150px;
border: 2px solid #BB8FCE;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row">
<div class="table-col">Animal</div>
<div class="table-col">Food</div>
</div>
<div class="table-row">
<div class="table-col">Lion</div>
<div class="table-col">Meat</div>
</div>
</div>
</body>
</html>
当以上代码执行时，它将生成一个包含创建的表格的输出，该表格包含应用了 CSS 的数据并显示在网页上。
示例
在以下示例中，我们将使用 flexbox 容器使网格能够灵活地调整其内容量。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #D6EAF8;
}
#container {
width: 400px;
}
.box {
display: flex;
}
.box-cell {
flex: 1 1 auto;
border: 2px solid #BB8FCE;
}
</style>
</head>
<body>
<div id='container'>
<div class="box">
<div class="box-cell">Mahendra Singh Dhoni, commonly known as MS Dhoni, is a former Indian cricketer and captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014, who plays as a Wicket-keeper-Batsman.</div>
<div class="box-cell">Piece of information.</div>
<div class="box-cell">Animal</div>
</div>
<div class="box">
<div class="box-cell">FISH</div>
<div class="box-cell">CAT</div>
<div class="box-cell">MONKEY</div>
</div>
</div>
</body>
</html>
运行以上代码后，输出窗口将弹出，显示应用了 CSS 的表格，该表格是灵活的，并使表格内的数据根据其内容量进行调整。
示例
考虑另一种情况，我们将创建一个不使用<table>标签的表格。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
height: 25px;
}
.tutorial1 {
flex: 1 1 auto;
background: #DFFF00;
}
.tutorial2 {
width: 150px;
background: #DE3163;
}
.tutorial3 {
width: 120px;
background: #40E0D0;
}
</style>
</head>
<body>
<div class="container">
<div class="tutorial1"></div>
<div class="tutorial2"></div>
<div class="tutorial3"></div>
</div>
</body>
</html>
当我们执行以上程序时，输出窗口将弹出，在网页上显示 CSS 表格。
更新于：2023年9月26日
1K+ 浏览量
广告