Need a good attractive style in my reporting including images

VIVEKANANDHAN_PERIASAMY
VIVEKANANDHAN_PERIASAMY used Ask the Experts™
on
I'm running below query,Which doesn't seems to be too attractive. Need to add a Image to the mail before the body header in the mail and Reporting form shoule more attractive.
Below code work fine,but i am not happy with report style

I tried changing the colour and font but I'm not happy with my changes.

Function ConvertDatatableTo-HTML
{
param
(
      $Datatable
)
      #Column Data
      $ColumnCount = $Datatable.Columns.Count
      $Columns = $Datatable.Columns | % {$_.ColumnName}

      #Start Table
      $Code = "<table>"
      
      #Columns
      $Code += "<tr>"
      foreach ($Column in $Columns)
      {
            $Code += "<th>" + $Column + "</th>"
      }
      $Code += "</tr>"
      
      #Rows
      foreach ($Row in $Datatable)
      {
            $Code += "<tr>"
            
            for ($i = 0; $i -lt $ColumnCount; $i ++)
            {
                  $Code += "<td>" + $Row.Item($i) + "</td>"
            }
            
            $Code += "</tr>"
      }
      
      #End Table
      $Code += "</table>"
      
      #Return the Table HTML
      return $Code
}

#Customise Vars
$DatabaseServerName = ""
$DatabaseName = ""
$EmailFrom = ''
[string[]] $EmailTO=''
$EmailSubject = ''
$SMTPServer = ''

#SQL Connection
$Connection = New-Object System.Data.SQLClient.SQLConnection
$Connection.ConnectionString = "server=$DatabaseServerName;database=$DatabaseName;trusted_connection=True;Connection Timeout=120;"

#Open Connection
$Connection.Open()
            
#SQL Command
$Command = New-Object System.Data.SQLClient.SQLCommand
$Command.Connection = $Connection
$Command.CommandText = ""
                  $Reader = $Command.ExecuteReader()

$DataTable1 = New-Object System.Data.DataTable
$DataTable1.Load($Reader)
$DataTable2 = New-Object System.Data.DataTable
$DataTable2.Load($Reader)
$Reader.Close()

#Close the database connection
$Connection.Close()
$Connection.Dispose()


$HTML = @"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>

<style type="text/css">
body
{
      background: #fff;
      padding: 0px;
      border: 0px;
      margin: 0px;
}

table
{
      background: #199885;
      margin: 5px;
      border-collapse: collapse;
       border-spacing: 0px;
      font-family: Tahoma;
      font-size: 13px;
      width: 500px;
      color: white;
}

td
{
      padding: 4px;
      border: 1px solid #FFFFFF;
      margin: 2px;
      font-family: Tahoma;
      font-size: 13px;
}

th
{
      padding: 4px;
      border: 1px solid #FFFFFF;
      margin: 2px;
      background: #1F4A83;
      color: white;
}


h1
{
      font-family: Tahoma;
      font-size: 14px;
      color: Red;
}

h2
{
      font-family: Tahoma;
      font-size: 12px;
      color: #247085;
}
h3 
{
      font-family: Tahoma;
      font-size: 18px;
      color: #1F4A83;
}
</style>

</head><body>
"@

#Add SQL Datatable
$HTML += "<h3> header</h3>"

$HTML += "<h2>header</h2>"
$HTML += (ConvertDatatableTo-HTML $DataTable1)
 $HTML += "<h1>header</h1>"
 $HTML += (ConvertDatatableTo-HTML $DataTable2)  

#End HTML
$HTML += "</body></html>"

#Mail Message
$Message = New-Object Net.Mail.MailMessage
$Message.Body = $HTML
$Message.From = $EmailFrom
$Message.To.Add($EmailTo)
$Message.Subject = $EmailSubject
$Message.IsBodyHtml = $True

$SMTP = New-Object Net.Mail.SmtpClient($SMTPServer)
$SMTP.Send($Message) 

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
This article has many nice tables that you can just plugin.  Just replace your css with theirs, basically:

http://pythoughts.com/table-style-css/

More options:

http://designshack.net/articles/10-css-table-examples/
http://icant.co.uk/csstablegallery/tables/78.php
How to bring image to email?
And i want to adjust the table as per my requirement

<style type="text/css">

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
body {color: #4f6b72;
      background: #E6EAE9;}
 div.container {
    width:98%;
    margin:1%;
  }

table {text-align:center;   margin-bottom:500;  margin-left:auto;     margin-right:auto;     width:500px;  border-collapse: collapse;
  border: 1px solid #38160C;
  font: normal 11px verdana, arial, helvetica, sans-serif;
  color: #F6ECF0;
  background: #641B35;
  }
caption {
  text-align: left;
  font: normal 11px verdana, arial, helvetica, sans-serif;
  background: transparent;
  }
td, th {
  border: 1px dashed #B85A7C;
  padding: .8em;
  color: #F6ECF0;
  }
thead th, tfoot th {
  font: bold 11px verdana, arial, helvetica, sans-serif;
  border: 2px solid #A85070;;
  text-align: left;
  background: #38160C;
  color: #F6ECF0;
  padding-top:6px;
  }
tbody td a {
  background: transparent;
  text-decoration: none;
  color: #F6ECF0;
  }
tbody td a:hover {
  background: transparent;
  color: #FFFFFF;
  }
tbody th a {
  font: normal 11px verdana, arial, helvetica, sans-serif;
  background: transparent;
  text-decoration: none;
  font-weight:normal;
  color: #F6ECF0;
  }
tbody th a:hover {
  background: transparent;
  color: #FFFFFF;
  }
tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
tfoot td {
  border: 1px solid #38160C;
  background: #38160C;
  padding-top:6px;
  }
.odd {
  background: #7B2342;
  }
tbody tr:hover {
  background: #51152A;
  }
tbody tr:hover th,
tbody tr.odd:hover th {
  background: #51152A;
  }
h1
{
      font-family: Tahoma;
      font-size: 14px;
      color: #641B35;
}

h2
{
      font-family: Tahoma;
      font-size: 12px;
      color: #641B35;
}
h3
{
      font-family: Tahoma;
      font-size: 18px;
      color: #E27B37;
}
</style>

</head><body>

Commented:
>>  How to bring image to email?

Put a full source on it like so:

<img src="http://www.mywebsite.com/images/myimage.gif" />

>>  And i want to adjust the table as per my requirement

I don't know what you mean.  All you have to do is replace your style with the style of (this for example):

#table-design thead {
      width: 100%;
}
#table-design td {
      padding: 5px 5px 5px 0;
      vertical-align: top;
}
#table-design thead th {
      padding-right: 10px;
      text-align: left;
}

And, then put the ID in your table like this:

<table id="table-design">
i have a image on "c:\vivek\viv.png"

I want this image to be added to the email which will be senting through powershell script.

<img src="http://www.mywebsite.com/images/myimage.gif" />

so is it should like

<img src="c:\vivek\viv.png" />

this image are no going to be paste on website,instead they need to be pasted to mail.

I tried both but it failed to come up in the mail.

Commented:
I'm not sure, but it would be easier and probably more compatible with other peoples mail programs if you post it online.  For instance, post your image at postimage.org or imageshack or one of those and use like:

<img src="http://postimage.org/images/ksdfjldjkfjdsja.gif" />
I'm getting error like below in powershell.To fix my question we need to contact to powershell experts.

I tried importing imaged to email,but it didn't work.

The term '<' is not recognized as a cmdlet, function, operable program, or script file. Verify the term and try again.
At C:\Documents and Settings\viv\Desktop\mails.ps1:214 char:10
+ $HTML +=<b <<<< r><img src="C:\Documents and Settings\v-viper\Desktop\HTML.HTML"/><br>
code:
$HTML +=<br><img src="C:\Documents and Settings\viv\Desktop\HTML.HTML"/><br>

Commented:
I have never used powershell but it looks a lot like PHP.  Try this code for adding an inline image into your email:
$file = "C:\scripts\logo.jpg"

$smtpServer = "smtp.server.com"

$msg = new-object Net.Mail.MailMessage

$att = new-object Net.Mail.Attachment($file)
$att.ContentDisposition.Inline = $True
$att.ContentDisposition.DispositionType = "Inline"
$att.ContentType.MediaType = "image/jpeg"
$att.ContentId = "logo"

$smtp = new-object Net.Mail.SmtpClient($smtpServer)

$msg.IsBodyHTML = $True
$msg.From = "t...@domain.com"
$msg.To.Add("t...@domain.com")
$msg.Subject = "MY SUBJECT"
$msg.Attachments.Add($att)
$msg.Body = {
                <html xmlns:o="urn:schemas-microsoft-com:office:office" 
xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
      <style type='text/css'>
        BottomRight {
          position: absolute;
          bottom: 2px;
          right: 4px;
        }
      </style>
    </head>
    <body>
                                <font face="calibri, helvetica" size="2">
                                <p>Hello</p>
                                <p>TEST</p>
                                </font>
                                <div id='BottomRight'>
                                                <img src='cid:logo' 'alt=logo'/>
                                </div>
    </body>
  </html>
}
$smtp.Send($msg)

$att.Dispose()

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial