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

示例表格

首頁

web前端

Bootstrap教程

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

藏色散人

Aug 20, 2021 am 10:52 AM

表

在上一篇《如何用前端三劍客創建漂亮的倒數計時效果》中給大家介紹瞭如何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 id="示例表格">示例表格</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中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7848

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1241

Related knowledge

bootstrap搜索欄怎麼獲取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

Bootstrap圖片居中需要用到flexbox嗎 Apr 07, 2025 am 09:06 AM

Bootstrap 圖片居中方法多樣，不一定要用 Flexbox。如果僅需水平居中，text-center 類即可；若需垂直或多元素居中，Flexbox 或 Grid 更合適。 Flexbox 兼容性較差且可能增加複雜度，Grid 則更強大且學習成本較高。選擇方法時應權衡利弊，並根據需求和偏好選擇最適合的方法。

bootstrap垂直居中怎麼弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 實現垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 類，將元素置於 flexbox 容器內。 align-items-center 類法：對於不支持 flexbox 的瀏覽器，使用 align-items-center 類，前提是父元素具有已定義的高度。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。