Je veux montrer deux lignes TDComment faire 2 lignes <TD>
<td bgcolor="White" >
First Name
(on external website)
</td>
Et il apparaît, à côté de l'autre. Je veux être comme ci-dessous. La première ligne en gras et la deuxième ligne seront en minuscules.
Vous pouvez ajouter un <br/> pour forcer un saut de ligne et de définir des classes CSS pour le style de la police:
<style>
.name { font-weight: bold; }
.subtext { font-size: smaller; }
</style>
<td bgcolor="White" >
<span class="name">First Name</span> <br/>
<span class="subtext">(on external website)</span>
</td>
Mise à jour: Pour être complet, je J'ai aussi inclus ce que d'autres ont suggéré: au lieu d'utiliser un élément <br/>, contrôlez le saut de ligne via CSS. Ceci a l'avantage, que vous pouvez modifier le comportement (supprimer la ligne-break) en modifiant simplement le CSS:
<style>
.name { font-weight: bold; display:block; }
.subtext { font-size: smaller; }
</style>
<td bgcolor="White" >
<span class="name">First Name</span>
<span class="subtext">(on external website)</span>
</td>
Au lieu d'utiliser span éléments, vous pouvez également utiliser div s, qui ont la coupure de ligne par défaut (mais il peut être désactivé en définissant display:inline dans le CSS).
<td bgcolor="White" >
<strong>First Name</strong><br />
<small>(on external website)</small>
</td>
Vous pouvez mettre une balise p pour indiquer une nouvelle ligne comme celle-ci.
<td>
First Name
<p>(on external website)</p>
</td>
Ou utiliser une balise br comme ceci:
<td>
First Name <br />
(on external website)
</td>
Utilisez <span></span> avec l'attribut bloc ou <p></p>
<td bgcolor="White" >
<span style="font-weight:bold;">First Name</span> <br/>
<span style="font-size:6px;">(on external website)</span>
</td>
comme ça, je suppose
vous pouvez définir l'affichage: bloc; pour les avoir sur des lignes séparées au lieu de
–
KeatsKelleher
Comme vous voulez le style les lignes différemment, vous devez les mettre dans des éléments séparés de toute façon, donc si vous utilisez éléments de bloc, ils finissent comme des lignes distinctes:
<td style="background: white;" >
<div style="font-weight: bold;">First Name</div>
<div style="font-size: 70%;">(on external website)</div>
</td>
+1 Cette disposition permettrait également à la CSS d'essayer de supprimer la séparation de ligne, si on le souhaite. Toute solution avec "
" empêche CSS de faire la modification. –
La solution la plus simple est d'ajouter un <br /> comme @ M4N écrit dans sa réponse. Mais comme il semble que ce "prénom" est une sorte de titre, je recommande d'utiliser la balise HTML appropriée. Utilisez également le style CSS pour votre table:
HTML:
<td class="white">
<h3>First Name</h3>
<span class="small">(on external website)</span>
</td>
CSS:
.white {
background-color: white;
}
.small {
font-size: .8em;
}
Note: Parce que <h3> est un élément de niveau bloc, le saut de ligne est "insérée" automatiquement
Si vous vous souciez des futurs changements de style avec CSS, évitez la balise "
" et utilisez CSS comme ceci: ** span.name {display: block; } ** –