Align values right within centered data cells in an HTML table

Rajesh · Jul 23, 2016#12016-07-23T12:12+00:00

Dear all,

I have some problem in table style alignment. Here are two tables for your reference with HTML tags.

Please see table 1 picture with wrong alignment marked, but table 2 have same contents with right alignment which use   (EN SPACE) in <td> element.

All the table cells should be right aligned but center to the corresponding columns except the first column.
We have adjust the numerical data using  .
Is is possible using macro or JavaScript?

Table 1

Table 1

Code: Select all

<table class="tbl-width">
<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>
<thead>
<tr>
<th />
<th />
<th />
<th />
<th class="bdrbottom"><p class="center">Survival Index</p></th>
</tr>
<tr>
<th class="bdrbottom vbottom"><p class="center">Country</p></th>
<th class="bdrbottom vbottom"><p class="center">Number of educational centers in 1995</p></th>
<th class="bdrbottom vbottom"><p class="center">Number of educational centers closed since the beginning of FYA</p></th>
<th class="bdrbottom vbottom"><p class="center">Number of matriculated students in 1995</p></th>
<th class="bdrbottom vbottom"><p class="center">Educational centers closed in relation to the number of centers functioning in 1995</p></th>
</tr>
</thead>
<tbody>
<tr>
<td><p>Bolivia</p></td>
<td><p class="center">115</p></td>
<td><p class="center">5</p></td>
<td><p class="center">78, 576</p></td>
<td><p class="center">.95</p></td>
</tr>
<tr>
<td><p>Colombia</p></td>
<td><p class="center">54</p></td>
<td><p class="center">1</p></td>
<td><p class="center">35, 321</p></td>
<td><p class="center">.98</p></td>
</tr>
<tr>
<td><p>Ecuador</p></td>
<td><p class="center">48</p></td>
<td><p class="center">2</p></td>
<td><p class="center">14, 827</p></td>
<td><p class="center">.95</p></td>
</tr>
<tr>
<td><p>Guatemala</p></td>
<td><p class="center">33</p></td>
<td><p class="center">0</p></td>
<td><p class="center">8, 542</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td><p>Peru</p></td>
<td><p class="center">41</p></td>
<td><p class="center">0</p></td>
<td><p class="center">29, 225</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td><p>Nicaragua</p></td>
<td><p class="center">11</p></td>
<td><p class="center">0</p></td>
<td><p class="center">6,143</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td><p>Venezuela</p></td>
<td><p class="center">169</p></td>
<td><p class="center">0</p></td>
<td><p class="center">NA</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td><p>Paraguay</p></td>
<td><p class="center">43</p></td>
<td><p class="center">0</p></td>
<td><p class="center">47, 438</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td class="bdrbottom"><p>Totals</p></td>
<td class="bdrbottom"><p class="center">514</p></td>
<td class="bdrbottom"><p class="center">8</p></td>
<td class="bdrbottom"><p class="center">220, 241</p></td>
<td class="bdrbottom"><p class="center">.98</p></td>
</tr>
</tbody>
</table>

Table 2

Code: Select all

<table class="tbl-width">
<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>
<thead>
<tr>
<th />
<th />
<th />
<th />
<th class="bdrbottom"><p class="center">Survival Index</p></th>
</tr>
<tr>
<th class="bdrbottom vbottom"><p class="center">Country</p></th>
<th class="bdrbottom vbottom"><p class="center">Number of educational centers in 1995</p></th>
<th class="bdrbottom vbottom"><p class="center">Number of educational centers closed since the beginning of FYA</p></th>
<th class="bdrbottom vbottom"><p class="center">Number of matriculated students in 1995</p></th>
<th class="bdrbottom vbottom"><p class="center">Educational centers closed in relation to the number of centers functioning in 1995</p></th>
</tr>
</thead>
<tbody>
<tr>
<td><p>Bolivia</p></td>
<td><p class="center">115</p></td>
<td><p class="center">5</p></td>
<td><p class="center">78, 576</p></td>
<td><p class="center">&#x2002;.95</p></td>
</tr>
<tr>
<td><p>Colombia</p></td>
<td><p class="center">&#x2002;54</p></td>
<td><p class="center">1</p></td>
<td><p class="center">35, 321</p></td>
<td><p class="center">&#x2002;.98</p></td>
</tr>
<tr>
<td><p>Ecuador</p></td>
<td><p class="center">&#x2002;48</p></td>
<td><p class="center">2</p></td>
<td><p class="center">14, 827</p></td>
<td><p class="center">&#x2002;.95</p></td>
</tr>
<tr>
<td><p>Guatemala</p></td>
<td><p class="center">&#x2002;33</p></td>
<td><p class="center">0</p></td>
<td><p class="center">&#x2002;8, 542</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td><p>Peru</p></td>
<td><p class="center">&#x2002;41</p></td>
<td><p class="center">0</p></td>
<td><p class="center">29, 225</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td><p>Nicaragua</p></td>
<td><p class="center">&#x2002;11</p></td>
<td><p class="center">0</p></td>
<td><p class="center">&#x2002;6,143</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td><p>Venezuela</p></td>
<td><p class="center">169</p></td>
<td><p class="center">0</p></td>
<td><p class="center">NA</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td><p>Paraguay</p></td>
<td><p class="center">&#x2002;43</p></td>
<td><p class="center">0</p></td>
<td><p class="center">47, 438</p></td>
<td><p class="center">1.00</p></td>
</tr>
<tr>
<td class="bdrbottom"><p>Totals</p></td>
<td class="bdrbottom"><p class="center">514</p></td>
<td class="bdrbottom"><p class="center">8</p></td>
<td class="bdrbottom"><p class="center">220, 241</p></td>
<td class="bdrbottom"><p class="center">&#x2002;.98</p></td>
</tr>
</tbody>
</table>

