Cabaran Bagaimana untuk mencipta jadual tanpa menggunakan tag <table>?-Tutorial Bootstrap-php.cn

masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > Tutorial Bootstrap > teks badan

Cabaran Bagaimana untuk mencipta jadual tanpa menggunakan tag ?

藏色散人

Lepaskan： 2021-08-20 10:53:15

asal

3280 orang telah melayarinya

Dalam artikel sebelumnya "Cara menggunakan Three Musketeers bahagian hadapan untuk mencipta kesan undur yang cantik", saya memperkenalkan anda cara mencapai kesan undur dengan HTML, css dan javascript dalam need can learn about it~

Fokus artikel ini adalah untuk mengajar anda cara membuat jadual tanpa menggunakan tag

Pertama sekali, semua orang harus tahu bahawa HTML ialah bahasa penanda standard yang digunakan untuk membuat halaman web HTML membolehkan penggunaan tag

untuk membuat jadual; Helaian (CSS), tidak mungkin untuk membuat jadual tanpa menggunakan tag Jadual boleh dibuat dalam HTML!

Kerana terdapat pelbagai rangka kerja CSS yang tersedia seperti BootStrap, Foundation, Pure, Bulma, UI kit, Materialize CSS, Semantic UI, Spectre dan banyak lagi.

Antaranya, Bootstrap ialah rangka kerja CSS yang digunakan secara meluas. Sistem grid Bootstrap mempunyai flexbox terbina dalam, yang merupakan model susun atur satu dimensi yang menyediakan pengedaran spatial dan fungsi penjajaran yang berkuasa antara item dalam antara muka.

Yang berikut mencipta jadual dengan menggunakan rangka kerja BootStrap CSS

Kodnya adalah seperti berikut:

<!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>

Salin selepas log masuk

Kesannya adalah seperti berikut :

Cabaran Bagaimana untuk mencipta jadual tanpa menggunakan tag <table>?

Nota:

Bootstrap CDN ialah rangkaian penghantaran kandungan awam yang membolehkan pengguna memuatkan CSS, JavaScript dan imej dari jauh dari pelayannya. CDN BootStrap memaut ke kod untuk mengakses kelas perpustakaan CSS terbina dalam.

Bekas digunakan untuk memusatkan dan mengisi kandungan sebenar secara mendatar.

Baris merangkumi lajur.

Lajur Lajur ialah anak baris langsung. Kandungan mesti diletakkan dalam lajur. Lajur tanpa lebar yang ditentukan secara automatik dipaparkan sebagai lajur yang sama lebar. Kami boleh menentukan lebar lajur secara eksplisit atau menetapkan lebar yang berbeza kepada saiz skrin yang berbeza. Kami boleh menentukan warna latar belakang untuk baris atau lajur yang berbeza menggunakan kelas utiliti yang dipratentukan (seperti bg-success, bg-info, bg-bahaya, bg-warning), helaian gaya atau gaya sebaris.

Border ialah kelas yang dipratentukan dalam BootStrap yang digunakan untuk mencipta sempadan di sekeliling sel. Selain itu, terdapat beberapa kelas utiliti sempadan (seperti gelap sempadan, terang sempadan, bahaya sempadan, kejayaan sempadan, amaran sempadan) yang boleh meningkatkan lagi rupa dan rasa dengan memberikan warna atau lebar sempadan.

Tutorial berkaitan yang disyorkan: "Tutorial Asas JavaScript" "Tutorial bootstrap" "Tutorial Video HTML"

Atas ialah kandungan terperinci Cabaran Bagaimana untuk mencipta jadual tanpa menggunakan tag

?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

表

sumber：php.cn

Artikel sebelumnya：10 templat sistem pengurusan latar belakang Bootstrap yang cantik dan praktikal (datang dan muat turun sekarang) Artikel seterusnya：8 templat tapak web korporat Bootstrap (muat turun percuma kod sumber)

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang