Encadrer du texte avec border

SPAN et PADDING

Quelque soit le conteneur du texte à entourer ou à encadrer, utiliser la propriété PADDING est nécessaire pour que le texte ne colle pas à la bordure.

Avec de simples balises SPAN, accompagnées des attributs BACKGROUND et PADDING, nous pouvons déjà entourer du texte avec de la couleur:

<span style="background:#fafafa;padding:2px">texte</span>

SPAN, PADDING et BORDER

Pour encadrer des morceaux de texte, utiliser les balises SPAN pour isoler ces morceaux, attribuer un PADDING pour que le texte ne colle pas à la bordure, puis avec la propriété BORDER, configurer la bordure.

La propriété BORDER

Il faut définir une épaisseur, une couleur et un style de bordure pour BORDER.

Avec les balises SPAN, avec les attributs PADDING et BORDER, nous pouvons encadrer du texte :

<span style="border:1px orange solid; padding:2px">texte</span>

SPAN étant un élément de type inline, il doit être contenu entre les balises d' un élément block comme les balises P ou DIV par exemple, pour éviter les sauts de ligne.....
Sinon ajouter l' attribut display:inline-block.

Entourer un paragraphe

Encadrer un paragraphe ou une DIV est d' une grande simplicité. Le PADDING est ici de 2em. Les coins sont arrondis par un border-radius de 10px. La bordure a une épaisseur de 5px. La couleur est orange. Le style est solid.

Div centrée dans une DIV

En HTML5, un bloc DIV peut contenir un ou plusieurs autres blocs DIV. Évidemment, cette facilité à avoir des coins arrondis et des fonds colorés, nous démontrent l' importance du style CSS

DIV-1
DIV-2
DIV-3 bien centrée
 <div style="width:200px;height:100px;border:1px solid red">div1
<div style="width:100px;height:50px;border:1px solid blue">div2
</div></div>

 

border-bottom, border-top, border-left, border-right

n' encadrent pas car ils ne sont juste qu' un coté d' un cadre.

border-bottom souligne (ici juste un bloc SPAN). Une petite épaisseur en pixel suffit.

CSS
.bottom-line {
border-bottom:1px red solid}
HTML
<span class="bottom-line">border-bottom souligne</span>

border-top: surligne, border-left: bordure à gauche, border-right: bordure à droite.

Les tableaux

Les tableaux sont composés de cellules qui contiennent souvent du texte.

Pour encadrer un texte
en HTML4 pur code
il suffisait de faire un tableau
avec une seule cellule
HTML:
<table border ="1" cellspacing="1" cellpadding="1"><tr><td> <div align=center>Pour encadrer du texte
en HTML4 pur code
il suffisait de faire un tableau
avec une seule cellule</div></td><tr></table>

Mais comme vous le constaterez, cela ne suffit plus, on ne voit pas le cadre.

Le style CSS est devenu incontournable avec HTML5. TABLE ne crée pas de bordure, c' est BORDER qui ajoute une bordure à TABLE. Mais ce n' est pas pratique pour entourer juste un petit morceau de texte car TABLE crée un saut de ligne. La solution est d' ajouter un "display:inline". Mais quand le texte est un peu trop long, cela disfonctionne quand arrivez dans des petites résolutions.

Pour encadrer un morceau de texte en HTML5
il ne suffit pas de faire un tableau avec une seule cellule. Il faut
ajouter du style à TABLE

Les tableaux avec plusieurs cellules

Passent mal sur les petits écrans. Les formulaires n' utilisent plus de tableaux (pas pratiques sur un smartphone).
Il est cependant possible de rendre un tableau responsive en utilisant des CSS Media Queries et jouer avec les "display:" selon la configuration de votre tableau.

Exemple pour cette page:Linux Systemsound

@media (max-width: 825px) { table, span { display: block; } tr { display: table; } td { display: table-row; }

Propriété border-collapse

border-collapse: collapse colle les bordures de cellules entre-elles,
border-collapse: separate sépare les bordures de cellules, associée à...
La propriété border-spacing qui configure la séparation entre les bordures des cellules.

On peut ajouter très peu de style CSS à TR (stripped rows et hover color). TR sert surtout à créer une nouvelle rangée.
TABLE, TH et TD sont des conteneurs de texte et acceptent autant de style CSS que DIV, P ou SPAN.

Couleur Nom Hexadecimal RGB
    red #FF0000 rgb (255, 0, 0)
    green #008000 rgb (0, 255, 0)
    blue #0000FF rgb (0, 0, 255)
CSS:
table.color {
width:100%;border-collapse: separate;border-spacing:5px;}
td.color, th.color {
border:1px #ccc solid;text-align:center;padding:3px;
}
th.color {
background:#000092;color:#fff;
}

Les plus téléchargés

Les DEBs XnViewMP-linux et les MSI IsoRecorder et Gpick sont actuellement les logiciels les plus demandés sur wubijacq.com