Yes you can use html in column title property. Use <br> for new line or <img>

$col = array();
$col["title"] = "<img width='16' src='https://www.google.com/images/srpr/logo4w.png'>&quot;; // caption of column
$col["name"] = "name";
…

Hi Abu
Thanks. This should work great. Is there a way to increase the height of the column headers to allow for taller images?

Try adding these css in html part. You can inspect using firebug and change css as desired.

<style>
/* header */
.ui-jqgrid .ui-jqgrid-htable th {height: 30px;}
.ui-jqgrid .ui-jqgrid-htable th div { height: 20px; text-align:left; padding-left: 0.3em; font-weight: bold; }
</style>

Hi Abu
Thank you so much! Your solution worked great. The only problem with the images for column names is that those images appear in the edit screen. Is there a way to have regular text appear only in the edit screen?

Thanks again

You can bind onload event of grid …
$e["js_on_load_complete"] = "do_onload";
$g->set_events($e);

and in JS … reset column name (image to text)

<script>
function do_onload(id)
{
jQuery("#list1").setLabel("name","Client Name"); // col-name, col-title
}
</script>

Hi Abu
I tried your answer and it almost succeeds. With your solution it is showing the names for column header in the grid and also the edit grid. I'd like to show names only for the edit grid. I'd like to keep the images for the viewing grid.

You can write code at these dialog (after show) event.

$opt["add_options"]["afterShowForm"] = 'function ()
{
…. // your JS code to rename label
}';

$opt["edit_options"]["afterShowForm"] = 'function ()
{
…. // your JS code to rename label
}';

$opt["view_options"]["afterShowForm"] = 'function ()
{
…. // your JS code to rename label
}';

$g->set_options($opt);

Hi Abu
I'm trying to implement your solution but its not working. Here is my code:
$option1["edit_options"]["afterShowForm"] = '<script type="text/javascript">function ()
{
jQuery("#list1").setLabel("Nematoda_Oesophagostomum","Nematoda_Oesophagostomum");
}</script>';

You need to remove <script type="text/javascript"> tags and closing one from string.

Hi Abu
I followed your suggestion:
$option1["edit_options"]["afterShowForm"] = 'function ()
{
jQuery("#list1").setLabel("Nematoda_Oesophagostomum","hello world");
}';
$grid->set_options($option1);

Now the column name shows up in the grid and in the edit grid

You need to reset the label, on edit close event.

$option1["edit_options"]["onClose"] = "…………….."

Thank you so much for taking the time to help, Abu
This is the code:

$option1["edit_options"]["afterShowForm"] = 'function ()
{
jQuery("#list1").setLabel("Nematoda_Oesophagostomum","Nematoda Oesophagostomum");
}';
$option1["edit_options"]["onClose"] = 'function ()
{
jQuery("#list1").setLabel("Nematoda_Oesophagostomum","<img src=images/N_Oeso.png>");
}';

Now the text doesn't show in the edit window. Is there a way I can set a switch so that if the edit window is open you view the text and if the regular grid is open you see the image?

Can you send me details where it should show image and where text.
I'll try making a demo for you.

list ?
view dialog ?
edit dialog ?
add dialog ?