Mofi · Jul 23, 2016#22016-07-23T17:40+00:00

Some questions and hints before we start thinking about helping you on this task.

Why was this topic created by you initially in forum UEX General Discussion?

Do you use UltraEdit for Linux and the solutions should work therefore with UEX?

The global announcement presented at top of every forum Help for new forum members - read this before post anywhere! recommends specifying version of UltraEdit in chapter 4 as this is often essential on questions related to regular expression finds/replaces, macros, scripts, configuration, well nearly all.

Note: I have already moved the topic to the Scripts forum.
Why do you have written the topic subject in upper case?

This can be interpreted as asked with importunity and can cause late or no answers. Don't do that in future.

Note: I have already edited the subject and formatted also the post better.
Don't use JPEG for screenshots as this image format is designed for photos using a lossy compression, but not for graphics. Use the image format PNG for screenshots as supported by every application supporting also JPEG which uses a lossless compression.
This task can be done with a macro or script. So the answer on your question is: YES!

Do you want to know also how? And should we code the macro or script for you?
Is the number format fixed (macro could be used) like 3 digits positive integers for column 2 and floating point values in 1.2 format (one digit left to decimal point, two digits after decimal point) for column 5, or must it be first found out depending on the values in each row (requires a script)?
Do you know that you can right align integer and floating point values in a column and get them nevertheless displayed in the middle of the column by using right alignment for the cell with an appropriate padding-right value?

Define in the HTML file two style classes for the two columns and reference the appropriate class in each td starting tag of column 2 and column 5.

Rajesh · Jul 27, 2016#32016-07-27T13:23+00:00

Dear Mofi,
First of all I apologized for my work.
We are helpless.
you design a script for this table alignment.

No, the (Integer or Floating)number format is not fixed.
It is both floating value or integer will happen. (Here also negative sign ’-’ will be happen font of digits. Here use ‘−’ code for negative sign).
(after or before the decimal point the digits is not fixed).
Here alphabetic word also happen.

Actually we use a class in ‘td’.
Like,
<td class=”center”>0000</td>
or
<td class=”right”>0000</td>
Whatever you prefer.
Which class am I use?
But both the class “center” or “right” are not use together, because both are ‘align’ class.
Only any one class we can use in ‘td’, either “center” or “right”.

Now we use ‘<td class=”center”>0000</td>’.
After that for right align we use   manualy.
First I see a number (which length is maximum). After that use   in front of minimum length numbers including negative sign for right align.
like

Here, all numbers are center alignment.
Max Length Number = 7857
After that use   in front of (52, 645, 21, -57) for right align.

Here, all numbers are center alignment.
Max Length Number = 12.457
After that use   in front of (52, 21, -57, 1.51) for right align.

I do this work manually, it takes more time.

I want, you design a script to introduce numbers of   in right place(in front of the digits) for “right alignment”, but center align.

I hope you understand my request.
And sorry once again.

Rajesh

Mofi · Jul 27, 2016#42016-07-27T15:13+00:00

What I meant with align data cell content right with a padding right value to get it displayed horizontally in the middle of the column is demonstrated by the HTML file below with your input data.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Statistic data test</title>
 <meta http-equiv="content-style-type" content="text/css">
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <style type="text/css">
   p      { margin:0; padding:3px }
   th     { white-space:nowrap; padding-left:6px; padding-right:6px }
  .center { text-align:center }
  .right  { text-align:right  }
  .data2  { text-align:right; padding-right:4.5em }
  .data3  { text-align:right; padding-right:7.2em }
  .data4  { text-align:right; padding-right:3.5em }
  .data5  { text-align:right; padding-right:5.2em }
 </style>
