Maison > Article > interface Web > Comment définir le centre du tableau HTML

Comment définir le centre du tableau HTML

PHPzoriginal: 2023-04-25 10:28:4710756parcourir

HTML est un langage de balisage hypertexte largement utilisé pour créer des pages Web. Dans la conception Web, les tableaux sont un élément très utile pour afficher les données. Lors de la conception de tableaux, il est courant de les centrer. Voici comment centrer un tableau en HTML.

1. Utiliser la feuille de style CSS

Après avoir créé le tableau en HTML, vous pouvez facilement centrer le tableau à l'aide de la feuille de style CSS. Dans une feuille de style, vous pouvez utiliser l'attribut "margin: auto" pour centrer le tableau.

Par exemple, le code suivant définit le tableau sur une largeur de 80 % et le centre sur la page.

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 80%;
            margin: auto;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>001</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>002</td>
            <td>95</td>
        </tr>
    </table>
</body>
</html>

Dans le code ci-dessus, nous créons un tableau et définissons sa largeur à 80%. Ensuite, utilisez l'attribut "margin: auto" pour centrer le tableau.

2. Utiliser les attributs HTML

En plus d'utiliser des feuilles de style CSS, vous pouvez également définir des attributs directement dans l'élément de tableau HTML pour centrer le tableau. Vous trouverez ci-dessous un exemple de code expliquant comment centrer un tableau en HTML.

<!DOCTYPE html>
<html>
<head>
    <title>HTML表格居中</title>
</head>
<body>
    <center>
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>成绩</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>001</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>002</td>
                <td>95</td>
            </tr>
        </table>
    </center>
</body>
</html>

Dans le code ci-dessus, nous avons utilisé la balise HTML

à l'extérieur du tableau pour centrer le tableau. Cette méthode est simple et intuitive, adaptée à la conception de petits sites Web.

Résumé

Les tableaux en HTML sont un élément de conception Web courant, et les tableaux centrés sont une exigence de conception courante. Pour centrer un tableau, vous pouvez utiliser des feuilles de style CSS ou des propriétés HTML. L'utilisation de feuilles de style CSS nécessite certaines compétences de base, mais entraîne également une meilleure évolutivité et constitue une bonne pratique de longue date. L'utilisation d'attributs HTML pour centrer le tableau est plus simple, mais peut poser des problèmes pour les conceptions Web complexes. Par conséquent, lors de la conception d’une page Web, il faut réfléchir à la méthode à utiliser.

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!

css html auto 样式表 margin

Déclaration：

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

Article précédent：Comment implémenter le modèle de méthode modèle à l'aide de JavaScriptArticle suivant：Comment implémenter le modèle de méthode modèle à l'aide de JavaScript

Articles Liés

Voir plus