|
Click to See Complete Forum and Search --> : centering tables that are side by side Tina Mohney 09-18-2003, 08:59 AM I have a question about lining up and centering tables in HTML. I used two tables on my site where I used the align="left" and align="right" to keep the tables side by side. Now I would like to center these tables on the page. Is that possible? How is it done? I am avoiding using frames due to the search engine's inability to read them. Help? pyro 09-18-2003, 09:50 AM Take a look at this example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #container { width: 500px; margin: auto; /*Make sure you have a valid doctype set. See first two lines.*/ } #tableone { width: 250px; float: left; border: 1px solid; } #tabletwo { width: 250px; float: right; border: 1px solid; } </style> </head> <body> <div id="container"> <table id="tableone"> <tr> <td>Cell One</td> <td>Cell Two</td> </tr> <tr> <td>Cell Three</td> <td>Cell Four</td> </tr> </table> <table id="tabletwo"> <tr> <td>Cell One</td> <td>Cell Two</td> </tr> <tr> <td>Cell Three</td> <td>Cell Four</td> </tr> </table> </div> </body> </html> Dark Dragon 09-18-2003, 10:37 AM Hey Pyro, hope you don't mind if I borrow that code. Looks pretty useful. :D pyro 09-18-2003, 10:46 AM Not at all. Copy and paste to your hearts content... :) If you like that, you may also be interested in http://www.infinitypages.com/research/verticalcentereddiv.htm, which will also center the content vertically. Dark Dragon 09-18-2003, 10:54 AM Cool Beans Pyro..thanks! pyro 09-18-2003, 10:55 AM You bet... :) Tina Mohney 09-18-2003, 11:08 AM Thanks, Pyro! It worked all but for one odd thing. Please be tolerant of me, I'm fairly new to this! My tableone ended up on the right and tabletwo ended up on the left,just the opposite of what I coded. Does this have anything to do with the DOCTYPE set? I don't really understand that, mine is set to transitional and I don't have that second line "http://www.w3.org/TR/html4/strict.dtd". Thanks again, this is really helping me! pyro 09-18-2003, 12:04 PM If your tables are on the wrong side, you must have the float: left/right wrong. Just change that, and you'll be good to go. Also, for a list of valid HTML 4.01 doctypes, see http://www.webdevfaqs.com/html.php#doctype Tina Mohney 09-18-2003, 12:37 PM Pyro, I know I'm a beginner so don't laugh at this FrontPage code and how messy it is. I intend to do more changes and use style sheets to get rid of alot of the junk code, but for now...i checked my lefts and rights and it's still backwards. Had to put table one on left to show on right. I am pasting in the code for you to see. I checked out the doctypes and left mine with loose. Is that ok? <!DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="title" content="Infocon County Access to public records"> <meta name="description" content="Inquiries into public databases in PA county court houses"> <meta name="keywords" content="county access,inquiry public records in PA,PA county court house,access public records in PA county,public infcounty access,public database PA county,PA county court house,access to public records in PA,Armstrong,Bedford,Blair,Butler,Cambria,Clarion,Clinton,Erie,Franklin,Fulton,Huntingdon,Juniata,La wrence,Mercer,Mifflin,Montour,Pike,Potter,Susquehanna,assessment real estate,assessment occupation per capita,clerk of courts,marriage license,orphans court,prothonotary,register of wills,recorder of deeds,tax claim,voter registration"> <meta http-equiv="Content-Language" content="en-us"> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Infocon PA County Access Home Page</title> <style> p { margin-top: 0px; margin-bottom: 1px } body { font-family: "Arial", sans-serif; font-size: 10pt; font-weight: normal; font-style: normal } </style> <style type="text/css"> #container { width: 760px; margin: auto; } #tableone { width: 200px; float: right; border: 2px solid; { #tabletwo { width: 550px; float: left; border: 2px solid; { </style> <meta name="Microsoft Border" content="b"> </head> <body background="images/LGL02BK.JPG"> <p><img border="0" src="images/0_flageagle1d.gif" width="200" height="157"><img border="0" src="images/icbanner.gif" width="550" height="158"></p> <div id="container"> <table id="tableone" style="color:#BECDBA; " bordercolor="#006699" cellspacing="1" bgcolor="#BECDBA" bordercolorlight="#FFFFCC" bordercolordark="#800000"> <tr> <td width="200" height="26" valign="top" style="color: #C0C0C0"> <br> </td></tr> <tr> <td width="200" height="26" valign="top" style="color: #006699;font-weight:bold" bgcolor="#FFFFCC" align="center"> <a href="index.html"><font color="#006699" size="2">Home</font></a></td></tr> <tr> <td width="200" height="26" valign="top" style="color: #C0C0C0"> </td></tr> <tr> <td width="200" height="26" valign="top" style="color: #006699;font-weight:bold" bgcolor="#FFFFCC" align="center"> <a href="https://ic-access.com:8300/CASWebFacing/"> <font color="#006699" size="2">Subscriber Log On</font></a></td></tr> <tr> <td width="200" height="26" valign="top" style="color: #C0C0C0"> </td></tr> <tr> <td width="200" height="26" valign="top" style="color: #006699;font-weight:bold" bgcolor="#FFFFCC" align="center"> <a href="intro_cty_access.html"><font color="#006699" size="2"> Introduction/Invoice Information</font></a></td></tr> <tr> <td width="200" height="26" valign="top" style="color: #C0C0C0"> </td></tr> <tr> <td width="200" height="26" valign="top" style="color: #006699;font-weight:bold" bgcolor="#FFFFCC" align="center"> <a href="part_counties.html"><font color="#006699" size="2"> Participating Counties</font></a></td></tr> <tr> <td width="200" height="26" valign="top" style="color: #C0C0C0"> </td></tr> <tr> <td width="200" height="26" valign="top" style="color: #006699;font-weight:bold" bgcolor="#FFFFCC" align="center"> <a href="https://ic-access.com:444/infcgidev2/html/TIM250_Intro.html"> <font color="#006699" size="2">Subscribe Now</font></a></td></tr> <tr> <td width="200" height="26" valign="top" style="color: #C0C0C0"> </td></tr> <tr> <td width="200" height="26" valign="top" style="color: #006699;font-weight:bold" bgcolor="#FFFFCC" align="center"> <a href="news_releases.html"><font color="#006699" size="2">News Releases</font></a></td></tr> <tr> <td width="200" height="26" valign="top" style="color: #C0C0C0"> </td></tr> <tr> <td width="200" height="26" valign="top" style="color: #006699;font-weight:bold" bgcolor="#FFFFCC" align="center"> <a href="contact_us3.html"><font color="#006699" size="2">Contact Us</font></a></td></tr> <tr> <td width="200" height="26" valign="top" style="color: #006699;font-weight:bold" bgcolor="#BECDBA" align="center"> </td></tr> <tr> <td width="200" height="26" valign="top" style="color: #006699;font-weight:bold" bgcolor="#FFFFCC" align="center"> <font size="2"><a href="county_access_system_sitemap.html"> <font color="#006699">Site Map</font></a></font></td></tr></table> <table id="tabletwo" cellpadding="2" cellspacing="0" bordercolor="#006699" bordercolorlight="#BECDBA" bordercolordark="#800000" style="font-family:Arial; font-size:10pt; "> <tr> <td width="365" height="136" rowspan="3"> <p> <img border="0" src="images/LGL02BUL.GIF" width="21" height="12"> The <i><b><font face="Times New Roman"> INFOCON County Access System</font></b></i> </font>is an access service for those in need of information on a regular basis from various county public information databases in Pennsylvania. The information comes from various county offices including Assessment/Real Estate and Occupation/Per Capita, Clerk of Courts, Marriage License, Orphan's Court, Prothonotary, Recorder of Deeds, Register of Wills, Tax Claim, and Voter Registration.</p> <p> <br></p> <p> <img border="0" src="images/LGL02BUL.GIF" width="21" height="12"> This Internet Access Service is provided through arrangements with participating counties in Pennsylvania. These arrangements allow Infocon to provide access to the various existing public computer inquiries, including document images, presently available only at the courthouses during regular courthouse hours. The <i><b><font face="Times New Roman">INFOCON County Access System </font> </b></i>allows subscribers to access public records at participating counties at any time of the day or night, and even through the weekends.<br> <br> <img border="0" src="images/LGL02BUL.GIF" width="21" height="12"> The <i><b><font face="Times New Roman">INFOCON County Access System</font></b></i> is accessible on a subscriber basis only, with the use of the subscriber's personal computer accessing the <a href="http://www.infoconcountyaccess.com">www.infoconcountycccess</a> Web Site on the Internet.<p> <p> <img border="0" src="images/LGL02BUL.GIF" width="21" height="12"> Subscribe now to this service. See the <a href="intro_cty_access.html">Introduction</a> page and the <a href="part_counties.html">Participating Counties</a> page for more information. Then go to the <a href="https://ic-access:444/infcgidev2/html/TIM250_Intro.html">Subscribe Now</a> page to start your subscription to the <i><b><font face="Times New Roman">INFOCON County Access System</font></b></i>.</td> <td width="185" height="125" bgcolor="#FFFFCC" align="center"> <p align="center"><font color="#FF0000"><b>Announcements</b></font></p> <p align="center"><a href="news_releases.html">Infocon welcomes<br> <span style="background-color: #DFCA73">Cambria County<br> </span>to the <i><b><font face="Times New Roman">INFOCON<br> County Access System</font></b></i>.</a></td> </tr> <tr> <td width="185" height="126" bgcolor="#BECDBA" align="center"> <p align="center"><font color="#FF0000"><b>Related Links</b></font></p> <p align="center">Need toner for your laser printer, copier, or fax machine?<br> Order at <a href="http://www.tonerintime.com">www.tonerintime.com</a></p> <p align="center"> </td> </tr> <tr> <td width="185" height="125" bgcolor="#BECDBA" align="center"> <p align="center">For a complete line of business and printing supplies, custom forms, checks, invoices, repair tags, and more...<br> Visit the Infocon online supply store catalog. <br> <a href="http://www.ic-access.btobsource.com/"> Click here.</a></td> </tr> <tr> <td width="365" height="193" bgcolor="#BECDBA"> <b><font color="#FF0000"><a name="Free Downloads">Free Downloads</a></font><br> </b> <br> <font size="2">To view Images with the <i><b>Graphical</b> </i> method of access, you must first download and install the <b>free RVI Web Viewer.</b><br> <br> <br> The <i>Non-Graphical </i>method of access requires a one-time* download of the <b>free IBM WebSphere Host On Demand </b>software which will occur when you log on to <i>INFOCON County Access </i>with the <i><b>Non-Graphical</b> </i>Access button.<br> <br> <br> </font></td> <td width="185" height="193" bgcolor="#B9D0EC" align="center"> <p><br> <font size="2"> <span style="background-color: #FFFFCC"> <a href="wview_instruct.html">Download instructions for <b>RVI Web Viewer</b></a></span></font></p> <p><br> <font size="2"> <span style="background-color: #FFFFCC"> <a href="downloadHOD.html">Download instructions for<b> IBM WebSphere Host On Demand </b></a></span> </font></td> </tr> </table> </div> </body> </html> webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved. |
|