Espace de tabulation au lieu de plusieurs espaces insécables ("nbsp")?

959

Est-il possible d'insérer un caractère de tabulation en HTML au lieu d'avoir à taper  quatre fois?

html Roch
la source
21
Je trouve utile d'utiliser <PRE> lorsque j'utilise le temps de tabulation multiple au début de la ligne (par exemple lors de la sortie du code C)
Guy Kovel
Un TABpersonnage ... pour quoi faire?
Michel de Ruiter
vous pouvez définir votre propre balise <tab>, puis utiliser la fonction jQuery on readypour les remplacer ou les remplir avec le nombre souhaité d'espaces équivalents.
Khaled.K
Si vous avez vraiment besoin d'onglets, essayezwhite-space
Buksy
6
FYI - Si un 4x statique &nbsp;(ou un simple &emsp;) ne le coupe pas et que vous voulez qu'il s'aligne sur la prochaine colonne "4 espacés", comme un onglet pourrait le faire, (ce qui signifie parfois que c'est en fait 0 ou 1 ou 2 ou 3 espaces à aligner) .. comme par exemple .. dans, disons, certains éditeurs de texte .. Malheureusement, vous ne pouvez pas en HTML ... sans <table>s ... et aussi, en utilisant une certaine quantité d'espaces pour essayer de le pirater ... nécessitera une police fixe .... Je pense que la plupart des problèmes se situent entre le besoin d'une police fixe et le fait que HTML adore supprimer les espaces blancs.
Pimp Trizkit

Réponses:

583

C'est beaucoup plus propre d'utiliser CSS. Essayez plutôt padding-left:5emou margin-left:5emselon le cas.

Alohci
la source
13
@Alohci IMHO padding with CSS n'est pas très bon car lorsque vous zoomerez le texte dans le navigateur, la taille du texte augmentera mais pas le padding AFAIK.
AlexV
16
@AlexV - Si vous utilisez emcomme dimension, comme je l'ai fait, elle devrait s'étendre avec la taille du texte. Même si vous ne le faites pas, cela dépendra de la nature du mécanisme de zoom utilisé.
Alohci
2
@DavidThielen - HTML 3, dans lequel l'élément TAB est apparu était un non-starter avec les fabricants de navigateur, et l'élément TAB n'a jamais été implémenté. Au lieu de cela, HTML 3.2 a été créé, ce qui était quelque peu plus simple et qui a été implémenté à la place.
Alohci
2
@Eoin - en effet. -À- dire ce que vous voulez vraiment dans ces cas sont la tabulation des arrêts . Mais ce n'était pas ce que le PO demandait. L'OP demandait le remplacement de plusieurs espaces séquentiels insécables, ce qui n'alignerait pas non plus les lignes. CSS a une tab-sizepropriété qui est vraiment ce que vous voulez, mais la prise en charge de son navigateur a été erratique. À défaut, la disposition de la table ou peut-être la flexbox sont vos meilleurs paris.
Alohci
5
cela ne répond pas à la question. la réponse ci-dessous par kristian résout le problème signalé par l'utilisateur
Pranavan Maru
1265

Cela dépend du jeu de caractères que vous souhaitez utiliser.

Il n'y a pas d'entité onglet définie dans la norme ISO-8859-1 HTML - mais il y a deux ou trois caractères blancs autres que &nbsp;tels que &thinsp;, &ensp;et &emsp;.

En ASCII, &#09;est un onglet.

Voici une liste complète des entités HTML et une discussion utile sur les espaces blancs sur Wikipédia .

kristian
la source
2
Quelle est la différence entre &ensp;et &emsp;? J'ai testé, les deux ont exactement le même espace ..!
Shafizadeh
3
La sauce secrète pour faire & # 09; apparaître comme un espace à onglets en HTML est la définition CSS d'espace blanc. <p style = "display: inline-block; white-space: pre-wrap;"> & # 09; ¡Muy bien! La tabulation fonctionne pour moi en espagnol et en anglais </p>. espace blanc: pré; fonctionne également. Vous pouvez également utiliser une balise "tab" <tab /> avec CSS :: before Selector tab :: before {content: "\ 0009";} mais elle n'apparaît pas comme un onglet lors de la mise en surbrillance, de la coupe et du collage .
Jules Bartow
3
@Shafizadeh D'après les spécifications W3 : un espace en est la moitié de la taille en points et un espace en em est égal à la taille en points de la police actuelle. &emsp;est légèrement plus grand. Je peux voir la différence dans Chrome 64 et FireFox 58.
Dmitry
Je cherchais cela lors de la construction d'une grande requête concat () dans MySQL pour une utilisation dans un rapport Crystal. l'ASCII (& # 09;) a parfaitement fait le travail!
Mike D Wakelyn
C'est ce que je cherchais. J'ai espacé certains titres en utilisant l'attribut de justification de la dernière ligne, mais je ne veux pas que certains d'entre eux se séparent. Le & ensp; empêché cela.
Alex Banman
195

& emsp; Est la réponse.

Cependant, ils ne seront pas aussi fonctionnels que vous pourriez vous y attendre si vous avez l'habitude d'utiliser des tabulations horizontales dans les traitements de texte, par exemple Word, Wordperfect, Open Office, Wordworth, etc. Ils sont de largeur fixe et ne peuvent pas être personnalisés.

CSS vous donne un contrôle beaucoup plus grand et fournit une alternative jusqu'à ce que le W3C fournisse une solution officielle.

Exemple:

padding-left:4em

..ou..

margin-left:4em

.. comme approprié

Cela dépend du jeu de caractères que vous souhaitez utiliser.

Vous pouvez configurer des balises de tabulation et les utiliser de la même manière que vous utiliseriez des balises h.

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

... et utilisez-les comme ceci:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>
Développer l'extrait

Exécutez l'extrait ci-dessus pour voir un exemple visuel.

Discussion supplémentaire

Il n'y a pas d'entités de tabulation horizontale définies dans ISO-8859-1 HTML, cependant il y a d'autres caractères d'espace blanc disponibles que l'habituel &nbsp, par exemple; &thinsp;, &ensp;et ce qui précède&emsp; .

Il convient également de mentionner qu'en ASCII et Unicode, il &#09;s'agit d'une tabulation horizontale.

WonderWorker
la source
2
Ce n'est pas valide XHTMLselon le validateur W3
Buksy
Ce n'est qu'à moitié vrai, car & emsp; est une véritable majoration W3C valide. Mais vous faites clairement référence à l'exemple CSS favorable. Dans ce cas, nous utilisons des balises personnalisées, qui sont de nouvelles balises et ne font pas partie de l'ensemble W3C. Le validateur W3C est strict au point de toujours signaler les balises personnalisées comme des erreurs. C'est à vous de décider ce qui est le plus important. Il est temps que nous ayons une implémentation officielle décente des onglets ajoutés à l'ensemble de balisage HTML. J'espère que cela t'aides.
WonderWorker
2
J'ai utilisé cela dans un cas pour les en-têtes Swing JTable avec une valeur de chaîne et un caractère de type flèche HTML, où j'avais besoin de ce caractère comme séparateur. Fonctionne très bien! Merci!
Blake Neal
2
"Curieusement, il n'y a pas d'onglet horizontal en html" Pas si étrange que le formatage s'éloigne constamment du html et du CSS, et un onglet n'est pas un élément visuel seulement un élément de mise en forme, mais une bonne réponse et bien expliqué
MikeT
75

Voici les 3 différentes façons fournies par HTML pour insérer un espace vide

  1. Type &nbsp; pour ajouter un seul espace.
  2. Type &ensp; pour ajouter 2 espaces.
  3. Tapez &emsp;pour ajouter 4 espaces.
sanjeev51
la source
3
Ajoutez- ;y aussi. Comme&nbsp;
Amio.io
2
Cette réponse répond en fait à la question. Il est stupide de voir comment une réponse CSS est marquée comme réponse.
Mani
@Mani La question a été posée en 2009 et la réponse acceptée date de 2009. Cette réponse a été ajoutée en 2018 .. Quand vous regardez les choses de cette façon, ce n'est pas stupide.
ᴛʜᴇᴘᴀᴛᴇʟ
@ ᴛʜᴇᴘᴀᴛᴇʟ Oubliez si cela répond réellement à la question ou non mais que la réponse marquée ne répond pas avec précision est le point que j'essaie de faire valoir.
Mani
Telle est la vraie réponse. Merci!
Ariel Monaco
67

Essayer &emsp;

Elle équivaut à quatre &nbsp;s.

Abhishek Goel
la source
En fait, ce n'est pas la bonne réponse comme w3.org/MarkUp/html3/specialchars.html . indique clairement que cela dépend du type de police utilisé, l'espace em est également égal à la taille en points de la police actuelle et l'espace em équivaut à deux caractères d'espace
le0diaz
52

Il n'y a vraiment aucun moyen facile d'insérer plusieurs espaces à l'intérieur (ou au milieu) d'un paragraphe. Ceux qui suggèrent que vous utilisez CSS manquent de point. Vous n'essayez pas toujours de mettre un paragraphe en retrait d'un côté, mais, en fait, vous essayez de mettre des espaces supplémentaires à un endroit particulier de celui-ci.

En substance, dans ce cas, les espaces deviennent le contenu et non le style. Je ne sais pas pourquoi tant de gens ne voient pas ça. Je suppose que la rigidité avec laquelle ils essaient d'imposer la séparation du style et de la règle de contenu (HTML a été conçu pour faire les deux depuis le début - il n'y a rien de mal à définir occasionnellement le style d'un unique élément utilisant des balises appropriées sans avoir à dépenser beaucoup plus temps sur la création de feuilles de style CSS et il n'y a absolument rien d'illisible quand il est utilisé avec modération. Il y a aussi quelque chose à dire pour pouvoir faire quelque chose rapidement.) se traduit par la façon dont ils ne peuvent considérer que les caractères blancs comme étant utilisés uniquement pour style et indentation.

Et lorsqu'il n'y a pas de moyen gracieux d'insérer des espaces sans avoir à compter sur des balises &emsp;et &nbsp;, je dirais que le code résultant devient beaucoup plus illisible que s'il y avait une balise nommée de manière appropriée qui vous aurait permis d'insérer rapidement un grand nombre d'espaces (ou si, vous savez, les espaces n'ont pas été inutilement consommés en premier lieu).

Comme il est cependant, comme cela a été dit ci-dessus, votre meilleur pari serait d'utiliser &emsp;pour insérer au bon endroit.

GonzoKnight
la source
1
Le HTML n'a pas été conçu dès le départ pour être personnalisé.
Markus Unterwaditzer
Aimez votre point sur le fait que l'indentation n'est pas toujours ce que les gens veulent!
Programmes Redwolf
46

Il vaut mieux utiliser la balise pre . La balise pre définit le texte préformaté.

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

en savoir plus sur le pré-tag sur ce lien

Srikanth Muttavarapu
la source
1
@HuzaifaSaifuddin que voulez-vous dire? <pre>est standardisé en HTML5 avec le même comportement qu'en HTML4.
Sumit
Je suis désolé, je ne sais pas, j'ai écrit cela .. Je suis d'accord avec ce que vous dites .. Désolé pour de mauvaises informations
Huzaifa Saifuddin
Je formatais la sortie à coller dans des feuilles de calcul, ce qui m'a permis d'insérer des caractères \ t pour faire des tabulations. C'était définitivement ma réponse. Bon déroulement.
Craig Brett, du
1
Ceci est la meilleure option à mon humble avis. De plus, nous pouvons appliquer une définition de style sur <pre>, afin que nous puissions avoir la police 'monospace' correcte si nécessaire. Exemple: pré {famille de polices: "Lucida Console", Monaco, monospace; taille de police: 90%; }
reverpie le
41

Je suis tombé sur cela en cherchant une méthode et j'ai fini par trouver la mienne qui semble fonctionner facilement pour ce qui est recherché. Je suis nouveau à poster ici, donc j'espère que cela fonctionne ... Mais ayez cela en CSS:

span.tab{
    padding: 0 80px; /* Or desired space*/
}

Ensuite, dans votre HTML, ce soit votre "long onglet" en milieu de phrase comme j'avais besoin:

<span class="tab"></span>

Enregistre du montant &nbsp;ou &emsp;dont vous auriez besoin.

J'espère que cela aide quelqu'un, bravo!

Rob
la source
3
Cela ajoutera 80 pixels à gauche et 80 pixels à droite de la spanbalise, pas exactement un onglet.
mcont
Encore une réponse intelligente car vous n'ajoutez qu'un petit peu de balisage tout en permettant à CSS de faire le style.
invotez le
9

Si les espaces deviennent si importants, il peut être préférable d'utiliser du texte préformaté et la balise <pre>.

pavium
la source
L'OP n'est pas si particulier à propos des espaces, juste demandé des raccourcis pour les multiples &nbsp;. L'appel de la <pre>balise créera beaucoup de travail supplémentaire.
isomorphismes
Pour éviter la police monospace, utilisez css "white-space: pre-wrap"
hultqvist
L'espace blanc n'est pas une that importantchose. C'est une réalité de la vie.
Programmes Redwolf
9

Si vous souhaitez simplement mettre en retrait la première phrase d'un paragraphe, vous pouvez le faire avec une petite astuce CSS:

p:first-letter {
    margin-left: 5em;
}
peirix
la source
Ouais. Ça marchera aussi. N'oubliez pas de le mettre :first-lettersi le but est de ne mettre en retrait que la première phrase.
peirix
9

La balise <tab> n'est jamais entrée dans les navigateurs, malgré son introduction dans HTML3. J'ai toujours pensé que c'était vraiment dommage car la vie serait beaucoup plus facile dans de nombreuses circonstances si nous l'avions à notre disposition. Mais vous pouvez facilement y remédier pour vous donner une fausse balise <tab>. Ajoutez ce qui suit dans la tête de votre HTML ou bien (sans les balises de style) dans votre CSS:

<style>
    tab { padding-left: 4em; }
</style>

À partir de là, lorsque vous avez besoin d'un onglet dans votre document, mettez <tab> dedans. Ce n'est pas un vrai onglet car il ne s'aligne pas sur les marques de tabulation, mais il fonctionne pour la plupart des besoins, sans avoir à tergiverser avec des entités de caractères ou des étendues maladroites. Cela rend vraiment facile de vérifier votre source, et un jeu d'enfant pour formater des choses simples où vous ne voulez pas vous tracasser de tableaux ou d'autres "solutions" plus complexes.

Un aspect intéressant de cette solution est que vous pouvez effectuer une recherche / remplacement rapide d'un document texte pour remplacer tous les onglets par la balise <tab>.

Vous pourriez être en mesure de définir un tas de TABs en position absolue vraie, puis utiliser l'onglet approprié (par exemple <tab2> ou <tab5> ou autre) si nécessaire, mais je n'ai pas trouvé de moyen de le faire sans qu'il indente les lignes suivantes .

user1388236
la source
7

Vous pouvez utiliser une table et appliquer un widthattribut au premier <td>.

Code:

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

Résultat

Content1       Content2
Content3       Content4
mangkokorix
la source
Merci!! C'est la solution la meilleure et la plus générale pour les situations où CSS n'est pas possible.
John Henckel
6

J'ai utilisé un span avec un style en ligne. J'ai dû faire cela car je traitais une chaîne de texte brut et j'ai besoin de remplacer le \ t par 4 espaces (appx). Je ne pouvais pas utiliser&nbsp; car plus loin dans le processus, ils étaient interprétés de sorte que le balisage final avait des espaces sans contenu.

HTML:

<span style="padding: 0 40px">&nbsp;</span>

Je l'ai utilisé dans une fonction php comme celle-ci:

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);
Gordy
la source
6

Si vous n'aviez besoin que d'un seul onglet, ce qui suit a fonctionné pour moi.

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

avec le HTML quelque chose comme:

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>

Vous pouvez ajouter plus d '"onglets" en ajoutant des styles d' "onglets" supplémentaires et en modifiant le code HTML, tels que:

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

avec le HTML quelque chose comme:

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>
StrangeDucks
la source
4

Si vous utilisez CSS, je suggérerais ce qui suit:

p:first-letter { text-indent:1em; }

Cela mettra en retrait la première ligne comme dans les publications traditionnelles.

Slevin
la source
4

Il y a un simple CSS pour cela:

white-space: pre;

Il conserve les espaces que vous ajoutez dans le HTML plutôt que de les unifier.

Avi
la source
3 
<span style="margin-left:64px"></span>

Considérez-le comme ceci: un onglet est égal à 64 pixels. C'est donc l'espace que nous pouvons donner par CSS.

Mateen
la source
3

nous pouvons utiliser style = "white-space: pre" comme ceci:

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

l'espace vide à l'intérieur est rempli d'onglets, la quantité d'onglets dépend du texte.

cela ressemblera à ceci:

Text    : value
Text2   : value2
Text32  : value32
Esgi Dendyanri
la source
3

Le code CSS idéal qui devrait être utilisé devrait être une combinaison de propriétés "display" et "min-width" ...

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.
Olumide
la source
2

Eh bien, si l'on a besoin d'un long espace au début d'une ligne uniquement sur tout le paragraphe, cela peut être une solution:

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

Si c'est trop à écrire ou si vous avez besoin de tels onglets à de nombreux endroits, vous pouvez le faire

<span class='tab'>&nbsp;</span>

Ensuite, incluez ceci dans CSS:

span.tab {display:inline-block;height:1em;width:4em;}
Evgeny Savelev
la source
2

J'utilise une liste sans puces pour donner l'apparence "tabulée". (C'est ce que je fais parfois lorsque j'utilise MS Word)

Dans le fichier CSS:

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

Et dans le fichier HTML, utilisez des listes non ordonnées:

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

La beauté de cette solution est que vous pouvez effectuer d'autres retraits à l'aide de listes imbriquées.

Un noob ici parle, donc s'il y a des erreurs, veuillez commenter.

funct7
la source
(x) HTML doit spécifier le contenu du document, la façon dont il doit être affiché doit être gérée par CSS. Il existe des raisons pour lesquelles la présentation de pages Web à l'aide de tableaux ne doit jamais être utilisée pour des données non tabulaires.
Nielsvh
1

nous utilisons une classe d'espace personnalisée

<span class='space'></span>

Inclure la classe d'espace dans CSS.

.space 
{
   margin-left:45px;
}
rashedcs
la source
1
Comme dans la réponse d'Alohci, veuillez utiliser em/ remmesures, pour permettre le zoom du texte du navigateur.
Charlie Harding
0

En utilisant CSS et les meilleures pratiques, la création dynamique de menus imbriqués et en retrait serait la suivante:

  1. Créez un style pour chaque imbrication, tel que indent1, indent2, etc., chacun spécifiant sa propre marge gauche. La structure du site devrait rarement dépasser trois niveaux de nidification.
  2. Utilisez une variable statique (entier) dans la fonction auto-récursive pour suivre la récursivité.
  3. Pour chaque boucle, ajoutez le numéro de boucle au mot indent, à l'aide de scripts côté serveur tels que PHP ou ASP, afin que ces menus soient correctement formatés par CSS.

Vous pouvez également parcourir la variable statique pour ajouter un espacement à l'aide de plusieurs &nbsp;ou<pre> des balises, ou d' autres caractères, le cas échéant.

En testant le caractère de tabulation horizontale, &#09;j'ai constaté qu'il ne fonctionne pas en remplacement de plusieurs &nbsp;dans le scénario que j'ai décrit. Vous pouvez avoir des résultats différents.

Ro Mc
la source
0

Ceci est un peu une solution laide, mais vous pouvez simplement le faire

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

Et puis utilisez la variable tab dans vos chaînes.

Aonghus McGovern
la source
0

Uniquement "pré" tag:

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

Vous pouvez appliquer n'importe quelle classe CSS sur cette balise.

Yanni
la source
0

Je recommanderais simplement:

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>
yoav barnea
la source
0 
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

Assurez-vous que le code de couleur correspond à l'arrière-plan, le px est variable à la longueur souhaitée pour l'onglet.

Ajoutez ensuite votre texte après le <t>. </ T>

Le point est utilisé comme un espace et il est plus facile à taper, mais le '& # 160;' peut être utilisé à la place de la période, ce qui rend le codage couleur non pertinent.

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

Ceci est surtout utile pour afficher des paragraphes de texte, mais peut s'avérer utile dans d'autres parties des scripts.

Eric A. Tuttle
la source