Maintaining aspect ratio of a table

Discussion in 'HTML' started by Cogito, Mar 28, 2007.

  1. Cogito

    Cogito Guest

    I've constructed a table to look like a chessboard. The problem is
    that when it is displayed on different screens or when the window is
    resized, the table and squares no longer look like squares.
    Is there a way to define a table that will maintain a square aspect
    ratio as the screen is resized?
     
    Cogito, Mar 28, 2007
    #1
    1. Advertising

  2. Scripsit Cogito:

    > I've constructed a table to look like a chessboard.


    And what's the URL? The way in which you have written the table is more than
    all-important.

    > The problem is
    > that when it is displayed on different screens or when the window is
    > resized, the table and squares no longer look like squares.


    You did something wrong. (To get a more specific solution, specify a more
    specific problem, with a URL.)

    > Is there a way to define a table that will maintain a square aspect
    > ratio as the screen is resized?


    I'm afraid not, except by assigning explicit widths and heights for the
    cells, e.g. td { height: 1em; width: 1em; }. Additional rules may be needed
    if there is a real risk of content overflow in cells.

    You can make the width of a cell a percentage of available width, but
    there's no way (except client-side scripting) to make the height the same as
    the width then.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 28, 2007
    #2
    1. Advertising

  3. Cogito

    Cogito Guest

    On Wed, 28 Mar 2007 10:26:00 +0300, "Jukka K. Korpela"
    <> wrote:

    >Scripsit Cogito:
    >
    >> I've constructed a table to look like a chessboard.

    >
    >And what's the URL? The way in which you have written the table is more than
    >all-important.


    Here is the table:


    <html>

    <style>
    ..text {BACKGROUND-COLOR: #F5DEB3; text-align:center; FONT-FAMILY:
    ariel; FONT-SIZE: 11pt; font-weight:bold; color: #000080;}
    ..dark {BACKGROUND-COLOR: #B0C4DE; text-align:center; FONT-FAMILY:
    ariel; FONT-SIZE: 11pt; font-weight:bold;}
    ..light {BACKGROUND-COLOR: #eeeedd; text-align:center; FONT-FAMILY:
    ariel; FONT-SIZE: 11px; font-weight:bold;}
    </style>

    <table border=0 cellspacing=1 cellpadding=1 width="15%">
    <tr>
    <td class='dark'>1</td><td class='light'>2</td>
    <td class='dark'>3</td><td class='light'>4</td>
    <td class='dark'>5</td><td class='light'>6</td>
    <td class='dark'>7</td><td class='light'>8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td class='light'>2</td>
    <td class='dark'>3</td><td class='light'>4</td>
    <td class='dark'>5</td><td class='light'>6</td>
    <td class='dark'>7</td><td class='light'>8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td class='light'>2</td>
    <td class='dark'>3</td><td class='light'>4</td>
    <td class='dark'>5</td><td class='light'>6</td>
    <td class='dark'>7</td><td class='light'>8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td class='light'>2</td>
    <td class='dark'>3</td><td class='light'>4</td>
    <td class='dark'>5</td><td class='light'>6</td>
    <td class='dark'>7</td><td class='light'>8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td class='light'>2</td>
    <td class='dark'>3</td><td class='light'>4</td>
    <td class='dark'>5</td><td class='light'>6</td>
    <td class='dark'>7</td><td class='light'>8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td class='light'>2</td>
    <td class='dark'>3</td><td class='light'>4</td>
    <td class='dark'>5</td><td class='light'>6</td>
    <td class='dark'>7</td><td class='light'>8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td class='light'>2</td>
    <td class='dark'>3</td><td class='light'>4</td>
    <td class='dark'>5</td><td class='light'>6</td>
    <td class='dark'>7</td><td class='light'>8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td class='light'>2</td>
    <td class='dark'>3</td><td class='light'>4</td>
    <td class='dark'>5</td><td class='light'>6</td>
    <td class='dark'>7</td><td class='light'>8</td>
    </tr>
    </table>


    </html>
     
    Cogito, Mar 28, 2007
    #3
  4. Cogito

    Andy Dingley Guest

    On 28 Mar, 06:20, Cogito <> wrote:
    > I've constructed a table to look like a chessboard. The problem is
    > that when it is displayed on different screens or when the window is
    > resized, the table and squares no longer look like squares.


    Behaviour for a <table> is to partition the overall width equally for
    the columns, subject to their contents. The cells' height depends on
    their contents. Obviously these values could be set equal by fiddling
    one againt the other, but it's completely non-stable against the
    slightest changes.

    > Is there a way to define a table that will maintain a square aspect
    > ratio as the screen is resized?


    Yes, just set their height and width explicitly, using CSS. This isn't
    always going to be able to keep the squares square if you use huge
    text sizes or tiny windows, but it's pretty robust. Here's a crude
    example, hacked out of your own.

    PS - Read a good and current HTML tutorial. There was a lot wrong with
    your original code.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd" >
    <html lang="en" ><head><title>Chessboard</title>

    <style type="text/css" >
    ..text {
    background-color: #f5deb3;
    text-align:center;
    font-family: ariel;
    font-size: 11pt;
    font-weight:bold;
    color: #000080;
    }

    table.chessboard {
    margin: 2em auto;
    font-family: arial, sans-serif;
    font-size: 1em;
    text-align:center;
    font-weight: bold;
    }

    table.chessboard td {
    background-color: #eeeedd;

    width: 4em;
    height: 4em;
    }

    table.chessboard td.dark {
    background-color: #b0c4de;
    }
    </style>
    </head><body>

    <table class="chessboard" border="0" cellspacing="1"
    cellpadding="1" >
    <tr>
    <td class='dark'>1</td><td >2</td>
    <td class='dark'>3</td><td >4</td>
    <td class='dark'>5</td><td >6</td>
    <td class='dark'>7</td><td >8</td>
    </tr>
    <tr>
    <td >1</td><td class="dark" >2</td>
    <td >3</td><td class="dark" >4</td>
    <td >5</td><td class="dark" >6</td>
    <td >7</td><td class="dark" >8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td >2</td>
    <td class='dark'>3</td><td >4</td>
    <td class='dark'>5</td><td >6</td>
    <td class='dark'>7</td><td >8</td>
    </tr>
    <tr>
    <td >1</td><td class="dark" >2</td>
    <td >3</td><td class="dark" >4</td>
    <td >5</td><td class="dark" >6</td>
    <td >7</td><td class="dark" >8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td >2</td>
    <td class='dark'>3</td><td >4</td>
    <td class='dark'>5</td><td >6</td>
    <td class='dark'>7</td><td >8</td>
    </tr>
    <tr>
    <td >1</td><td class="dark" >2</td>
    <td >3</td><td class="dark" >4</td>
    <td >5</td><td class="dark" >6</td>
    <td >7</td><td class="dark" >8</td>
    </tr>
    <tr>
    <td class='dark'>1</td><td >2</td>
    <td class='dark'>3</td><td >4</td>
    <td class='dark'>5</td><td >6</td>
    <td class='dark'>7</td><td >8</td>
    </tr>
    <tr>
    <td >1</td><td class="dark" >2</td>
    <td >3</td><td class="dark" >4</td>
    <td >5</td><td class="dark" >6</td>
    <td >7</td><td class="dark" >8</td>
    </tr>
    </table>

    </body></html>
     
    Andy Dingley, Mar 28, 2007
    #4
  5. Cogito

    Cogito Guest

    This is just beautiful. Thank you very much.
    One small thing, is it possible to eliminate the thin white gap that
    surrounds each square?
     
    Cogito, Mar 28, 2007
    #5
  6. Scripsit Cogito:

    >> And what's the URL? The way in which you have written the table is
    >> more than all-important.

    >
    > Here is the table:


    Which of part of "what's the URL?" did you fail to understand?

    Anyway, the table doesn't contain any attempt at making the cells squares,
    so no wonder they aren't. I think I already wrote about the way to try to
    make them squares.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 28, 2007
    #6
  7. Scripsit Cogito:

    > This is just beautiful.


    Are you talking to someone? Please quote or paraphrase a key sentence or two
    so that everyone sees what you are commenting on.

    Andy's code was a good sketch, but it does not address your initial question
    about _maintaining_ the aspect ration in _scaling_ when the window is
    resized. And there is no way to do that. But if you are happy with the
    solution, then your problem was different from what you described.

    > One small thing, is it possible to eliminate the thin white gap that
    > surrounds each square?


    Well, Andy is using cellspacing="1". Can you guess how to modify it to
    remove the spacing between cells? There's also a CSS way to do that:
    table.chessboard { border-collapse: collapse; }

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 28, 2007
    #7
  8. Cogito

    dorayme Guest

    In article
    <>,
    "Andy Dingley" <> wrote:

    > On 28 Mar, 06:20, Cogito <> wrote:
    > > I've constructed a table to look like a chessboard. The problem is
    > > that when it is displayed on different screens or when the window is
    > > resized, the table and squares no longer look like squares.

    >
    > Behaviour for a <table> is to partition the overall width equally for
    > the columns, subject to their contents. The cells' height depends on
    > their contents.


    And this is easy if it really is for chess, just make sure all
    the chess piece pictures (not the pieces) are the same size.
    Ditto for other pure picture applications. Come to think of it,
    any content too. After all, what is the point of wanting the
    squares all the same dims if the content is not to fit well?

    I say this not for nothing. It is because of a willingness to
    talk about anything at all.

    --
    dorayme
     
    dorayme, Mar 28, 2007
    #8
    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. =?Utf-8?B?RGF2aWQgV2hpdGNodXJjaC1CZW5uZXR0?=

    Newbie: Image button aspect ratio

    =?Utf-8?B?RGF2aWQgV2hpdGNodXJjaC1CZW5uZXR0?=, Nov 6, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    1,216
    Scott M.
    Nov 7, 2004
  2. Arthur Hsu
    Replies:
    5
    Views:
    5,934
    Steven Cheng[MSFT]
    Dec 8, 2004
  3. mharness
    Replies:
    0
    Views:
    432
    mharness
    Sep 28, 2006
  4. -geek.com
    Replies:
    9
    Views:
    922
    Andy Peters
    Mar 19, 2007
  5. Andrew Poulos

    Resizing image while maintaining aspect ratio

    Andrew Poulos, Mar 31, 2009, in forum: Javascript
    Replies:
    2
    Views:
    116
    Thomas 'PointedEars' Lahn
    Apr 1, 2009
Loading...

Share This Page