資料結構
網路
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+ 瀏覽量
廣告