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

Maison

interface Web

Tutoriel H5

Introduction au style de balise de table html5 (ci-joint un exemple de centrage CSS de table html5)

寻∝梦

Aug 21, 2018 pm 02:19 PM

html5 table

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>

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>

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

Outils d'IA chauds

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

ArtGPT

Stock Market GPT

Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes

Afficher plus

Article chaud

Terminull Brigade: meilleur guide de construction Aurora

3 Il y a quelques semaines By DDD

Quelles sont les conditions d'éligibilité sur les annonces sur le flux Facebook

1 Il y a quelques mois By 下次还敢

Sea of Thieves: Guide complet de la ligue des contrebandiers

3 Il y a quelques semaines By DDD

Comment trouver la boîte de réception du support sur Facebook

1 Il y a quelques mois By 下次还敢

Quelle est l'adresse du contrat WLFI? Quelle est la quantité totale de pièces WLFI?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Tutoriel PHP

1651

276

NYT Connexions Indices et réponses

264

836

Setting up and using Magic Mouse in Windows

Afficher plus

Related knowledge

Qu'est-ce qu'une liste de définition dans HTML5? Aug 20, 2025 pm 02:01 PM

AdefinitionListInHtml5iscreatEdUsingTheElementTogroupterms () avec TheirdFininitions (), permettant à laMultipletermStoshareADEFINITIONNORATATERMTOHAVEMULTIPLEDEFINITIONS, à faire de la manière alternative, à des glossaires, à des métadonnées, et à la contrainte

Comment ajouter un favicon à votre site Web avec HTML5 Aug 27, 2025 am 02:35 AM

Pour ajouter un site Web FAVICON correctement, préparez d'abord un fichier d'icône de format de format de format de format 32 × 32 ou 64 × 64. Par exemple: il est recommandé de prendre en charge plusieurs formats et périphériques en même temps, comme l'ajout de versions PNG différentes, icônes SVG et icônes Apple Touch. Enfin, effacez le cache et testez s'il s'affiche normalement, pour vous assurer que le chemin est correct et que le fichier est accessible. L'ensemble du processus nécessite une attention au format de fichier, au chemin et à la compatibilité pour éviter le chargement de défaillance.

Quel est l'élément de figure et comment est-il utilisé avec FigCaption dans HTML5? Aug 20, 2025 pm 02:06 PM

TheelementInhtml5isUsesedTomarkup-self-contenuContent Like Images, Diagrams, Orcodesnippets que de la manière indépendante de la manière indépendante

Comment créer une case à cocher personnalisée avec HTML5 Aug 16, 2025 am 07:05 AM

Pour créer une case à cocher personnalisée, vous devez d'abord utiliser une structure HTML avec étiquette pour assurer l'accessibilité; 2. Masquer la case à cocher par défaut via CSS mais conserver sa fonctionnalité; 3. Utilisez des pseudo-éléments et des pseudo-classes pour dessiner l'état sélectionné sur les éléments .Checkmark personnalisés; 4. Ajouter des styles de survol, de mise au point et de sélectionner pour améliorer les commentaires interactifs; 5. Gardez les entrées natives présentes pour prendre en charge les lecteurs de navigation par clavier et d'écran et finalement obtenir des cases à cocher personnalisées belles et accessibles.

Comment précharger le contenu avec rel = 'Preload' dans html5? Aug 20, 2025 pm 04:12 PM

rel = "précharge" est utilisé pour charger à l'avance des ressources clés pour améliorer les performances de la page. 1. Utilisez la syntaxe et spécifiez l'attribut AS; 2. Préchargement des ressources clés telles que les polices, les feuilles de style, les scripts, les images, etc., et la police doit être ajoutée à un crossorigin; 3. Il peut être chargé en fonction des conditions en combinaison avec les attributs multimédias; 4. Suivez les meilleures pratiques telles que le chargement uniquement des ressources clés sur le premier écran, en évitant une utilisation excessive et en réglant correctement le type et le crossorigine; 5. Les navigateurs modernes le soutiennent largement et peuvent ajouter ou effectuer dynamiquement le traitement d'amélioration progressif via JavaScript pour s'assurer que la page fonctionne toujours normalement lorsqu'elle n'est pas prise en charge.

Comment intégrez-vous une carte dans HTML5? Aug 16, 2025 am 06:56 AM

ToembeDamapinhtml5, useaniframefromgooglemapsbygeneratingheedcodeviathegoogleMapsEmbedapiandInSertingIntoyourhtml.2.CustomzetheframeByAdjustingWidth, Height, Style, andaddingAtRibeTeLireSpinSp

Quel est le but de l'attribut d'attribut en place dans HTML5? Aug 31, 2025 am 06:58 AM

Theplaceholderattributeprovidesashorthintininputfieldsthatdisappearswhentypingbegins;1.Itisusedinandelementstoshowexampletextlike"Enteryouremail";2.Thehintisdisplayedonlywhenthefieldisemptyandstyledfaintlybybrowsers;3.Itdoesnotreplacetheele

Qu'est-ce que le protocole forestier (monnaie forestière)? Et ça? Modèle économique de jeton forestier et analyse des perspectives du marché Sep 05, 2025 am 09:09 AM

Catalogue ForestProtocol's Birth Fteals The Innovative Technology Architecture of Interactive Tokens (Playingable Tokens) Campaignos: transformez les jetons en "produits jouables" et AMM: pas de courbes, pas de migration, de roues à volants et de frais: convertir l'utilisation et les revenus en rachat et détruire le rôle de Campaigno Feuille de route: du modèle

See all articles