Column width in a CSS table

Discussion in 'HTML' started by Cogito, May 27, 2005.

  1. Cogito

    Cogito Guest

    I am trying to incorporate a css table into a page without much
    success.
    I have copied a css table from somewhere and I use it as a prototype.
    There are however, a zillion attributes in the copied .css file and
    I'm not quite sure what does what.
    (does css actually saves work?)
    In particular, I can't figure out what determines the width of each
    column.
    My copied table looks good, but the table I created (after hours of
    work) has enormously wide columns.
    How can I control it?

    And, if you happen to have a good (and not too complicated) example of
    a css table it would be of great help.
    Cogito, May 27, 2005
    #1
    1. Advertising

  2. Cogito

    Spartanicus Guest

    Cogito <> wrote:

    >I am trying to incorporate a css table into a page without much
    >success.


    You are aware that IE doesn't support css tables I hope?

    >In particular, I can't figure out what determines the width of each
    >column.


    Controlling the width is similar to html tables.

    >My copied table looks good, but the table I created (after hours of
    >work) has enormously wide columns.


    A url would have helped.

    >And, if you happen to have a good (and not too complicated) example of
    >a css table it would be of great help.


    http://homepage.ntlworld.com/spartanicus/css-table.htm

    This leaves out the possible confusing aspect of anonymous table objects
    ( http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes )

    --
    Spartanicus
    Spartanicus, May 27, 2005
    #2
    1. Advertising

  3. Cogito

    Jim Scott Guest

    On Fri, 27 May 2005 15:20:40 GMT, Spartanicus wrote:

    > Cogito <> wrote:
    >
    >>I am trying to incorporate a css table into a page without much
    >>success.

    >
    > You are aware that IE doesn't support css tables I hope?


    What nonsense. My entire site is made from css tables.
    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, May 27, 2005
    #3
  4. Cogito

    Spartanicus Guest

    Jim Scott <> wrote:

    >> You are aware that IE doesn't support css tables I hope?

    >
    >What nonsense. My entire site is made from css tables.


    Apparently you don't know what css tables are (many people don't). Have
    a look at the example I provided with IE and then with a proper browser.

    --
    Spartanicus
    Spartanicus, May 27, 2005
    #4
  5. Cogito

    Jim Scott Guest

    > And, if you happen to have a good (and not too complicated) example of
    > a css table it would be of great help.


    Here you are.
    It's not mine but was recommended here.
    Use TopStyle Lite to edit it.

    table.sample {
    width: 100%;
    height: 100%;
    border-width: 0px 0px 0px 0px;
    border-spacing: 0px 0px;
    border-style: none none none none;
    border-color: gray gray gray gray;
    border-collapse: separate;
    background-color: transparent;
    text-align: center;
    font-size: small;
    font-weight: bold;

    }
    table.sample th {
    border-width: 0px 0px 0px 0px;
    padding: 5px 5px 5px 5px;
    border-style: none none none none;
    border-color: gray gray gray gray;
    background-color: transparent;
    -moz-border-radius: 0px 0px 0px 0px;
    }
    table.sample td {
    border-width: 0px 0px 0px 0px;
    padding: 5px 5px 5px 5px;
    border-style: none none none none;
    border-color: gray gray gray gray;
    background-color: transparent;
    -moz-border-radius: 0px 0px 0px 0px;

    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, May 27, 2005
    #5
  6. On Fri, 27 May 2005 15:49:49 GMT, Jim Scott <> wrote:

    >> And, if you happen to have a good (and not too complicated) example of
    >> a css table it would be of great help.

    >
    > Here you are.
    > It's not mine but was recommended here.


    Come again? Never! Not for the use OP asks for.

    > Use TopStyle Lite to edit it.
    >
    > table.sample {
    > width: 100%;
    > height: 100%;


    <snip useless info>

    Not as a CSS-table. This is merely some CSS to make a table look like you want
    it to look, in some modern graphical browsers.

    Try reading and understanding
    <http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display> and
    <http://www.w3.org/TR/CSS2/tables.html#q2>. Look for any display property value
    with 'table' in it. Then compare it with
    <http://www.w3.org/TR/CSS2/tables.html#q1>. It's easy to spot the difference,
    but that doesn't make it less difficult to understand appearently.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, May 27, 2005
    #6
  7. Cogito

    Steve Pugh Guest

    Jim Scott <> wrote:
    >On Fri, 27 May 2005 15:20:40 GMT, Spartanicus wrote:
    >> Cogito <> wrote:
    >>
    >>>I am trying to incorporate a css table into a page without much
    >>>success.

    >>
    >> You are aware that IE doesn't support css tables I hope?

    >
    >What nonsense. My entire site is made from css tables.


    If you mean the site in your sig -
    http://freespace.virgin.net/mr.jimscott/ - that doesn't use a single
    CSS table. It uses HTML tables. Read the CSS spec to see what everyone
    else is talking about.

    Steve
    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, May 27, 2005
    #7
  8. Cogito

    Jim Scott Guest

    On Fri, 27 May 2005 20:33:14 +0100, Steve Pugh wrote:

    > Jim Scott <> wrote:
    >>On Fri, 27 May 2005 15:20:40 GMT, Spartanicus wrote:
    >>> Cogito <> wrote:
    >>>
    >>>>I am trying to incorporate a css table into a page without much
    >>>>success.
    >>>
    >>> You are aware that IE doesn't support css tables I hope?

    >>
    >>What nonsense. My entire site is made from css tables.

    >
    > If you mean the site in your sig -
    > http://freespace.virgin.net/mr.jimscott/ - that doesn't use a single
    > CSS table. It uses HTML tables. Read the CSS spec to see what everyone
    > else is talking about.
    >
    > Steve


    So how come I use table.css to get them there?
    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, May 28, 2005
    #8
  9. Cogito

    Cogito Guest

    On Fri, 27 May 2005 15:20:40 GMT, Spartanicus
    <> wrote:

    >A url would have helped.


    Here is my example:
    http://users.bigpond.net.au/blackbox/a9/dailydose.html

    In IE it looks like it is intended to, except that the table is way
    too big. In FF, the grey background is only on the sides. Without the
    table it forms a thin line at the top, as intended.
    The file table.css is the one that I have copied and modified.
    Cogito, May 28, 2005
    #9
  10. Cogito

    Cogito Guest

    On Fri, 27 May 2005 15:49:49 GMT, Jim Scott <>
    wrote:

    >> And, if you happen to have a good (and not too complicated) example of
    >> a css table it would be of great help.

    >
    >Here you are.
    >It's not mine but was recommended here.
    >Use TopStyle Lite to edit it.
    >
    >table.sample {
    > width: 100%;
    > height: 100%;
    > border-width: 0px 0px 0px 0px;
    > border-spacing: 0px 0px;
    > border-style: none none none none;
    > border-color: gray gray gray gray;
    > border-collapse: separate;
    > background-color: transparent;
    > text-align: center;
    > font-size: small;
    > font-weight: bold;
    >
    >}
    >table.sample th {
    > border-width: 0px 0px 0px 0px;
    > padding: 5px 5px 5px 5px;
    > border-style: none none none none;
    > border-color: gray gray gray gray;
    > background-color: transparent;
    > -moz-border-radius: 0px 0px 0px 0px;
    >}
    >table.sample td {
    > border-width: 0px 0px 0px 0px;
    > padding: 5px 5px 5px 5px;
    > border-style: none none none none;
    > border-color: gray gray gray gray;
    > background-color: transparent;
    > -moz-border-radius: 0px 0px 0px 0px;



    This does not seem to work.
    I need a complete working example to understand how it all fits
    together.
    Cogito, May 28, 2005
    #10
  11. On Fri, 27 May 2005 23:04:26 GMT, Jim Scott <> wrote:

    > On Fri, 27 May 2005 20:33:14 +0100, Steve Pugh wrote:
    >
    >> Jim Scott <> wrote:
    >>
    >>> On Fri, 27 May 2005 15:20:40 GMT, Spartanicus wrote:
    >>>
    >>>> You are aware that IE doesn't support css tables I hope?
    >>>
    >>> What nonsense. My entire site is made from css tables.

    >>
    >> If you mean the site in your sig -
    >> http://freespace.virgin.net/mr.jimscott/ - that doesn't use a single
    >> CSS table. It uses HTML tables. Read the CSS spec to see what everyone
    >> else is talking about.
    >>

    > So how come I use table.css to get them there?


    Like I pointed out to you in my message
    <http://groups.google.com/groups?selm=opsrfzgjtvx5vgts@zoete_b>:

    <quote>
    Try reading and understanding
    <http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display>
    and <http://www.w3.org/TR/CSS2/tables.html#q2>. Look for any display
    property value with 'table' in it. Then compare it with
    <http://www.w3.org/TR/CSS2/tables.html#q1>. It's easy to spot the
    difference, but that doesn't make it less difficult to understand
    appearently.
    </quote>

    And stop making a fool of yourself.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, May 28, 2005
    #11
  12. Cogito

    Spartanicus Guest

    Re: Using CSS to style a HTML table (was: Column width in a CSS table)

    Cogito <> wrote:

    [About CSS tables]

    >>A url would have helped.

    >
    >Here is my example:
    >http://users.bigpond.net.au/blackbox/a9/dailydose.html


    Like Jim Scott you too are using the wrong terminology, what you have
    there is *not* a CSS table, but an HTML table styled with CSS.

    When you post an example it's rather rude to expect us to first correct
    your errors to see if there's a relation to the issue that you are
    experiencing, so you need to make sure your code validates. Your html
    doesn't:
    http://validator.w3.org/check?uri=http://users.bigpond.net.au/blackbox/a9/dailydose.html

    >In IE it looks like it is intended to, except that the table is way
    >too big. In FF, the grey background is only on the sides. Without the
    >table it forms a thin line at the top, as intended.


    The margin specified on #pagecontainer seems to throw IE.

    >The file table.css is the one that I have copied and modified.


    Copying and pasting someone else's css without a proper understanding of
    the language is bound to cause problems both for you as the "author" and
    the user. Learn the language first, then write your own code.

    --
    Spartanicus
    Spartanicus, May 28, 2005
    #12
  13. Cogito

    Cogito Guest

    Re: Using CSS to style a HTML table (was: Column width in a CSS table)

    On Sat, 28 May 2005 06:34:48 GMT, Spartanicus
    <> wrote:

    >Cogito <> wrote:
    >
    >[About CSS tables]
    >
    >>>A url would have helped.

    >>
    >>Here is my example:
    >>http://users.bigpond.net.au/blackbox/a9/dailydose.html

    >
    >Like Jim Scott you too are using the wrong terminology, what you have
    >there is *not* a CSS table, but an HTML table styled with CSS.
    >
    >When you post an example it's rather rude to expect us to first correct
    >your errors to see if there's a relation to the issue that you are
    >experiencing, so you need to make sure your code validates. Your html
    >doesn't:
    >http://validator.w3.org/check?uri=http://users.bigpond.net.au/blackbox/a9/dailydose.html
    >
    >>In IE it looks like it is intended to, except that the table is way
    >>too big. In FF, the grey background is only on the sides. Without the
    >>table it forms a thin line at the top, as intended.

    >
    >The margin specified on #pagecontainer seems to throw IE.
    >
    >>The file table.css is the one that I have copied and modified.

    >
    >Copying and pasting someone else's css without a proper understanding of
    >the language is bound to cause problems both for you as the "author" and
    >the user. Learn the language first, then write your own code.



    First you ask me to provide a link to my table than you tell me it's
    rude to expect…
    I'm not even aware of what this code validator is or does. All I
    wanted is to get a nicer looking table using css. As you could see,
    all I need is a simple 2 column table. If that is asking too much I
    can live with a simpler html table.
    Cogito, May 28, 2005
    #13
  14. Cogito

    Steve Pugh Guest

    Jim Scott <> wrote:

    >On Fri, 27 May 2005 20:33:14 +0100, Steve Pugh wrote:
    >
    >> Jim Scott <> wrote:
    >>>On Fri, 27 May 2005 15:20:40 GMT, Spartanicus wrote:
    >>>> Cogito <> wrote:
    >>>>
    >>>>>I am trying to incorporate a css table into a page without much
    >>>>>success.
    >>>>
    >>>> You are aware that IE doesn't support css tables I hope?
    >>>
    >>>What nonsense. My entire site is made from css tables.

    >>
    >> If you mean the site in your sig -
    >> http://freespace.virgin.net/mr.jimscott/ - that doesn't use a single
    >> CSS table. It uses HTML tables. Read the CSS spec to see what everyone
    >> else is talking about.
    >>

    >
    >So how come I use table.css to get them there?


    Because you decided to call one of your stylesheets table.css. The
    styles in table.css style your HTML tables, they do not create any CSS
    tables - do you see any display: table; or similar styles in there? I
    don't.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, May 29, 2005
    #14
  15. Cogito

    Cogito Guest

    On Sun, 29 May 2005 10:58:47 +0100, Steve Pugh <> wrote:

    >Because you decided to call one of your stylesheets table.css. The
    >styles in table.css style your HTML tables, they do not create any CSS
    >tables - do you see any display: table; or similar styles in there? I
    >don't.



    The truth to be said, I have no idea what a css table is.
    I have been dabbling with html coding (just for fun) for a while and
    occasionally I read this newsgroup. From it, I got the impression that
    css id the way to go. Fine. So I copied some code of what I thought
    was a css table with a view to teach myself basic css by experimenting
    and trying to understand how the code works. If this is not a css
    table, can you please show me a simple example of a css table with two
    columns and two rows?
    Cogito, May 29, 2005
    #15
  16. On Sun, 29 May 2005 13:31:46 GMT, Cogito <> wrote:

    > On Sun, 29 May 2005 10:58:47 +0100, Steve Pugh <> wrote:
    >
    >> Because you decided to call one of your stylesheets table.css. The
    >> styles in table.css style your HTML tables, they do not create any CSS
    >> tables - do you see any display: table; or similar styles in there? I
    >> don't.

    >
    >
    > The truth to be said, I have no idea what a css table is.


    Should have read the other posts in this thread too. Than you would have known
    by now.

    > If this is not a css
    > table, can you please show me a simple example of a css table with two
    > columns and two rows?
    >


    <ul style="display:table;">
    <li style="display:table-row;">
    <ul>
    <li style="display:table-cell;">
    length
    </li>
    <li style="display:table-cell;">
    width
    </li>
    </ul>
    </li>
    <li style="display:table-row;">
    <ul>
    <li style="display:table-cell;">
    a mile
    </li>
    <li style="display:table-cell;">
    and a half
    </li>
    </ul>
    </li>
    </ul>

    or perhaps

    <div style="display:table;">
    <div style="display:table-row;">
    <div style="display:table-cell;">
    length
    </div>
    <div style="dispaly:table-cell;">
    width
    </div>
    </div>
    <div style="display:table-row;">
    <div style="display:table-cell;">
    a mile
    </div>
    <div style="dispaly:table-cell;">
    and a half
    </div>
    </div>
    </div>

    The idea is that you can take anything and make it look like a table.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
    Barbara de Zoete, May 29, 2005
    #16
  17. Cogito

    Toby Inkster Guest

    Toby Inkster, May 29, 2005
    #17
  18. Cogito

    Cogito Guest

    Good news. After some trial and error I solved my problem.

    Now, my last two questions are:

    1
    In my .css file I have:

    body#homepage table.archivetable
    {
    margin-bottom:30px;
    width:100%;
    border-collapse:collapse;
    }

    …as well as many other attribute definitions for table.archivetable

    in my source .html file I have:

    <table class="archivetable">

    My question is: If I want to change the width attribute, say to 50%,
    do I have to hard code the change in the .css file
    or can I leave the .css file with 100% and override it on the <table
    class="archivetable"> tag?
    If the second option is possible could you please show me the syntax
    for it?


    2

    It seems that there are two ways to include the .css file into the
    source

    <link rel="StyleSheet" href="table.css" type="text/css" />
    and
    <style type="text/css" media="all">@import
    'table.css';</style>

    They both work well. What is the difference between them and which is
    the better one to use?
    Cogito, May 30, 2005
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    732
    Bruce Barker
    Oct 10, 2005
  2. Sean Jorden
    Replies:
    1
    Views:
    579
    laurie
    Aug 19, 2003
  3. Cal
    Replies:
    1
    Views:
    514
    Tim B
    Jan 8, 2007
  4. David Basford
    Replies:
    3
    Views:
    2,378
    BootNic
    Sep 30, 2007
  5. Carl Howarth

    DG Column Width vs Table Column Width

    Carl Howarth, Oct 22, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    247
    Eliyahu Goldin
    Oct 24, 2004
Loading...

Share This Page