How to format text in html using awk

Question

I would like to format my table in to html format using awk.

cat table.txt

COL1 COL2 COL4 COL5 COL3
BRCC hete 15869 105A 1
BRAC he 1799967 956G 1
BCAS he 7334543 369AFVC 2
RCA he 9534262 7806-14 4
RCA he 144848 1114A 5
RA he 206118 52A 5
BCAVV he 543304 3807TCD 5
BCA hoo 106091515 4308TDDSC 1
BCA hoo 206075 4563A 1
BCA hoo 799917 2612CDSA 1
BCA hoo 206076 513G 2
BCA hoom 16941 3113A 3

My awk solution:

awk 'BEGIN {print "<table>"} ; {  print "<tr><td width="80">" $1 "</td><td width="80">" $2 "</td><td width="150">" $3 "</td><td width="150">" $4 "</td><td>" $5 "</td><tr>"} ; END { print "</table>"}' table.txt

I Have 2 Problems:

1. Problem:

I need to add {print "<table>"} font style like:

awk 'BEGIN {print "<table style='font-size:8.0pt;font-family:"Verdana","sans-serif"'>"} ;

...

But there is a error with quoting:

awk: cmd. line:1: BEGIN {print "<table style=font-size:8.0pt
awk: cmd. line:1:              ^ unterminated string
awk: cmd. line:1: BEGIN {print "<table style=font-size:8.0pt
awk: cmd. line:1:              ^ syntax error
zsh: no such file or directory: font-family:Verdana,sans-serif>"} ; {  print "<tr><td width="80">" $1 "</td><td width="80">" $2 "</td><td width="150">" $3 "</td><td width="150">" $4 "</td><td>" $5 "</td><tr>"} ; END { print "</table>"}

2. Problem:

And I would like to add "borders" to my table with "======" mark. So output look like:

COL1 COL2 COL4 COL5 COL3
===========================
col1 col2 col4 col5 col3
col1 col2 col4 col5 col3
col1 col2 col4 col5 col3
col1 col2 col4 col5 col3
===========================

I would create a template file, with all those html tags, css stuff, and leave some place-holders. And awk loads the template file, and read the input, fill the data into place-holder. In this way, you can change your template (look & feel) without changing the data filling logic (the awk script). — Kent, Jan 16 '17 at 13:08
@Kent thank you for good idea.. Would you please create an example how would you solve this task? — Paul, Jan 16 '17 at 13:44
@kent a soution and a question using templates [Metaprogramming in awk](http://stackoverflow.com/questions/41684176/metaprogramming-in-awk-convert-file-to-html-table-format) — Jose Ricardo Bustos M., Jan 16 '17 at 20:22

Jose Ricardo Bustos M. · Accepted Answer · 2017-01-16T16:46:09.377

3

A solution using awk to generate table in html format

awk 'BEGIN {
    split("80,80,150,150,", widths, ",")
    print "<style>\
        .my_table {font-size:8.0pt; font-family:\"Verdana\",\"sans-serif\"; border-bottom:3px double black; border-collapse: collapse; }\n\
        .my_table tr.header{border-bottom:3px double black;}\n\
        .my_table th {text-align: left;}\
    </style>"
    print "<table class=\"my_table\">"
}
NR == 1{
    print "<tr class=\"header\">"
    tag = "th"
}
NR != 1{
    print "<tr>"
    tag = "td"
}
{
    for(i=1; i<=NF; ++i) print "<" tag " width=\"" widths[i] "\">" $i "</" tag ">"
    print "</tr>"
}
END { print "</table>"}' table.txt > table.html

you get in table.html,

edited Jan 16 '17 at 16:46

answered Jan 16 '17 at 12:53

Jose Ricardo Bustos M.

8,016
6
40
62

Thank you so much, that works awesome. Would be possible to "align" text under the column name? My original output was aligned - co for example COL5 and its values was aligned. – Paul Jan 16 '17 at 13:06
only, you can add `th {text-align: left;}`\ in style section, note: \ is for multiline string in `awk` – Jose Ricardo Bustos M. Jan 16 '17 at 13:19
Would be possible to add between each column ? So I can control spaces between columns? Like I have i original code? Thank you for help! – Paul Jan 16 '17 at 13:33
1

@Paul i fixed, this in post – Jose Ricardo Bustos M. Jan 16 '17 at 13:51
1

Nice! Bookmarked as I always screw up the CSS part! Personally I'd probably go with printf instead of print: `printf "<%s width=\"%d\">%s%s>\n", tag, widths[i], $i, tag` as IMHO it's a bit clearer when there's multiple values to separate them from the formatting but nbd. – Ed Morton Jan 16 '17 at 16:45
@JoseRicardoBustosM. That is amazing! Thank you so much!! May I ask you - it is possible to have first column in italic? I am not very able to modify your script :-( – Paul Jan 16 '17 at 17:32

SLePort · Answer 2 · 2017-01-16T16:51:50.470

Because I see a sed tag, you may want to try this:

sed '
1i \
<style> \
  .tbl { font-size:8.0pt; font-family:"Verdana", "sans-serif"; border-bottom:3px double black; border-collapse: collapse; } \
  .tbl th { border-bottom:3px double black;text-align:left; } \
  .tbl td, .tbl th { width:80px; } \
</style> \
<table class="tbl"> 
1 {
  s:[^ ]*:<th>&</th>:g
}
2,$ {
  s:[^ ]*:<td>&</td>:g
}
s:^:<tr>:;
s:$:</tr>:
$a </table>
' table.txt

Output::

<style> 
  .tbl { font-size:8.0pt; font-family:"Verdana", "sans-serif"; border-bottom:3px double black; border-collapse: collapse; text-align:left;} 
  .tbl th { border-bottom:3px double black; } 
  .tbl td, .tbl th { width:80px; } 
</style> 
<table class="tbl">
<tr><th>COL1</th> <th>COL2</th> <th>COL4</th> <th>COL5</th> <th>COL3</th></tr>
<tr><td>BRCC</td> <td>hete</td> <td>15869</td> <td>105A</td> <td>1</td></tr>
<tr><td>BRAC</td> <td>he</td> <td>1799967</td> <td>956G</td> <td>1</td></tr>
<tr><td>BCAS</td> <td>he</td> <td>7334543</td> <td>369AFVC</td> <td>2</td></tr>
<tr><td>RCA</td> <td>he</td> <td>9534262</td> <td>7806-14</td> <td>4</td></tr>
<tr><td>RCA</td> <td>he</td> <td>144848</td> <td>1114A</td> <td>5</td></tr>
<tr><td>RA</td> <td>he</td> <td>206118</td> <td>52A</td> <td>5</td></tr>
<tr><td>BCAVV</td> <td>he</td> <td>543304</td> <td>3807TCD</td> <td>5</td></tr>
<tr><td>BCA</td> <td>hoo</td> <td>106091515</td> <td>4308TDDSC</td> <td>1</td></tr>
<tr><td>BCA</td> <td>hoo</td> <td>206075</td> <td>4563A</td> <td>1</td></tr>
<tr><td>BCA</td> <td>hoo</td> <td>799917</td> <td>2612CDSA</td> <td>1</td></tr>
<tr><td>BCA</td> <td>hoo</td> <td>206076</td> <td>513G</td> <td>2</td></tr>
<tr><td>BCA</td> <td>hoom</td> <td>16941</td> <td>3113A</td> <td>3</td></tr>
</table>

How to format text in html using awk

2 Answers2

Linked