SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question regarding tables

    Say that i have the following table. How can I do so that the three column takes up as much space as the other six?

    In other words i want the three columns below(table cell 1, borttagit,tablecell3) to be the same width as the other six table cells.

    How can this be done? I tried limiting the table width to 600px and then set each of those columns to 200 px but didnt work, the table expanded.

    And if this is imposible to make in tables or <tbodys> how can i achieve this?

    I would like to merge cells like you can in dreamweaver.

    thanks



    Code:
    <table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="600" cellpadding="3" cellspacing="3">
    		<tr>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    	</tr>
    	<tr>
    		<td style="width: 200px;">Table Cell1</td>
    		<td style="width: 200px;">Borttagit</td>
    		<td style="width: 200px;">Table Cell2</td>
    	</tr>
    
    	<tr>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    		<td>Table Cell</td>
    	</tr>
    </table>

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The most crude way to do it would be to remove the three style values and use <td colspan="2"> on the three TD and thus those three cells would span 2 columns a piece thus equalling six cells in width.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    never mind i found it, admin can remove this thread

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On the other hand, can this colspan="2" be declared in the css or does it have to be declared to the <td> directly?

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    rowspan and colspan are HTML attributes... when someone is spanning more than one row or column, then the idea is that it's for content reasons (it affects the information inside the td).

    Your demo table code above has no meaning, so it's hard to say, but normally, you'd have table headers with th's in them, and if Borttagit belonged under three table headers then it's correct to use the attributes in the HTML (that and I don't really know of a way to do it with CSS because the structure of a table IS its meaning).

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK thanks for the reply.
    One more queastion, how do you forbid a text to make a linebreak??
    for example i have for example three letters 34&#37;. When i add a "-" sign in front it automaticly make a new line and put the "-" sign and then new line 34%.

    I want it to be -34% on in one row. How can I tell in css that it shall not make a new line?

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    In css, it would be
    theelement {
    white-space: nowrap;
    }
    another CSS option is to ensure your cols are wide enough that no browser would consider wrapping the numbers.

    However, it's the number "negative thirty-four percent" right? So it makes sense to do this in HTML (if there were no CSS, you still need -34% don't you?).

    Unfortunately the only tag I can think of is the nobr tag, which should get flagged as invalid as it's not recognised by the w3c.

    Some browsers will break at a - while others don't. Possibly a better way is to manually code in the correct character (the - button on your keyboard is a sort of "everything but mostly minus and hyphen" key). Technically a minus used for negative numbers is a hair longer than a hyphen.

    & # 8722; without spaces is the code you would have in your HTML. I do not know if the browsers who wrap at a - will wrap on that.

    One issue with using a character like that is, possibly some web fonts (even popular ones) won't recognise that character and may add a box or ? in place of it.. test it and see. Minus should be pretty popular though, but I ran into trouble when using the hyphen bullet (for lists). : )


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
  •