Adjust spaces between text or words in html

Question

I have a problem is how adjust spaces between text or words in html. I want my result 2 "colon" alignment can adjust same line.

Below is my sample code:

<tr><td style="font-size:11px;">Name :</td></tr><br>
<tr><td style="font-size:11px;">Date &nbsp;<span style="word-spacing:80px;">:</span></td></tr>

Now my result alignment cannot be same like:

I want the expected result is same like below:

I have try to use <p> to replace <span> adjust the alignment, but the "Colon" will break down. Hope someone can guide me on how to solve this problem. Thanks.

This will only work if you have a monospaced font. Or, since you're already using tables, why not just put the colons into their own column to the right of the rest of the text? — Roddy of the Frozen Peas, Nov 24 '21 at 04:41
Because will effect something where. So I try to see got other method to space the colon — David Holly, Nov 24 '21 at 04:42
There are key words missing in your comment and I have no idea what you're trying to say. — Roddy of the Frozen Peas, Nov 24 '21 at 04:43

score 2 · Answer 1 · answered Nov 24 '21 at 06:22

As the colon is for visual separation rather than having any meaning I would consider inserting it in a pseudo element rather than actually in the HTML.

This snippet puts the colon in just before the following td which ensures the colons are aligned.

td:nth-child(2)::before {
  content: ':';
}

<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>

LSE · Answer 2 · 2021-11-24T08:11:27.893

The easiest way to accomplish that is to put the colon at the beginning of the 'text', instead of the end of the 'title'.

/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td> : John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td> : Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td> : Data</td>
  </tr>
</table>

If you need to omit it when the 'text' is empty, you can output the colon as a td::before using CSS.

/* This is relevant */

td:not(:empty)::before {
  content: " : ";
}


/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td>Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td></td>
  </tr>
</table>

Janki Gandhi · Answer 3 · 2021-11-24T05:07:41.747

1

Here I have updated your sample code put the : in second td

<body>
    <table>
      <tr>
        <td>Full Name</td>
        <td>: Abc def</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>: 24-11-2021</td>
      </tr>
    </table>
  </body>

edited Nov 24 '21 at 05:07

answered Nov 24 '21 at 04:57

Janki Gandhi

331
1
6

score 1 · Accepted Answer · answered Nov 24 '21 at 08:05

I had a similar problem and the only "hacky" way I found is this:
"Put your text and separator (: in this case) in a wrapper (like <div>) and align them.

.cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}

<tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

Also, you don't need <br> between your table rows (<tr>s).

score 1 · Answer 5 · answered Nov 24 '21 at 12:16

If its about a single word followed by a :, text-align-last:justify; can do the job

td.adjust {
  text-align-last: justify;
  padding-inline-end:0.25rem;
}

<table>
  <tr>
    <td class="adjust">Name :</td>
    <td>Name </td>
  </tr><br>
  <tr>
    <td class="adjust">Date :</td>
    <td>Today</td>
  </tr>
</table>

Adjust spaces between text or words in html

5 Answers5