How to add table borders and center the table in all browsers?
Can anyone tell me how to add the borders for the table in Google Chrome? And how to align the table 'center' in Firefox,Safari,Opera,Chrome.
Please find the attached code :
<html>
<head>
<style type="text/css">
.mainpagebordr {
BORDER-BOTTOM: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-COLLAPSE: collapse;
BORDER-TOP: #000000 1px solid;
BORDER-RIGHT: #000000 1px solid;
margin-left : auto;
margin-right: auto;
margin-left: auto;
}
.marginStyle{margin: 0 auto;}
</style>
</head>
<body>
<center>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" class="marginStyle" align="center">
<tr class="rcptFont">
<tr>
<td width="26.7%">
</td>
<td align="center" width="480px" valign="top">
<table border="0" class="mainpagebordr marginStyle" height="730" align="center">
<tr class="rcptFont">
<td width="175" valign="top" height="10%">
<table width="200" align="left">
<tr>
<td width="105" height="90" style="padding-left: 10px">
<img src="/URAPortalBC/Common/images/ura5.jpg" height="112" width="160"/>
</td>
</tr>
<tr class="rcptFont1">
<td width="175">
</td>
</tr>
</table>
</td>
<td colspan="4" width="245" align="center" class="withBorder marginStyle" valign="top">
<table align="center" class="withBorder marginStyle" width="245">
<tr class="rcpthead">
<td width="245" align="center">
<strong>Uganda Revenue Authority</strong>
</td>
</tr>
<tr class="rcptFont1">
<td align="center">Kampala Area office Plot 51,Windsor Crescent P.O.box 1234 Kampala,Uganda</td>
</tr>
<tr class="rcpthead">
<td align="center" >
<strong>Acknowledgement Receipt</strong>
</td>
</tr>
<tr class="rcptFont" >
<td align="center">
<strong>Declaration of Instrument</strong>
</td>
</tr>
</table>
</td>
<td colspan="4" width="245" valign="top" style="padding-top: 3px;padding-right: 10px">
<table width="170" class="rcptlstHead" valign="top">
<tr>
<td width=""><p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: right""><b>For General Tax Questions</b></p>
</tr>
<tr>
<td><p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: right"> Call Our Toll Free Number</p></td>
</tr>
<tr>
<td><p style="FONT-SIZE:10pt;font-family:Arial;TEXT-ALIGN: right"><b>0800117000</b></p></td>
</tr>
<tr>
<td><p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: right"> Or log onto URA web portal</p>
</td>
</tr>
<tr>
<td><p style="FONT-SIZE:10pt;font-family:Arial;TEXT-ALIGN: right"> <b>http://ura.go.ug </b></p>
</td>
</tr>
</table>
</td>
</tr>
<tr> <td> </td> </tr>
<tr class="rcptFont">
<td colspan="4">
Dr. dfdfd asfdsf
</td>
<td colspan="5" >
Notice Date : <strong>09/09/2011</strong>
</td>
</tr>
<tr class="rcptFont">
<td colspan="4">
,
</td>
<td colspan="5" >
Reference No :<strong>LI02120001570</strong>
</td>
</tr>
<tr class="rcptFont">
<td colspan="4">
addaf ,
</td>
<td colspan="5" align="right">
<img src="http://localhost:8080/URAPortalBC/barcode?data=LI02120001570&headless=false&drawText=false&width=1&height=5&type-Code128B" border="0" alt=""/>
</td>
</tr>
<tr class="rcptFont">
<td colspan="4">
AMOLATAR, KIOGA, AMOLATAR TOWN COUNCIL
</td>
<td colspan="5" >
TIN : <strong>N.A.</strong>
</td>
</tr>
<tr> <td> </td> </tr>
<td colspan=10>
<table align="center" border="1" bordercolor="black" valign="top" width="90%" cellpadding="0" cellspacing="0" class="marginStyle">
<tr class="rcptFont">
<td colspan="8">
<center><b>Declaration of Instrument For Stamp Duty</b></center>
</td>
<tr class="rcptFont">
<td align="center" width="5%" class="mainpagebordr" align="left"><b>1</b></td>
<td align="left" width="45%" class="mainpagebordr" align="left"><b>TIN of applicant</b></td>
<td align="left" width="50%" class="mainpagebordr" align="left"><b>N.A.</b></td>
</tr>
<tr class="rcptFont">
<td align="center" width="5%" class="mainpagebordr" align="left"><b>2</b></td>
<td align="left" width="45%" class="mainpagebordr" align="left"><b>Name of Taxpayer</b></td>
<td align="left" width="50%" class="mainpagebordr" align="left"><b>Dr. dfdfd asfdsf</b></td>
</tr>
<tr class="rcptFont">
<td align="center" width="5%"class="mainpagebordr" align="left"><b>3</b></td>
<td align="left" width="45%" class="mainpagebordr" align="left"><b>Type of Instrument</b></td>
<td align="left" width="50%" class="mainpagebordr" align="left"><b>CANCELLATION-instrument of</b></td>
</tr>
<tr class="rcptFont">
<td align="center" width="5%" class="mainpagebordr" align="left"><b>4</b></td>
<td align="left" width="45%" class="mainpagebordr" align="left"><b>Number of copies to be stamped</b></td>
<td align="left" width="50%" class="mainpagebordr" align="left"><b>2</b></td>
</tr>
<tr class="rcptFont">
<td align="center" width="5%" class="mainpagebordr" align="left"><b>5</b></td>
<td align="left" width="45%" class="mainpagebordr" align="left"><b>Amount of Duty (UGX)</b></td>
<td align="left" width="50%" class="mainpagebordr" align="left"><b>0</b></td>
</tr>
<tr class="rcptFont">
<td align="center" width="5%" class="mainpagebordr" align="left"><b>6</b></td>
<td align="left" width="45%" class="mainpagebordr" align="left"><b>Payment registration Number</b></td>
<td align="left" width="50%" class="mainpagebordr" align="left"><b>2120000000412</b></td>
</tr>
</table>
</td>
<br>
<br>
<tr align="center" class="rcptFont">
<td colspan="10"><b></b>
<br>
<table align="left">
<tr><td class="rcptFont1">Your Search code: </td>
开发者_如何学编程 <td class="rcptFont1"><strong>52065557675TW</strong></td>
</tr>
</table>
</td>
</tr>
<tr> <td> </td> </tr>
<tr> <td> </td> </tr>
<tr class="rcptFont">
<td colspan="8">
<center><b>Official URA Representative</b></center>
</td>
</tr>
<tr class="rcptFont">
<td colspan="8">
<center>Please check for the status of your application at the nearest tax office or</center>
</td>
</tr>
<tr class="rcptFont">
<td colspan="8">
<center>the URA web portal at http://ura.go.ug</center>
</td>
</tr>
<tr>
<td colspan="10">
<hr style="height:1px;">
<p style="FONT-SIZE:8pt;font-family:Arial;TEXT-ALIGN: center;">Plot 26/28, Olwol Road, Opposite Blue Valley Guest House, LIRA</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="center" >
<!--<tr >
<td align="center">
<form name="receiptForm" method="post">
<input type="hidden" name="dispatch" value="" />
<div id="buttons">
<input type="button" value="Print" id='printBtn' class="submit" onmouseover="hideStatusMsg()" onclick="printReceipt()" />
<input type="button" class="submit" value="Back" id='backBtn' onclick="backToRegn()" onmouseover="hideStatusMsg()"/>
</div>
</form>
</td>
</tr>
--></table>
<!-- payment receipt
-->
</center>
</body>
</html>
Change this:
<center>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" class="marginStyle" align="center">
To this:
<table width="100%" cellpadding="0" cellspacing="0">
And this:
.marginStyle{margin: 0 auto;}
To this:
table { text-align: center; margin: 0 auto; border-collapse: collapse; border: 1px solid red; }
table tr, table td { text-align: left; }
The <center> tag is deprecated so you shouldn't use it.
You have used border="0" attribute on most of your tables, it would be best to omit this attribute and use css to create the borders.
Using margin:0 auto; works when an element has a fixed width by assigning equal margins on both sides. In most of your cases you have placed a fixed width table inside a fixed width td of the same size. This leaves no room for any margin so technically you have centered the table but obviously the visual is not what you want.
If you want the outer most table to act as a container and center the entire table structure you will need to give it a fixed width because currently it is 100% width.
加载中,请稍侯......
精彩评论