How to center a table?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • dougancil
    Contributor
    • Apr 2010
    • 347
    #1

    How to center a table?

    I have a web page that I converted from a psd file to html with Photoshop and imported into Dreamweaver. The problem I'm having is that some viewers comment on the fact that the page is left justified. I inserted a div tag into the html with a wrap around selection and tried to modify the css rules so that this would align properly, and the page is still aligning left justified. Here is the code that I have for my css:

    Code:
    #site_layout {
	font-family: "Franklin Gothic Demi Cond";
	background-color: #FFF;
	height: auto;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}
    and here is the html for the web site:

    Code:
    <html>
<head>
<title>MSB secondary page template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="site_layout.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (MSB secondary page template.psd) -->
<div id="container">
  <div id="site_layout">
    <div class="css" id="site_layout.css">
      <table width="1260" height="811" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
        <tr>
          <td colspan="26" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_01.gif" width="1259" height="24" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
          </tr>
        <tr>
          <td colspan="20" rowspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_02.gif" width="1036" height="48" alt=""></td>
          <td colspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_03.jpg" width="60" height="22" alt=""></td>
          <td colspan="4" rowspan="5" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_04.gif" width="163" height="65" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="22" alt=""></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_05.gif" width="60" height="43" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="26" alt=""></td>
          </tr>
        <tr>
          <td colspan="19" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_06.gif" width="873" height="8" alt=""></td>
          <td rowspan="5" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_07.jpg" width="163" height="58" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
          </tr>
        <tr>
          <td colspan="3" rowspan="5" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_08.gif" width="166" height="51" alt=""></td>
          <td rowspan="5" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_09.jpg" width="120" height="51" alt=""></td>
          <td rowspan="5" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_10.gif" width="16" height="51" alt=""></td>
          <td rowspan="5" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_11.jpg" width="120" height="51" alt=""></td>
          <td colspan="13" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_12.gif" width="451" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          </tr>
        <tr>
          <td rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_13.gif" width="19" height="50" alt=""></td>
          <td colspan="2" rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_14.jpg" width="119" height="50" alt=""></td>
          <td colspan="2" rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_15.gif" width="22" height="50" alt=""></td>
          <td colspan="4" rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_16.jpg" width="118" height="50" alt=""></td>
          <td rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_17.gif" width="19" height="50" alt=""></td>
          <td colspan="2" rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_18.jpg" width="118" height="50" alt=""></td>
          <td rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_19.gif" width="36" height="50" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
          </tr>
        <tr>
          <td rowspan="3" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_20.gif" width="8" height="42" alt=""></td>
          <td colspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_21.jpg" width="58" height="24" alt=""></td>
          <td colspan="3" rowspan="3" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_22.gif" width="157" height="42" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_23.gif" width="58" height="18" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
          </tr>
        <tr>
          <td align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_24.gif" width="163" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          </tr>
        <tr>
          <td rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_25.gif" width="148" height="665" alt=""></td>
          <td colspan="15" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_26.jpg" width="571" height="221" alt=""></td>
          <td colspan="8" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_27.jpg" width="405" height="221" alt=""></td>
          <td colspan="2" rowspan="4" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_28.gif" width="135" height="665" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="221" alt=""></td>
          </tr>
        <tr>
          <td rowspan="3" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_29.gif" width="1" height="444" alt=""></td>
          <td colspan="22" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_30.gif" width="975" height="402" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="402" alt=""></td>
          </tr>
        <tr>
          <td colspan="6" rowspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_31.gif" width="388" height="42" alt=""></td>
          <td colspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_32.jpg" width="44" height="21" alt=""></td>
          <td colspan="2" rowspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_33.gif" width="12" height="42" alt=""></td>
          <td align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_34.jpg" width="77" height="21" alt=""></td>
          <td rowspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_35.gif" width="10" height="42" alt=""></td>
          <td colspan="3" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_36.jpg" width="53" height="21" alt=""></td>
          <td colspan="7" rowspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_37.gif" width="391" height="42" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
          </tr>
        <tr>
          <td colspan="2" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_38.gif" width="44" height="21" alt=""></td>
          <td align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_39.gif" width="77" height="21" alt=""></td>
          <td colspan="3" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_40.gif" width="53" height="21" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
          </tr>
        <tr>
          <td colspan="25" align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_41.jpg" width="1250" height="14" alt=""></td>
          <td align="center" bgcolor="#FFFFFF">
            <img src="images/MSB-secondary-page-template_42.gif" width="9" height="14" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="14" alt=""></td>
          </tr>
        <tr>
          <td>
            <img src="images/spacer.gif" width="148" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="17" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="120" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="16" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="120" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="19" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="96" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="23" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="21" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="11" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="77" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="10" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="20" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="19" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="14" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="104" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="36" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="163" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="8" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="52" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="6" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="22" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="126" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="9" height="1" alt=""></td>
          <td></td>
          </tr>
      </table>
    </div>
  </div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
    Can someone please tell me what I'm doing wrong or not seeing?

    Thank you

    Doug
    Tags: None
    • Bryan Cheung
      New Member
      • Nov 2010
      • 55
      #2
      This is bad HTML, you should consider making the HTML en CSS yourself and not let Photoshop do this. Photoshop is a great image editing software but not for development.

      And tables are not meant to be used for layout construction, you make divisions with the <div>-tag.

      First convert your layout to a semantic layout and then we'll be able to help you much better.

      B.

        Comment

        • JKing
          Recognized Expert Top Contributor
          • Jun 2007
          • 1206
          #3
          What browser are you viewing this in? If IE provide the version as well.

            Comment

            • dougancil
              Contributor
              • Apr 2010
              • 347
              #4
              Bryan,

              Unfortunately since this is a psd file that I had to convert, there's really not a lot I can do about the html that's generated. I'm limited to that because I have to convert the psd file to html.

              JKing, the version is IE 8 in Windows 7.

                Comment

                • JKing
                  Recognized Expert Top Contributor
                  • Jun 2007
                  • 1206
                  #5
                  I can't replicate the issue unfortunately. The align="center" on the table should be enough to keep your page centered. Centers for me in both FF and IE8.

                  Is this a resolution issue for some users?

                    Comment

                    • Bryan Cheung
                      New Member
                      • Nov 2010
                      • 55
                      #6
                      Uhh..
                      Code:
                      <div class="css" id="site_layout.css">
                      Thats just not right..

                      Use:
                      Code:
                      <div id="site_layout">
                      If this doesn't help, do you have a online example?

                      Bryan.

                        Comment

                        • dougancil
                          Contributor
                          • Apr 2010
                          • 347
                          #7
                          Bryan,

                          I have this

                          Code:
                          <div id="container">
  <div id="site_layout">
    <div class="css" id="site_layout.css">
                          so you're saying to combine div id and div class together?

                            Comment

                            • Bryan Cheung
                              New Member
                              • Nov 2010
                              • 55
                              #8
                              No, your usage of the id of the div is wrong.
                              -"site_layout.cs s" is the name of your css file
                              -your id in your css is #site_layout so your syntax should be: <div id="site_layout "> that how you set a id on a div.
                              -why calling your div class "css", no idea. Its a bad practice usage, use more describing names.

                              Bryan.

                              -edit-
                              Link: http://www.w3schools.com/css/css_id_class.asp

                              -edit2-
                              More direct link: http://www.w3schools.com/css/tryit.a...ycss_syntax_id

                                Comment

                                • dougancil
                                  Contributor
                                  • Apr 2010
                                  • 347
                                  #9
                                  Jking,

                                  the resolution on the computer in question is 1680x1050.

                                    Comment

                                    • dougancil
                                      Contributor
                                      • Apr 2010
                                      • 347
                                      #10
                                      I fixed it with the code that you sent Bryan. Thank you.

                                        Comment

                                        • Bryan Cheung
                                          New Member
                                          • Nov 2010
                                          • 55
                                          #11
                                          Glad to help dougancil :)

                                          Bryan.

                                            Comment

                                            Previous template Next
                                            Working...