SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Thread: html table

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    html table

    I want to have two table in the center of the page as shown below.

    mytable.png

    my issue is how do I place tables in such location ? Can you please post a sample HTML code.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It's quite easy to do, but depends a bit on the nature of the page. Is it fixed width?

    One option is to float the tables, or perhaps try display: inline-block. (Not sure how that affects tables, but may test it later.)

    Quote Originally Posted by windowsxp View Post
    Can you please post a sample HTML code.
    It would be helpful if you first posted the code you have so far.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's quite easy to do, but depends a bit on the nature of the page. Is it fixed width?

    One option is to float the tables, or perhaps try display: inline-block. (Not sure how that affects tables, but may test it later.)
    no... floating a table is not solution.... .....I have Left menu , header and footer and content page....table will in the content page.

    display: inline-block also not a solution ... because this can not put tables in the central location.


    my requirement is two tables will be at the center next to each other with a gap in between as shown in the attached image in the first post.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by windowsxp View Post
    my requirement is two tables will be at the center next to each other with a gap in between as shown in the attached image in the first post.
    It goes without saying that you should wrap those tables in a container that is placed where you want. Then float or display: inline-block the tables within that container.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It goes without saying that you should wrap those tables in a container that is placed where you want. Then float or display: inline-block the tables within that container.
    I can come up with this ...using float...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>CSS table TESTS</title>
    
    </head>
    
    <body>
    <center>
    <h2>This is a table float test</h2>
    </center>
    
    <table style="float: left;" border=2>
    <tr><td> table 1</td></tr>
    </table>
    <table style="float: right;" border=2>
    <tr><td> table 2</td></tr>
    </table>
    
    
    </body>
    </html>


    But this is not the desired output ...I want these two tables to be near centered and a gap between them.....

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Please don't bump threads as that is against the rules.

    Are you looking for something like this (much as Ralph suggested).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>CSS table TESTS</title>
    <style type="text/css">
    .outer {
    	text-align:center;
    	width:100%;
    }
    .table-wrap,.table-wrap table {
    	display:inline-block;
    	border:1px solid red;
    	vertical-align:top;
     *display:inline;/* ie6 and 7 hack */
    	zoom:1.0;	/* ie6 and 7 hack */
    }
    .table-wrap table {
    	margin:40px;
    	border:1px solid #000;
    	display:inline-table;
    }
    </style>
    </head>
    
    <body>
    <div class="outer">
    		<div class="table-wrap">
    				<table>
    						<tr>
    								<td> table 1</td>
    						</tr>
    				</table>
    				<table>
    						<tr>
    								<td> table 2</td>
    						</tr>
    				</table>
    		</div>
    </div>
    </body>
    </html>

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >>>Are you looking for something like this (much as Ralph suggested).

    No.


    I want two HTML tables side by side, centered on the page.(little gap in between)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by windowsxp View Post
    No.

    I want two HTML tables side by side, centered on the page ...
    Then you must mean Yes, as that's what Paul's code does.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Then you must mean Yes, as that's what Paul's code does.
    As Ralph said my code is doing what you asked for in your drawing so you will have to explain a little more as to where you see it differing from what you want? You can adjust the margins to suit to get the tables closer if you want but the code I gave produces two tables centred in the middle of the screen as requested.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Ralph said my code is doing what you asked for in your drawing so you will have to explain a little more as to where you see it differing from what you want? You can adjust the margins to suit to get the tables closer if you want but the code I gave produces two tables centred in the middle of the screen as requested.
    why your tables are so small ? also there is no tr , td borders coming ...... I just want 3 tables centered and side by side


    This what I want ...

    modifytable.png


    Is it possible ?

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    If you dont need the red outline, you can get rid of the div.outer in the HTML, and use this CSS

    Code:
    .table-wrap {
    	width:100%;
    	text-align: center;
    	background: #ccc
    }
    .table-wrap table {
    	border:1px solid #000;
     	display:inline-table;
    	vertical-align:top;
     	*display:inline;/* ie6 and 7 hack */
         zoom:1.0;	/* ie6 and 7 hack */
    }
    .table-wrap table +table{margin-left: 40px} /*optional spacing method*/
    .table-wrap table td{border:1px solid red}
    BTW if you are trying to center the tables FLUIDLY and VERTICALLY on the page.. well that's another kettle of kippers.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The inline-block isn't really needed and I just left it there to cater for browsers that don't understand inline-table. See Rays shortened code in post #12 for an example.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •