Skip navigation
Currently Being Moderated

Table Centering

Apr 7, 2013 5:12 PM

How to I center the table? I put in this line into the table area

<table style="margin: auto;"

However the table leans towards the right. If I can get the table to fall evenly below the navigation bar that would help. 

The lines in the table header can those divider lines be selectively removed? Thanks

 

___________________

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Library Page Ten</title>

 

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

 

<style>

body {

    width: 720px;

    margin: 0 auto;

    background-image: url(../../images/backgrounds/fade_bl_BigBaba_Stamps.png);

    background-repeat: repeat;

}

 

nav {

width: 720px;

margin:0 auto;

overflow: hidden; /*to control floats*/

}

 

nav ul { margin: 0; padding:0 }

 

nav li {

margin: 0;

padding: 0;

list-style: none;

float: left;

font-size: 14px;

font-variant: small-caps;

font-weight:bold;

}

 

nav li a {

margin: 0;

display: block;

text-decoration: none;

color: #000;

width: 120px;

line-height: 2em;

text-align: center;

/**gradients for various browsers**/

background: rgb(232,240,175); /* Old browsers */

background: -moz-linear-gradient(left, rgba(232,240,175,1) 0%, rgba(232,240,175,1) 0%, rgba(162,218,178,1) 53%, rgba(150,218,209,1) 98%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(232,240,175,1)), color-stop(0%, rgba(232,240,175,1)), color-stop(53%, rgba(162,218,178,1)), color-stop(98%, rgba(150,218,209,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left, rgba(232,240,175,1) 0%, rgba(232,240,175,1) 0%, rgba(162,218,178,1) 53%, rgba(150,218,209,1) 98%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left, rgba(232,240,175,1) 0%, rgba(232,240,175,1) 0%, rgba(162,218,178,1) 53%, rgba(150,218,209,1) 98%); /* Opera 11.10+ */

background: -ms-linear-gradient(left, rgba(232,240,175,1) 0%, rgba(232,240,175,1) 0%, rgba(162,218,178,1) 53%, rgba(150,218,209,1) 98%); /* IE10+ */

background: linear-gradient(to right, rgba(232,240,175,1) 0%, rgba(232,240,175,1) 0%, rgba(162,218,178,1) 53%, rgba(150,218,209,1) 98%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8f0af', endColorstr='#96dad1', GradientType=1 ); /* IE6-9 */

Color format: Comments IE9 Supp

}

 

nav li a:hover, nav li a:active, nav li a:focus {

text-decoration: none;

background: #E8F0AF;

filter:none;

}

 

/**clear floats after nav**/

nav:after {

clear: left;

display: block;

}

</style>

<script src="/pickle/pickle.js" language="javascript"></script>

<link href="/pickle/skins/default/_stylesheet.css" rel="stylesheet" type="text/css" />

 

<style type="text/css">

<!--

table, th, td {

    border: 1px solid #000000;

    border-collapse: collapse;

    color: #FFFFFF;

    background: #FFFFFF url(../../images/3fade_bl_.jpg);

}

th {

    color: #FF9933;

    background: #FFFFFF;

}

tr.altRow td {

    background: #FFFFFF;

}

th, td {

    vertical-align: top;

    padding: 5px;

    background-color: #FFFFFF;

}

.rightalign {

    text-align: right;

    color: #000000;

    font: normal 12px/normal Geneva, Arial, Helvetica, sans-serif;

    text-transform: none;

}

.style4 {color: #000000; font-size: 12px; }

.style5 {color: #333333; font-size: 10px; }

.style6 {color: #0099CC}

.style8 {color: #999933}

-->

</style>

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

<!--

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

//-->

</script>

</head>

 

<body>

<header><img src="http://www.meherbabalibrary.com/logos/Logo10.png" alt="logo" height="128" width="720"> </header>

<nav>

<ul class="style13">

<li><a href="../../index.htm">Baba's Home</a></li>

<li><a href="../../kalki.htm">Kalki's Kitchen</a></li>

<li><a href="../../dvdrent.htm">Fana Fillah</a></li>

<li><a href="../../jive.htm">Curator's Jive</a></li>

<li><a href="../../advent.htm">Advent Vault</a></li>

<li><a href="../../babasplash.htm">Baba Splash</a></li>

</ul>

</nav>

 

<h2> </h2>

<h2> </h2>

<p align="center"><img src="../../images/Summations/s3/archive_lib.png" alt="Lord Prabhu" width="336" height="41"><br>

THIS IS ONLY A WORK AREA A TEMPLATE</p>

<CENTER>

  <h4>Selected Materials from the Library of the Ancient One</h4>

</center>

<div id="container" style="background-color: bgcolor;">

<div align="center" id="1"></div>

<div id="2"></div>

<div id="3"></div>

</div>

 

<section class="container">

<div class="child descendant">

  <div class="descendant"></div>

</div>

</section>

 

<section class="container">

<div class="child descendant">

  <div class="descendant"></div>

</div>

</section>

 

 

<div style="float:left:background-color:white"></div>

 

<div id="content">

 

<table border="1" cellpadding="5" cellspacing="5" bordercolor="#000000" style="margin: auto;">

 

 

  <tr>

    <th scope="col">Guest</th>

    <th scope="col"> </th>

    <th scope="col">Reviews Summations</th>

    <th scope="col">Play Audio Media</th>

  </tr>

  <tr>

    <th width="92" scope="col"><h5 class="style4">Allan Saviskas</h5></th>

    <th width="81" scope="col"><img src="../../images/agents/saviskas06.png" alt="Allan" width="68" height="90"></th>

    <th width="202" scope="col"><a href="../../docs/workamerica.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','../../images/Summations/s5/ann 2mb2.png',1)"><img src="../../images/Summations/s5/ann2mb1.png" name="Image7" width="300" height="32" border="0"></a></th>

    <th width="269" scope="col"><a href="../../media/media_saviskas.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','../../images/Summations/s5/ann 2mb2.png',1)"><img src="../../images/Summations/s5/ann2mb1.png" name="Image8" width="300" height="32" border="0"></a></th>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

</table>

<br>

<br>

<p> </p>

<h2 class="style19">Work Sheet</h2>

<p class="style19">Additional Assests Forthcoming</p>

<h1 class="style19"><a href="list_g_lib_eight.html"><img src="../../images/Summations/s6/lib8.png" alt="eight" width="300" height="32"></a><br>

  <a href="list_g_lib_one.html"><img src="../../images/Summations/s6/lib0.png" alt="Home" width="300" height="32"></a></h1>

<dl>

  <dd> </dd>

  </dl>

<p> </p>

<p class="style6"> </p>

<p> </p>

</div>

<div id="Commentary">

  <h2><span class="style18">Link</span>: <br>

  

   

    Ezad </h2>

</div>

</body>

</html>

 
Replies
  • Currently Being Moderated
    Apr 7, 2013 5:33 PM   in reply to Timber%%

    Must have a width for auto margins to work.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points