Results 1 to 10 of 10

Thread: HTML Table Cells

  1. #1
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default HTML Table Cells

    Okay, this is my first post, I wasn't sure if my title was right


    Anyway, I need to do something like this:

    http://img855.imageshack.us/img855/9373/tableh.png

    I want each table cell to be its own height based on its text. I'll do anything for it

    Thanks!
    ~Techy

  2. #2
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    Be more specific.
    - Josh

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Tables don't work like that. I think you are asking if the rows and columns can act independently. No. Tables are grids where everything must line up. You can make a single cell fill multiple spaces (so it is twice, or three times, as wide or as tall as the others), but they can't be a random size.
    You could do that using divs and CSS, probably, though.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by JShor View Post
    Be more specific.
    Sorry


    Quote Originally Posted by djr33 View Post
    Tables don't work like that. I think you are asking if the rows and columns can act independently. No. Tables are grids where everything must line up. You can make a single cell fill multiple spaces (so it is twice, or three times, as wide or as tall as the others), but they can't be a random size.
    You could do that using divs and CSS, probably, though.
    Alright, I had thought that it would be possible w/ an outside table, with a table for each column though. But I found myself happy with a grid

  5. #5
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    Quote Originally Posted by djr33 View Post
    You could do that using divs and CSS, probably, though.
    Yes. You could create divs, define their height and their position them absolutely in the document or relative to its parent container.
    - Josh

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    You could also work out divs that automatically resize based on content. (At least height could automatically resize. Width would be harder.)

    How is the content generated? Is it always consistent? That will help us know what approach would be best.


    But if the grid works for you then that's fine.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #7
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Okay, I have a table, 3x3, then inside every cell, i have another table with 1x2.

    I need the top td of the inside table to be a constant height, for a title..

    My css for these:
    Code:
    body {
    color:white;
    font-family:Arial;
    background:url('/style/images/wall.png');
    background-attachment:fixed;
    background-position:center;
    }
    
    #wrapper {
        background:url("/style/images/transm.png");
    	width: 85%;
    	margin: 0px auto;
    	background-color: #;
    	border: 1px solid #;
    	padding: 5px;
    	min-width: 951px;
    }
    
    #navigation {
    font-size:13px;
    font-family:Arial;
    font-weight:bold;
    text-align:center;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    }
    
    #navigation a:link {
    color:gold;
    text-decoration:none;
    }
    
    #navigation a:visited {
    color:gold;
    text-decoration:none;
    }
    
    #navigation a:active {
    color:red;
    text-decoration:none;
    }
    
    #navigation a:hover {
    color:red;
    text-decoration:none;
    }
    
    /* PORTAL */
    
    /* PORTAL MODULE */
    
    #module {
    text-align:center;
    font-size:15px;
    }
    
    /* PORTAL MODULE NAMES */
    
    #toptd {
    text-align:center;
    font-weight:bold;
    font-family:Arial;
    font-size:13px;
    height:10%;
    }
    
    /* PORTAL TABLE */
    
    #homemap {
    background-color:#;
    width:100%;
    text-align:center;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    }
    
    /* Floating Username */
    #userfl {
    float: right;
    top:0px;
    right:0px;
    padding:0px;
    text-align:center;
    vertical-align:text-middle;
    text-indent: 11px;
    font-family:Arial;
    font-size:13px;
    position: fixed;
    width:152px;
    height:23px;
    margin:0 0 0px 0px;
    background:url(http://img17.imageshack.us/img17/3509/longbend.png);
    overflow:hide;
    }
    
    a {
    background: url("/style/images/extlink.gif") no-repeat 100% 50%;
    padding-right: 7px; /* the width of your image */
    text-decoration:none;
    font-weight:bold;
    font-size:13px;
    color:orange;
    }
    
    a:hover {
    color:lightblue;
    }
    
    a:active {
    color:blue;
    }
    
    a:visited {
    color:orange;
    }
    
    #footer {
    font-size: 12px;
    text-align:center;
    font-family: Verdana, Geneva, Arial, sans-serif;
    border: 1px solid blue;
    float: left;
    bottom:26px;
    left:0px;
    position: fixed;
    border-bottom: 0.5px solid grey;
    width:100%;
    height:29px;
    margin:0 0 0px 0px;
    background:url("/style/images/social.png") center;
    background-repeat: repeat-x;
    overflow:show;
    }
    My html:
    Code:
    <div id="wrapper">
    <?php include("style/menu.php"); ?>
    <table id="homemap" border="1" bordercolor="blue" cellspacing="0">
    <!--TOP-->
    <tr>
    <td width="25%">
    <table id="module" border="0" bordercolor="" style="background-color:" width="100%" cellpadding="3" cellspacing="3" style="text-align:center;">
    	<tr>
    		<td id="toptd">TITLE<hr /></td>
    	</tr>
    	<tr>
    		<td><?php
    if ($user->data['user_id'] == ANONYMOUS)
    {
       echo "<form name='log' method='post' action='forum/ucp.php?mode=login'>Username:<br /><input class='post' type='text' name='username' size='25' value='' tabindex='1' /><br />Password:<br /><input class='post' type='password' name='password' size='25' tabindex='2' /><br /><input type='hidden' name='sid' value='-' /><input type='hidden' name='redirect' value='index.php' /><input type='submit' name='login' class='btnmain' value='Login' tabindex='5' /><input type='hidden' name='redirect' value='/index.php' /></form><br><div align='center'><a href='/forum/ucp.php?mode=register'>Register</a> <img src='/style/images/menu_sep.png'> <a href='/forum/ucp.php?mode=sendpassword'>I forgot my password</a>";
    }
    
    else
    {
       echo 'Thanks for logging in!, ' . $user->data['username_clean'];
    }
    ?>
    </td>
    	</tr>
    </table>
    </td>
    <td>
    <table id="module" border="0" bordercolor="" style="background-color:" width="100%" cellpadding="3" cellspacing="3">
    	<tr>
    		<td id="toptd" height="10%">TITLE<hr /></td>
    	</tr>
    	<tr>
    		<td height="90%">Content</td>
    	</tr>
    </table>
    </td>
    <td width="25%">
    <table id="module" border="0" bordercolor="" style="background-color:" width="100%" cellpadding="3" cellspacing="3">
    	<tr>
    		<td id="toptd"></td>
    	</tr>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    </td>
    </tr>
    <!--MIDDLE-->
    <tr>
    <td>
    <table id="module" border="0" bordercolor="" style="background-color:" width="100%" cellpadding="3" cellspacing="3">
    	<tr>
    		<td id="toptd">TITLE<hr /></td>
    	</tr>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    </td>
    <td>
    <table id="module" border="0" bordercolor="" style="background-color:" width="100%" cellpadding="3" cellspacing="3">
    	<tr>
    		<td id="toptd"></td>
    	</tr>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    </td>
    <td>
    <table id="module" border="0" bordercolor="" style="background-color:" width="100%" cellpadding="3" cellspacing="3">
    	<tr>
    		<td id="toptd"></td>
    	</tr>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    </td>
    </tr>
    <!--BOTTOM-->
    <tr>
    <td>
    <table id="module" border="0" bordercolor="" style="background-color:" width="100%" cellpadding="3" cellspacing="3">
    	<tr>
    		<td></td>
    	</tr>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    </td>
    <td>
    <table id="module" border="0" bordercolor="" style="background-color:" width="100%" cellpadding="3" cellspacing="3">
    	<tr>
    		<td></td>
    	</tr>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    </td>
    <td>
    <table id="module" border="0" bordercolor="" style="background-color:" width="100%" cellpadding="3" cellspacing="3">
    	<tr>
    		<td></td>
    	</tr>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    The Title's are not evenly aligned... I need them to be, because the content pushes it up or down, I just want it to be at a static position. I am not sure what I have done wrong

  8. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Holy Cow! That is going to be a ton of tables >.<

  9. #9
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Are you mainly talking about the middle cell? Do you need that one to be up with the other?

  10. #10
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Solved. I just decided to code with jQuery to make an igoogle-type interface.

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
  •