Challenge How to create a table without using <table> tag?-Bootstrap Tutorial-php.cn

Community Learn Tools Library Leisure

English

Home > Web Front-end > Bootstrap Tutorial > body text

Challenge How to create a table without using tag?

藏色散人

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

Original

3283 people have browsed it

In the previous article "How to use the front-end Three Musketeers to create a beautiful countdown effect", I introduced to you how to achieve the countdown effect with HTML, css, and javascript. Friends in need can learn about it~

The focus of this article is to teach you how to create a table without using the

tag!

First of all, everyone should know that HTML is a standard markup language used to create web pages. HTML allows the use of

tags to create tables; but in fact, with the help of Cascading Style Sheets (CSS), it is not possible to use tags. Tables can be created in HTML!

Because there are various CSS frameworks available, such as BootStrap, Foundation, Pure, Bulma, UI kit, Materialize CSS, Semantic UI, Specter, etc.

Bootstrap is a very widely used CSS framework. Bootstrap's grid system has a built-in flexbox, which is a one-dimensional layout model that provides spatial distribution and powerful alignment functions between items in the interface.

The following is to create a table by using the BootStrap framework of CSS

The code is as follows:

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

Copy after login

The effect is as follows:

Challenge How to create a table without using <table> tag?

Note:

Bootstrap CDN is a public content delivery network that enables users to load CSS, JavaScript, and images remotely from its servers. BootStrap CDN links to code to access built-in CSS library classes.

Containers Containers are used to center and fill the actual content horizontally.

Rows rows encapsulate columns.

Columns Columns are direct children of rows. Content must be placed in columns. Columns with no specified width are automatically displayed as equal-width columns. We can specify column widths explicitly or assign different widths to different screen sizes. We can specify background colors for different rows or columns using predefined utility classes (such as bg-success, bg-info, bg-danger, bg-warning), stylesheets or inline styles.

Border is a predefined class in BootStrap that is used to create borders around cells. Additionally, there are several border utility classes (such as border-dark, border-light, border-danger, border-success, border-warning) that can further enhance the look and feel by giving color or border width.

Related tutorial recommendations: "javascript basic tutorial" "bootstrap tutorial" "HTML video tutorial"

The above is the detailed content of Challenge How to create a table without using

tag?. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

surface

source：php.cn

Previous article：10 beautiful and practical Bootstrap background management system templates (come and download now) Next article：8 Bootstrap corporate website templates (source code free download)

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn