html - 对齐表格中的图像并添加标题标题行

Question

我希望下面脚本中的图像与表格上方的右上角对齐。目前它在表格上方左对齐，这可能吗？此外，我想在表格顶部添加一个额外的标题行，该标题行跨越表格的宽度并具有固定的标题，这是否可以在不破坏表格的情况下实现？

#Set variables
$image = "C:\Scriptrepository\XXXXX.gif"
$ImageBits = [Convert]::ToBase64String((Get-Content $image -Encoding Byte))
$ImageHTML = "<img src=data:image/gif;base64,$($ImageBits) alt=XXXXX;/>"
$CurrentDate = Get-Date -Format F
$Post = "<br><br> Members of $ADGroupName <br> Generated on $CurrentDate"

#Function for alternating table colour rows
function global:Set-AlternatingRows {
    [CmdletBinding()]
    Param(
        [Parameter(Mandatory, ValueFromPipeline)]
        [string]$Line,

        [Parameter(Mandatory)]
        [string]$CSSEvenClass,

        [Parameter(Mandatory)]
        [string]$CSSOddClass
    )

    Begin {
        $ClassName = $CSSEvenClass
    }
    Process {
        if ($Line.Contains("<tr><td>")) {
            $Line = $Line.Replace("<tr>","<tr class=""$ClassName"">")
            if ($ClassName -eq $CSSEvenClass) {
                $ClassName = $CSSOddClass
            } else {
                $ClassName = $CSSEvenClass
            }
        }
        return $Line
    }
}

#Function to validate request and create variable from input
function global:GetADGroupMembersrecursively {
    Write-Host "Enter Distribution List / AD Group name:" -ForegroundColor Green
    $global:ADGroupName = Read-Host
    if ([string]::IsNullOrEmpty($ADGroupName)) { 
        cls
        Write-Host -ForegroundColor red "Cannot be blank, please re-enter AD Group / distribution list name" | Out-Null
        GetADGroupMembersRecursively 
    }
    $global:DLCheck = DSQuery group -Name "$ADGroupName"
    if ($DLCheck -eq $null) { 
        cls
        Write-Host -ForegroundColor red "Did not find AD Group / Distribution List, please verify this is the correct name" | Out-Null
        GetADGroupMembersRecursively
    }
}

GetADGroupMembersRecursively

$Head = @"
<style>
BODY {font-family: Arial; font-size: 8pt; color: #4C607B;}
TABLE{margin: auto; font-family: Segoe UI; box-shadow: 10px 10px 5px #888; width: 100%;height :50px;}
TH, TD {border: 1px solid #ffffff; border-collapse: collapse;padding: 3px;}
TH {font-size: 1.2em; background-color: #003366; color: #ffffff; }
TD {color: #000000; }
 .even { background-color: #efefef; }
 .odd { background-color: #c0c0c0; }
TR { background: #b8d1f3; }
H4 {font-family: Arial; font-size: 12pt; color: #4C607B;align=right;}
H5 {font-family: Arial; font-size: 8pt; color: #4C607B;align=right;}
</style>
"@ 

#Table creation
Get-ADGroupMember -Identity $ADGroupName -Recursive |
    Get-ADUser -pr GivenName, Surname, mail, sAMAccountName |
    Select-Object GivenName, Surname, mail, sAMAccountName |
    sort Surname |
    ConvertTo-Html -Head $head -Body $ImageHTML -PostContent $Post -As Table |
    Set-AlternatingRows -CSSOddClass odd -CSSEvenClass even |
    Out-File C:\ScriptRepository\Results\$ADGroupName.htm
Invoke-Item C:\ScriptRepository\Results\$ADGroupName.htm

Answer 1

将图像放在 block 级元素中(例如 <p>)，并将该元素右对齐:

...
$ImageHTML = "<p class='pic'><img src=.../></p>"
...
$Head = @"
<style>
...
p.pic {text-align: right}
...
</style>
"@
...