Introduction au style de balise de table html5 (ci-joint un exemple de centrage CSS de table html5)-Tutoriel H5-php.cn

Introduction au style de la balise table html (un exemple de centrage css de table html5 est joint). Cet article vous explique principalement la définition de la balise table html5 et l'introduction des différents styles.

Définition et utilisation de la balise HTML 5

À l'intérieur de la balise

, vous pouvez placer des titres de tableau, des lignes de tableau, des colonnes de tableau, des cellules de tableau et d'autres tableaux.

Attributs standard de la balise de table html :

class, contenteditable, contextmenu, dir, draggable, id, non pertinent,

lang, ref, Registrationmark , tabindex, template, title

exemple de style de tableau HTML introduction :

<table border="1">
    <tr>
            <td width="95" align="right" valign="top" nowrap="nowrap"><strong>处理意见：</strong></td>    
            <td id="fnote"  width="300px" colspan="8"> </td>                     
    </tr>
    <tr>
            <td><a href="#" onclick="showad()">审批记录</a></td>
    </tr>                
</table>

Copier après la connexion

largeur : largeur de colonne

aligner : niveau de contenu de la cellule Disposition : centre droit gauche

valign : disposition verticale du contenu de la cellule : ligne de base supérieure, inférieure et médiane

colspan : nombre de colonnes qu'une cellule peut s'étendre

rowspan : nombre de cellules qui can be spanned

rowspan=3 tr

nowrap : Spécifie si le contenu de la cellule doit être enveloppé

Table -attributs de style spécifiques :

1. Fusion de bordure

attribut : border-collapse

Valeur :

1. . séparé

valeur par défaut, mode bordure séparée

2. effondrement

mode de fusion de bordure

2. >1. Fonction

Définir la distance entre les bordures des cellules adjacentes (similaire à l'espacement des cellules)

2 Attributs

border-spacing

Valeur. :

1. Prendre 1 valeur

pour indiquer un espacement horizontal et vertical égal

2. Prendre 2 valeurs

L'espacement horizontal représenté par le première valeur

L'espacement vertical représenté par la deuxième valeur

Les deux valeurs sont séparées par des espaces

3 Exigences

border-collapse doit être séparé

doit être valide en mode bordure séparée

3. Position du titre

< 🎜>Fonction : Changer la position du titre de la position par défaut en dessous du tableau

Attribut : caption-side

Valeur :

1 , top

par défaut

2. bottom

Le titre est sous le tableau

Utilisez div pour centrer le tableau en css :

I J'ai vu qu'en utilisant display: table-cell peut restituer un div dans une cellule, et le contenu du tableau td est centré, j'ai donc pensé à un div qui contient un div, et le div à l'intérieur est centré verticalement, je suppose que vous pouvez l'utiliser. : Définissez display:table-cell sur le div externe, puis le div à l'intérieur sera automatiquement centré verticalement

Ce n'est qu'après les tests que j'ai trouvé que le div à l'intérieur n'était pas centré, puis utilisez vertical -align Centré, car :

Seulement si un élément appartient au niveau inline ou inline-block (table-cell peut également être compris comme niveau inline-block), l'attribut vertical-align sur celui-ci fonctionnera.

Par exemple, les contrôles HTML tels que les images, les boutons, les cases à cocher simples, les zones de texte sur une seule ligne/multilignes, etc. Seuls ces éléments prendront effet par défaut sur l'attribut d'alignement vertical.

Vous pouvez désormais utiliser vertical-align:middle dans table-cell pour centrer le contenu verticalement. Et si je souhaite obtenir un centrage horizontal ? text-algin : center, adapté aux éléments en ligne, il me suffit alors de définir le div à l'intérieur sur line-block

Vérification du code :

[Recommandations associées]

<style>
        .table {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .like {
            display: inline-block;
            width:100px;
            height:50px;
            border:2px solid black;
        }
    </style>
<div class="table" style="width:300px;height: 300px;background-color: #13c4a5">
    <div class="like">
    </div>
</div>

Copier après la connexion

Que signifie la balise html strong ? Introduction à l'usage spécifique de la balise strong en html

Comment utiliser la balise audio html5 ? Exemple de code d'implémentation de la lecture automatique HTML5

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：

html5 table

source：php.cn

Article précédent：HTML5 implémente la fonction d'enregistrement lorsque le téléphone mobile est touché et quitté pour arrêter l'enregistrement et le téléchargement (code) Article suivant：Que signifie la balise de sortie html5 ? Comment utiliser la balise de sortie HTML5

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