Question

The make the columns of the table as black (both outline and inside)

<table width=80% border=0 cellspacing=0 cellpadding=3 align=center>
<tr><td colspan=2><font face=verdana size=5 color=#999999>XYZ| </font><font face=Tahoma size=5>ABC</font></td></tr><tr
 bgcolor=#6DA2D7><td colspan=2 height=13></td>
<td align=left><font face=Tahoma size=2 color=#ffffff> Date</td>
<td align=right><font face=Tahoma size=3 color=#ffffff> Monitoring</td></tr>
<td align=left><font face=Tahoma size=2 color=#000000> Tool hourly report</td>
<table width=70% border=1 cellspacing=0 cellpadding=3 align=center
<tr style="background-color: #256B9C;">
<th COLSPAN=3 align=left ><font face=Tahoma size=2 color=#ffffff >Disk Space</th></tr>
<tr style="background-color: #256B9C;">
<th><font face=Tahoma size=2 color=#ffffff>Machine</th>
<th><font face=Tahoma size=2 color=#ffffff>Status</th>
</tr>
<tr style="background-color: #FFFFFF;">
<td align=center ><font face=Tahoma size=2 color=#000000>BN stpmus@sn2437</td>
<td align=center><font face=Tahoma size=2 color=#000000>85 % full</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td align=center><font face=Tahoma size=2 color=#000000>GH stpma@sn2597</td>
<td align=center><font face=Tahoma size=2 color=#000000>51 % full</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td align=center><font face=Tahoma size=2 color=#000000>US1 stpmu1@sn2598</td>
<td align=center><font face=Tahoma size=2 color=#000000>1 % full</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td align=center><font face=Tahoma size=2 color=#000000>US2 stpmu2@sn2499</td>
<td align=center><font face=Tahoma size=2 color=#000000>9 % full</td>
</tr>
</table></td>
Was it helpful?

Solution

Just because your original code made my brain hurt:

<style type="text/css">
.mainTable { border-collapse: collapse; font-family: Tahoma, sans-serif; margin: 0 auto; width: 80%; }
.mainTable td, .mainTable th { padding: 3px; }
.mainTable .branding { color: #999999; }
.mainTable .header { background-color: #6DA2D7; color: #FFFFFF; }
.mainTable .small { font-size: small; }
.mainTable .x-large { font-size: x-large; }
.mainTable .left { text-align: left; }
.mainTable .right { text-align: right; }
.mainTable .center { text-align: center; }
.mainTable .odd { background-color: #FFFFFF; }
.mainTable .even { background-color: #EEEEEE; }

.subTable { border: 1px solid #000000; border-collapse: collapse; margin: 0 auto; width: 90%; }
.subTable td { border-bottom: 1px solid #000000; border-right: 1px dotted #000000; }
.subTable .header { background-color: #055770; border: 1px solid #000000; }
.subTable .subheader { background-color: #256B9C; border: 1px solid #000000; color: #FFFFFF; }
.subTable .high { color: #FF0000; font-weight: bold; }
.subTable .med { color: #FF9900; }
.subTable .low { color: #009900; }
</style>

<table class="mainTable">
    <tr><td class="x-large" colspan="3"><span class="branding">XYZ|</span> ABC</td></tr>
    <tr class="header"><td>&nbsp;</td><td class="small">Date</td><td class="right">Monitoring</td></tr>
    <tr><td class="small">Tool hourly report</td><td colspan="2">&nbsp;</td></tr>
    <tr>
        <td colspan="3">
            <table class="subTable small center">
                <tr class="header left"><th colspan="3">Disk Space</th></tr>
                <tr class="subheader"><th>Machine</th><th>Status</th></tr>
                <tr class="odd"><td>BN stpmus@sn2437</td><td class="high">85% full</td></tr>
                <tr class="even"><td>GH stpma@sn2597</td><td class="med">51% full</td></tr>
                <tr class="odd"><td>US1 stpmu1@sn2598</td><td class="low">1% full</td></tr>
                <tr class="even"><td>US2 stpmu2@sn2499</td><td class="low">9% full</td></tr>
            </table>
        </td>
    </tr>
</table>

OTHER TIPS

It's hard to tell what exactly you are looking for, but perhaps it is the border-collapse CSS property?

For example:

<table border="1" style="border-collapse:collapse">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top