挑戰怎麼在不使用<table>標籤的情況下建立表格？-Bootstrap教程-PHP中文網

社群學習工具庫休閒

繁体中文

首頁 > web前端 > Bootstrap教程 > 主體

挑戰怎麼在不使用標籤的情況下建立表格？

藏色散人

發布： 2021-08-20 10:53:15

原創

3273 人瀏覽過

在上一篇《如何用前端三劍客創建漂亮的倒數計時效果》中給大家介紹瞭如何HTML、css、javascript實現倒數計時效果，有需要的朋友可以學習了解一下~

本文的重點內容則是教大家怎麼在不使用

標籤的情況下建立表格！

首先大家應該都知道HTML是用來建立網頁的標準標記語言，HTML允許使用

標記建立表；但其實在層疊樣式表(CSS)的幫助下，不使用標籤也可以在HTML中建立表格！

因為有各種可用的 CSS 框架，例如 BootStrap、Foundation、Pure、Bulma、UI kit、Materialize CSS、Semantic UI、Spectre 等等。

其中Bootstrap則是使用非常廣泛的 CSS 框架。 Bootstrap的網格系統有一個內建的flexbox，是一個一維佈局模型，在介面中提供了項目之間的空間分佈和強大的對齊功能。

下面就透過使用CSS 的BootStrap 框架來建立表格

#程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创建表</title>

    <!--Linking the BootStrap CDN-->
    <link rel="stylesheet" href=
            "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity=
                  "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
          crossorigin="anonymous">

    <style type="text/css">
        div {
            text-align: center;
        }

        #heading {
            font-weight: 700;
        }
    </style>
</head>

<body>
<div class="container">
    <h1 class="text-center display-4">示例表格</h1>

    <div class="row border border-dark bg-success" id="heading">
        <div class="col-3 border border-dark">Id</div>
        <div class="col-3 border border-dark">姓名</div>
        <div class="col-3 border border-dark">性别</div>
        <div class="col-3 border border-dark">工资</div>
    </div>

    <div class="row border border-dark">
        <div class="col border border-dark">101</div>
        <div class="col border border-dark">张三</div>
        <div class="col border border-dark">男</div>
        <div class="col border border-dark">50000</div>
    </div>

    <div class="row border border-dark bg-info">
        <div class="col border border-dark">102</div>
        <div class="col border border-dark">李四</div>
        <div class="col border border-dark">女</div>
        <div class="col border border-dark">30000</div>
    </div>

    <div class="row border border-dark">
        <div class="col border border-dark">103</div>
        <div class="col border border-dark">王二</div>
        <div class="col border border-dark">男</div>
        <div class="col border border-dark">40000</div>
    </div>

    <div class="row border border-dark bg-info">
        <div class="col border border-dark">104</div>
        <div class="col border border-dark">赵五</div>
        <div class="col border border-dark">女</div>
        <div class="col border border-dark">45000</div>
    </div>
</div>
</body>

</html>

登入後複製

效果如下所示：

挑戰怎麼在不使用<table>標籤的情況下建立表格？

#註解：

Bootstrap CDN是一個公共內容交付網絡，使用戶能夠從其伺服器遠端載入CSS、JavaScript 和映像。 BootStrap CDN 連結到程式碼以存取內建 CSS 庫類別。

Containers容器用於居中和水平填充實際內容。

Rows行封裝了列。

Columns 列是行的直接子項目。內容必須放在列中。沒有指定寬度的列會自動顯示為等寬列。我們可以明確指定列寬，也可以為不同的螢幕尺寸分配不同的寬度。我們可以使用預先定義的實用程式類別（如 bg-success、bg-info、bg-danger、bg-warning）、樣式表或內聯樣式為不同的行或列指定背景顏色。

Border是 BootStrap 中的預定義類，用於在單元格周圍建立邊框。此外，還有幾個邊框實用程式類別（如 border-dark、border-light、border-danger、border-success、border-warning）可透過賦予顏色或邊框寬度來進一步增強外觀和感覺。

相關教學推薦：《javascript基礎教學》《bootstrap教學》《HTML影片教學》

以上是挑戰怎麼在不使用

標籤的情況下建立表格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

表

來源：php.cn

上一篇：10款好看又實用的Bootstrap後台管理系統範本（快來下載）下一篇：8款Bootstrap企業公司網站範本（原始碼免費下載）

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章