#1
  1. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,280
    Rep Power
    13

    Question Swithcing from verical to horizontal


    Hello there,

    Code:
    <table>
      <tr>
        <td>
        </td>
      </tr>
    </table>
    
    <table>
      <tr>
        <td>
        </td>
      </tr>
    </table>
    
    <table>
      <tr>
        <td>
        </td>
      </tr>
    </table>
    The above apear in vertical orientation.
    I need it in horizontal side by side.
    Is this possible please?
    What is now proved was once only imagined!
  2. #2
  3. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,066
    Rep Power
    9398
    Don't use a table? Use multiple columns? Turning tables into inline or inline-block elements probably isn't the right solution to whatever your problem is.
  4. #3
  5. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,280
    Rep Power
    13
    how you mean, can you show me in code please?
    What is now proved was once only imagined!
  6. #4
  7. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,066
    Rep Power
    9398
    The alternative to a table depends on what you're trying to do with them. As for multiple columns, you don't know what that looks like?
    Code:
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    That's three columns.
  8. #5
  9. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,280
    Rep Power
    13
    So, i see you mean 1 table with multiple table cells now yes.

    Well okey, i get the picture but i also forgpot to mentioned that i need to have some space to seperate each of 3 table si mentioned.
    What is now proved was once only imagined!
  10. #6
  11. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,280
    Rep Power
    13
    Code:
    <table CLASS = "sample">
    	<tr><th>SuperHost - Economy</th></tr>
    	<tr><td>Χώρος στο δίσκο: 1 GB</td></tr>
    	<tr><td>Μηνιαία Κίνηση δεδομένων: 1 GB</td></tr>
    	<tr><td>Control Panel: cPanel 11 & Fantastico Deluxe</td></tr>
    	<tr><td>Domains: 1</td></tr>
    	<tr><td>Subdomains: 1</td></tr>
    	<tr><td>FTP Accounts: 1</td></tr>
    	<tr><td>Emails (POP3): 2</td></tr>
    	<tr><td>WebMail: [ RoundCube|Horde|Squirrel ]: ΝΑΙ</td></tr>
    	<tr><td>Mysql Databases: 2</td></tr>
    	<tr><th>25 / έτος</th></tr>
    </table><br><br>
    
    <table CLASS = "sample">
    	<tr><th>SuperHost - Premium</th></tr>
    	<tr><td>Χώρος στο δίσκο: 4 GB</td></tr>
    	<tr><td>Μηνιαία Κίνηση δεδομένων: 40 GB</td></tr>
    	<tr><td>Control Panel: cPanel 11 & Fantastico Deluxe</td></tr>
    	<tr><td>Domains: 1</td></tr>
    	<tr><td>Subdomains: Απεριόριστα</td></tr>
    	<tr><td>FTP Accounts: Απεριόριστα</td></tr>
    	<tr><td>Emails (POP3): Απεριόριστα</td></tr>
    	<tr><td>WebMail: [ RoundCube|Horde|Squirrel ]: ΝΑΙ</td></tr>
    	<tr><td>Mysql Databases: Απεριόριστες</td></tr>
    	<tr><td>Δωρεάν 24/7 Τεχνική Υποστήριξη</td></tr>
    	<tr><th>50 / έτος</th></tr>
    </table><br><br>
    
    <table CLASS = "sample">
    	<tr><th>SuperHost - Premium</th></tr>
    	<tr><td>Χώρος στο δίσκο: 4 GB</td></tr>
    	<tr><td>Μηνιαία Κίνηση δεδομένων: 40 GB</td></tr>
    	<tr><td>Control Panel: cPanel 11 & Fantastico Deluxe</td></tr>
    	<tr><td>Domains: 1</td></tr>
    	<tr><td>Subdomains: Απεριόριστα</td></tr>
    	<tr><td>FTP Accounts: Απεριόριστα</td></tr>
    	<tr><td>Emails (POP3): Απεριόριστα</td></tr>
    	<tr><td>WebMail: [ RoundCube|Horde|Squirrel ]: ΝΑΙ</td></tr>
    	<tr><td>Mysql Databases: Απεριόριστες</td></tr>
    	<tr><td>Δωρεάν 24/7 Τεχνική Υποστήριξη</td></tr>
    	<tr><th>50 / έτος</th></tr>
    </table><br><br>
    Those are the table that appear verically and i would like them to appear horizontally separated of course by some space.

    Can you tell me how please?
    What is now proved was once only imagined!
  12. #7
  13. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,280
    Rep Power
    13
    please help
    What is now proved was once only imagined!
  14. #8
  15. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,280
    Rep Power
    13
    Code:
    <body style="background-image: url('/data/images/vortex.jpg')" 
    
    table.sample { 
            float: left; 
            margin-right: .5em; 
            border-width: 6px; 
            border-style: outset; 
            border-color: gold; 
            background-color: purple; 
    } 
    table.sample th { 
            border-width: 1px; 
            padding: 2px; 
            border-style: inset; 
            border-color: orange; 
            font-family: Segoe Script; 
            font-size: medium; 
            color: white; 
            background-color: orangered; 
    } 
    table.sample td { 
            border-width: 1px; 
            padding: 2px; 
            border-style: inset; 
            border-color: orange; 
            font-family: Segoe Print; 
            font-size: small; 
            color: lime; 
            background-color: black; 
    } 
    </style>

    but look how the outcome appears now: http://superhost.gr

    What am i doing wrong? I have tried to float the table but it doesnt appear to be working.
    What is now proved was once only imagined!
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure it's set it to use "CSS level 3".)

    The <style> start tag is missing. Also <style> elements should go between the <head> and </head> tags. You're also missing a doctype and are using obsolete <center> elements.

    Add this before the <html> tag:
    Code:
    <!DOCTYPE html>
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,280
    Rep Power
    13
    Thank you i ahve correctd this!

    What do you mean by iam using obsolete <center> elemenents?

    It is need to align text!
    What is now proved was once only imagined!
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    What do you mean by iam using obsolete <center> elemenents?

    It is need to align text!
    It's in the list of obsolete elements. CSS should be used to align things. Four ways to Center Elements with CSS

    Also are you aware that single column tables are a misuse of the <table> elements? I suggest you learn how semantics apply to [X]HTML.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  22. #12
  23. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2003
    Location
    Thessaloniki
    Posts
    1,280
    Rep Power
    13
    Code:
    <style>
    table.sample {
    	display: inline-block;
    	margin-left: auto;
    	margin-right: auto;
    	border-width: 7px;
    	border-style: outset;
    	border-color: gold;
    	background-color: red;
    	width: 23%;
    }
    table.sample th {
    	text-align: center;
    	border-width: 1px;
    	padding: 2px;
    	border-style: inset;
    	border-color: orange;
    	font-family: Segoe Script;
    	font-size: big;
    	color: white;
    	background-color: orangered;
    }
    table.sample td {
    	text-align: left;
    	border-width: 1px;
    	padding: 2px;
    	border-style: inset;
    	border-color: orange;
    	font-family: Segoe Print;
    	font-size: medium;
    	color: lime;
    	background-color: black;
    }
    </style>
    Look at superhost.gr now! is beautifull. 2 issues:

    a) At the 1st table it has too much red at the right, i dont know how to call this.
    b) in the next 4 tables in the other row i want more spaces between tables.

    the style iam using is:
    What is now proved was once only imagined!
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    677
    Rep Power
    7
    Just a slight note here...

    Do you know the entire purpose to the <BR /> tag? This is the same as hitting enter in a text file. Tis a carriage return/line break. You are telling each table to go below one another on a new line with this placed after each one...

IMN logo majestic logo threadwatch logo seochat tools logo