</head>
<body>

<table style="margin-left:auto; margin-right:auto">
<thead>
<tr>
<th><p class="center">Country</p></th>
<th><p class="center">Number of educational<br>centers in 1995</p></th>
<th><p class="center">Number of educational centers<br>closed since the beginning of FYA</p></th>
<th><p class="center">Number of matriculated<br>students in 1995</p></th>
<th><p class="center">Survival Index<br>Educational centers closed<br>in relation to the number of<br>centers functioning in 1995</p></th>
</tr>
</thead>
<tbody>
<tr>
<td><p>Bolivia</p></td>
<td class="data2"><p>115</p></td>
<td class="data3"><p>5</p></td>
<td class="data4"><p>78, 576</p></td>
<td class="data5"><p>.95</p></td>
</tr>
<tr>
<td><p>Colombia</p></td>
<td class="data2"><p>54</p></td>
<td class="data3"><p>1</p></td>
<td class="data4"><p>35, 321</p></td>
<td class="data5"><p>.98</p></td>
</tr>
<tr>
<td><p>Ecuador</p></td>
<td class="data2"><p>48</p></td>
<td class="data3"><p>2</p></td>
<td class="data4"><p>14, 827</p></td>
<td class="data5"><p>.95</p></td>
</tr>
<tr>
<td><p>Guatemala</p></td>
<td class="data2"><p>33</p></td>
<td class="data3"><p>0</p></td>
<td class="data4"><p>8, 542</p></td>
<td class="data5"><p>1.00</p></td>
</tr>
<tr>
<td><p>Peru</p></td>
<td class="data2"><p>41</p></td>
<td class="data3"><p>0</p></td>
<td class="data4"><p>29, 225</p></td>
<td class="data5"><p>1.00</p></td>
</tr>
<tr>
<td><p>Nicaragua</p></td>
<td class="data2"><p>11</p></td>
<td class="data3"><p>0</p></td>
<td class="data4"><p>6,143</p></td>
<td class="data5"><p>1.00</p></td>
</tr>
<tr>
<td><p>Venezuela</p></td>
<td class="data2"><p>169</p></td>
<td class="data3"><p>0</p></td>
<td class="data4"><p>NA</p></td>
<td class="data5"><p>1.00</p></td>
</tr>
<tr>
<td><p>Paraguay</p></td>
<td class="data2"><p>43</p></td>
<td class="data3"><p>0</p></td>
<td class="data4"><p>47, 438</p></td>
<td class="data5"><p>1.00</p></td>
</tr>
<tr>
<td><p>Totals</p></td>
<td class="data2"><p>514</p></td>
<td class="data3"><p>8</p></td>
<td class="data4"><p>220, 241</p></td>
<td class="data5"><p>.98</p></td>
</tr>
</tbody>
</table>

</body>
</html>

It is possible to use NA&ensp;&ensp;&ensp;  instead of just NA to get NA displayed left of the decimal point of the values above and below in that column, but I would not do that. In my point of view NA looks better aligned right with the values above and below in the middle of the column.

The method used above works only if font size for text within element TH (table header cell) and TD (table data cell) is the same as for text within element P (paragraph) because you have all text in the table data cells additionally embedded into a paragraph which would not be necessary at all as both are block elements. A paragraph for the text in the table is "Microsoft Word" behavior, but often not really wise or simply unnecessary. Which size the font has does not matter. The padding on right side to get the data displayed in the middle of each column is based on font size and the text in header of each data column determines the width of the column.

Note: EN SPACE with Unicode code U+2002 has in many proportional fonts the same width as figures (digits), but this is not guaranteed as far as I know. But the NO-BREAK SPACE with Unicode code U+00A0 is in nearly all proportional fonts thinner than a digit (but has in general same width as a decimal point). Value alignment with pre-pending or appending spaces is therefore in general no good idea. But as always there are exceptions like a large table where just a few values (less than 10) are different to the others and font is fixed (because operating system used by all readers is also fixed as otherwise the font can't be really fixed because Windows uses other fonts than Linux/Mac or iOS/Android devices).

See also the Microsoft articles:

The alignment of the values with right alignment in data cell but displayed as horizontally centered in column could be also done even more file size / code efficient with more columns and using in header colspan and in first data row rowspan with definition of the width for the columns without data used just for text alignment. I used this technique a lot in HTML files I wrote as it makes the code very compact because no style classes needed for each data cell and producing fine looking tables with any font and any font size on any device with any browser window width.