CODEWITHSUNDEEP
htmlcss
user7597016
user7597016

Reputation:

HTML insert "tab"

I would like the text (see PIC2) that every text begins in the same place, so to speak, provided with a tab. In Word that's just a tab. But how does that work in HTML or CSS? Can someone help me and tell me how I can make PIC1 from PIC2?

PIC1:

pic 1

PIC2:

pic 2

Code:

<p><strong>Öffnungzeiten:</strong>
        <p>Montag Geschlossen<br/>
        Dienstag 09:00 - 18:00<br/>
        Mittwoch Geschlossen<br/>
        Donnerstag 09:00 - 18:00<br/>
        Freitag 09:00 - 18:00<br/>
        Samstag 09:00 - 13:00<br/>
        Sonntag Geschlossen</p>

Upvotes: 0

Views: 2548

Answers (7)

lukkea
lukkea

Reputation: 3614

You can achieve what you need with a combination of pre, the tab character (&#9) and setting the tab-size to whatever you want in CSS:

pre {tab-size: 8;}
<pre>
  Montag&#9 Geschlossen<br/>
  Dienstag&#9 09:00 - 18:00<br/>
  Mittwoch&#9 Geschlossen<br/>
  Donnerstag&#9 09:00 - 18:00<br/>
  Freitag&#9 09:00 - 18:00<br/>
  Samstag&#9 09:00 - 13:00<br/>
  Sonntag&#9 Geschlossen
</pre>

(tab-size isn't fully supported yet but the browsers that are lagging with this should render this ok using their default tab-size)

Upvotes: 0

stevensonmt
stevensonmt

Reputation: 732

Use columns. This site should help: https://www.w3schools.com/css/css3_multiple_columns.asp

<style>
  .columns {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
    column-gap: 8px;
    column-fill: auto;
  }
  
  #column1 {
    column-span: none;
  }
  
  li {
    list-style-type: none
  }
</style>
<div class="columns">
  <div id="column1">
    <ul>
      <li>Montag </li>
      <li>Dienstag</li>
      <li>Mittwoch</li>
      <li>Donnerstag</li>
      <li>Freitag</li>
      <li>Samstag</li>
      <li>Sonntag</li>
    </ul>
  </div>
  <div id="column2">
    <ul><br/>
      <li>Geschlossen</li>
      <li>09:00 - 18:00</li>
      <li>Geschlossen</li>
      <li>09:00 - 18:00</li>
      <li>09:00 - 18:00</li>
      <li>09:00 - 13:00</li>
      <li>Geschlossen</li>
    </ul>
  </div>
</div>

Upvotes: 1

Persijn
Persijn

Reputation: 15000

Key value List html

Adding each section of text to its own div makes teh content grow shrink to the text size.
I also added a margin so its always spaced apart.

.inline-div {
  display: inline-block;
}

.extra-margin {
  margin-left: 2em;
}
<div>
  <div class="inline-div">
    <p>
      <label>long text here</label><br>
      <label>text</label><br>
      <label>text</label><br>
      <label>text</label>
    </p>
  </div>
  <div class="inline-div extra-margin">
    <p>
      test
      <br> test
      <br> test
      <br> test
    </p>
  </div>
</div>

Upvotes: 0

Jem
Jem

Reputation: 656

You should look into ASCII codes. The one for tab is &#009;

Find the whole list at ascii-code.com

Upvotes: 1

Rab
Rab

Reputation: 510

You can put the ASCII character code in for tabs in HTML (&# followed by 9;). However note that HTML paragraphs don't show them as tabs. You can instead use pre preformatted blocks if you really want to do it the tab way:

<p><strong>Öffnungzeiten:</strong>
<pre>
    Montag&#9;Geschlossen<br />
    Dienstag&#9;9:00 - 18:00<br />
    Mittwoch&#9;Geschlossen<br />
    Donnerstag&#9;09:00 - 18:00<br />
    Freitag&#9;09:00 - 18:00<br />
    Samstag&#9;09:00 - 13:00<br />
    Sonntag&#9;Geschlossen
</pre>

Taking a step back however, I'd advise using a table (basic) or divs (marginally more advanced). Simple table, for example:

<p><strong>Öffnungzeiten:</strong>
<table>
    <tr>
        <td>Montag</td><td>Geschlossen</td>
    </tr>
    <tr>
        <td> Dienstag</td><td>9:00 - 18:00</td>
    </tr>
    .
    .
    .
</table>

Or read about divs here https://www.w3schools.com/tags/tag_div.asp.

Upvotes: 0

Tim Mathis
Tim Mathis

Reputation: 33

Rather than using a line break, separate them into two sections with a margin in between.

<div style="display: flex">
    <div>
      <p>Montag</p>
      <p>Dienstag</p>
      <p>Mittwoch</p>
      <p>Donnerstag</p>
      <p>Freitag</p>
      <p>Samstag</p>
      <p>Sonntag</p>
    </div>
    <div style="margin-left: 2rem">
      <p>Geschlossen</p>
      <p>09:00 - 18:00</p>
      <p>Geschlossen</p>
      <p>09:00 - 18:00</p>
      <p>09:00 - 18:00</p>
      <p>09:00 - 13:00</p>
      <p>Geschlossen</p>
    </div>
</div>

Upvotes: 1

ahmednawazbutt
ahmednawazbutt

Reputation: 833

.poperty-container{
clear:both;
}
.key-div
{
  width:50%;
  float:left;
}
.value-div
{
width:50%;
float:left;
}
<div class='poperty-container'>
  <div class='key-div'>
    Montag 
  </div>
  <div class='value-div'>
    Geschlossen
  </div>
</div>


<div class='poperty-container'>
  <div class='key-div'>
    Dienstag 
  </div>
  <div class='value-div'>
    09:00 - 18:00
  </div>
</div>

Upvotes: 0

Related Questions