SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Thread: html table

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    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
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 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
    301
    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
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 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
    301
    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
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 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
    301
    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
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 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
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 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
    301
    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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by windowsxp View Post
    why your tables are so small ?
    ?? because there's nothing in them!

    also there is no tr , td borders coming
    Just add them ( td,th{border:1px solid red})

    Code:
     ...... I just want 3 tables centered and side by side
    So now its three tables!

    I'm afraid you're are going to have to work a bit harder than this

    My code still accommodates all the above.

    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;
    	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;
    }
    .table-wrap table td{border:1px solid red}
    </style>
    </head>
    
    <body>
    <div class="outer">
    		<div class="table-wrap">
    				<table>
    						<tr>
    								<td> table 1</td>
    								<td> table 1</td>
    								<td> table 1</td>
    						</tr>
    						<tr>
    								<td> table 1</td>
    								<td> table 1</td>
    								<td> table 1</td>
    						</tr>
    				</table>
    				<table>
    						<tr>
    								<td> table 2</td>
    								<td> table 2</td>
    								<td> table 2</td>
    						</tr>
    						<tr>
    								<td> table 2</td>
    								<td> table 2</td>
    								<td> table 2</td>
    						</tr>
    				</table>
    				<table>
    						<tr>
    								<td> table 3</td>
    								<td> table 3</td>
    								<td> table 3</td>
    						</tr>
    						<tr>
    								<td> table 3</td>
    								<td> table 3</td>
    								<td> table 3</td>
    						</tr>
    				</table>
    		</div>
    </div>
    </body>
    </html>
    Please, test the above and experiment and see if you can work out how this works before asking more questions. If you are still stuck then you may ask further questions but we do like to see you trying for yourself first.

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 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.

  13. #13
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    ?? because there's nothing in them!



    Just add them ( td,th{border:1px solid red})

    Code:
     ...... I just want 3 tables centered and side by side
    So now its three tables!

    I'm afraid you're are going to have to work a bit harder than this

    My code still accommodates all the above.

    Please, test the above and experiment and see if you can work out how this works before asking more questions. If you are still stuck then you may ask further questions but we do like to see you trying for yourself first.

    Your code looks ok now. I could not understand these things in your code. ....can you please explain what are these things (in the screenshot)?

    tablequeries.png

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    As the code comments indicate (in green) they are hacks to make the code work in outdated browsers (IE6 and 7). They don't really matter these days, but Paul put it there in case you cared.

    The zoom property is basically meaningless, but has been found to help those dud browsers render the page as desired, and the * in this context is invalid CSS but is still recognized by those browsers. So other browsers will ignore it, but those versions of IE will recognize the rule, which is the point of the hack.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by windowsxp View Post
    Your code looks ok now. I could not understand these things in your code. ....can you please explain what are these things (in the screenshot)?
    Ralph explained the details above well but I will further clarify the method as well.

    IE7 and under do not understand display:inline-block when used on block elements. However they do understand inline-block on inline elements so the secret is to turn the element into an inline element and then apply inline-block. As the rules are mutually exclusive in the same rule you can't actually do that by any normal means. In fact it turns out that IE7 probably doesn't understand inline-block at all but is reverting to an IE5 behaviour where inline elements behaved like inline-block elements by default and the trigger for this is "haslayout".

    Any inline element in haslayout mode behaves as inline-block. Read my comments #5 in the Sitepoint Reference. The haslayout trigger must be one that causes haslayout to be true for inline elements so height or width is no good and you need to use zoom or rather perversely inline-block as both are triggers for haslayout for inline elements and block elements.

    Zoom is proprietary IE code (although webkit supports it as well) and will indeed zoom the layout in IE (if you said zoom:2.0. the layout would be double the size). However if you say zoom:1.0 then that means no change at all and applies haslayout without any after effects and is the best trigger to use although it is invalid.

    The "*" before the display:inline rule is a hack to filter out all browsers except ie7 and under as they stupidly still parse the rule. It is another invalid hack but useful in this circumstance to avoid an extra rule block but I would not use it anywhere else as its an ugly hack. It would be better to use a valid hack such as * html for ie6 and *+html for ie7 which will validate but are more verbose and must be coded separately.

  16. #16
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why you have used display:inline-block; ?

    we already have display:inline-table .....why both display:inline-block; and display:inline-table are required ?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 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
  •