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
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
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!
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
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
interface Web
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
