HTML textarea alignment

Question

Suppose I have textarea filled with following text

employee/company/salary

john/microsoft/12.000

michael/citrusdata/15.000

How can I align each column vertically so I get following text:

employee__________company__________salary

john______________microsoft__________12.000

michael___________citrusdata__________15.000

In this example I used underscores to specify whitespaces, thought to write a simple function like nl2br() to replace '/' with one or many tab characters but it wont be a consistent solution, guess I need to read text line by line and considering the length of every word, I need to replace '/' with enough whitespace but dont have any idea how to code it, is there any other way?

Answer 1

I suppose you will output the textarea content outside the textarea itself, else you will need to use js alternative. My answer uses php :) So, you may use the sprintf function that allows left or right padding.

Just split your content to get an array of lines

$lines = explode("\n", $content);

Take care of a eventual empty last entry (if your content end with a \n)

Then

foreach($lines as $line) {
    $items = explode("/", $line) ;
    echo sprintf("%-15s%-15s%-15s", $items[0], $items[1], $items[2]) . "<br/>";
}

"%-15" tells to left-pad with 15 empty spaces. It works on console, but you have to nl2br it before echoing in web pages !

This is sample, so you have to add error testing (lines with only one / for example).

Answer 2

You should specify the width of each column like 50 characters for each or any desired width. let say it $COLUMN_WIDTH = 100; find length of the column value (string) than subtract it from fixed length like $COUNT_SPACES_TO_INSERT = $COLUMN_WIDTH - strlen($COLUMN_STR); Than insert $COUNT_SPACES_TO_INSERT number of spaces it will solve your issue.