Comment obtenir les mêmes effets visuels que « cellpadding », « cellspacing », « valign » et « align » dans les tableaux HTML5 ?

Comment remplacer cellpadding, cellpacing, valign et align dans les tableaux HTML5

En HTML5, les attributs cellpadding, cellpacing, valign et align sont obsolètes et ne sont plus valides. Cependant, vous pouvez toujours obtenir les mêmes effets visuels en utilisant CSS.

Remplacement de cellpadding

Utilisez la propriété padding pour ajouter de l'espace dans les cellules du tableau :

<code class="css">th, td {
  padding: 5px;  /* Equivalent to cellpadding="5" */
}</code>

Remplacement de l'espacement des cellules

Utilisez la propriété border-collapse pour contrôler l'espacement entre les cellules du tableau :

<code class="css">table {
  border-collapse: separate;
  border-spacing: 5px;  /* Equivalent to cellspacing="5" */
}</code>

Vous pouvez également utiliser border-spacing : 0 pour éliminer l'espacement entre les cellules :

<code class="css">table {
  border-collapse: collapse;
  border-spacing: 0;  /* Equivalent to cellspacing="0" */
}</code>

Remplacer valign

Utilisez la propriété vertical-align pour aligner verticalement le contenu des cellules du tableau :

<code class="css">th, td {
  vertical-align: top;  /* Equivalent to valign="top" */
}</code>

Remplacement de align (center)

Utilisez la propriété margin pour centrer le tableau sur la page :

<code class="css">table {
  margin: 0 auto;  /* Equivalent to align="center" */
}</code>

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!