communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > Tutoriel d'amorçage > Challenge Comment créer un tableau sans utiliser la balise ?

Challenge Comment créer un tableau sans utiliser la balise

藏色散人

Libérer： 2021-08-20 10:53:15

original

3337 Les gens l'ont consulté

Dans l'article précédent "Comment utiliser les Trois Mousquetaires frontaux pour créer un bel effet de compte à rebours", je vous ai présenté comment implémenter l'effet de compte à rebours avec HTML, CSS et Javascript. Les amis dans le besoin peuvent en apprendre davantage ~.

Le contenu clé de cet article est de vous apprendre à créer un tableau sans utiliser la balise

Tout d'abord, tout le monde doit savoir que HTML est le langage de balisage standard utilisé pour créer des pages Web. HTML permet l'utilisation de balises

, vous pouvez également créer des tableaux en HTML sans utiliser de balises. Créez un tableau !

Parce qu'il existe différents frameworks CSS disponibles, tels que BootStrap, Foundation, Pure, Bulma, UI kit, Materialise CSS, Semantic UI, Spectre, etc.

Parmi eux, Bootstrap est un framework CSS très utilisé. Le système de grille de Bootstrap intègre une flexbox, qui est un modèle de disposition unidimensionnel qui fournit une distribution spatiale et de puissantes fonctions d'alignement entre les éléments de l'interface.

Créons un tableau en utilisant le framework BootStrap de CSS

Le code est le suivant :

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

Copier après la connexion

L'effet est le suivant :

Challenge Comment créer un tableau sans utiliser la balise <table> ?

Remarque :

Bootstrap CDN est un réseau public de diffusion de contenu qui permet aux utilisateurs de télécharger du contenu à partir du serveur qui charge CSS, JavaScript et des images à distance. BootStrap CDN renvoie au code pour accéder aux classes de bibliothèque CSS intégrées.

Les conteneurs sont utilisés pour centrer et remplir le contenu réel horizontalement.

Les lignes encapsulent les colonnes.

Colonnes Les colonnes sont des enfants directs des lignes. Le contenu doit être placé en colonnes. Les colonnes sans largeur spécifiée sont automatiquement affichées sous forme de colonnes de même largeur. Nous pouvons spécifier explicitement les largeurs de colonnes ou attribuer différentes largeurs à différentes tailles d'écran. Nous pouvons spécifier les couleurs d'arrière-plan pour différentes lignes ou colonnes à l'aide de classes utilitaires prédéfinies (telles que bg-success, bg-info, bg-danger, bg-warning), de feuilles de style ou de styles en ligne.

Border est une classe prédéfinie dans BootStrap qui est utilisée pour créer des bordures autour des cellules. De plus, il existe plusieurs classes d'utilitaires de bordure (telles que border-dark, border-light, border-danger, border-success, border-warning) qui peuvent améliorer encore l'apparence en donnant de la couleur ou de la largeur de bordure.

Tutoriels recommandés : "Tutoriel de base Javascript" "Tutoriel bootstrap" "Tutoriel vidéo HTML"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

表

source：php.cn

Article précédent：10 modèles de système de gestion d'arrière-plan Bootstrap magnifiques et pratiques (venez télécharger maintenant) Article suivant：8 modèles de sites Web d'entreprise Bootstrap (téléchargement gratuit du code source)

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur