Maintaining aspect ratio of a table

C

Cogito

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?
 
J

Jukka K. Korpela

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.
 
C

Cogito

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:


<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>
 
A

Andy Dingley

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>
 
C

Cogito

This is just beautiful. Thank you very much.
One small thing, is it possible to eliminate the thin white gap that
surrounds each square?
 
J

Jukka K. Korpela

Scripsit Cogito:
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.
 
J

Jukka K. Korpela

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; }
 
D

dorayme

"Andy Dingley said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top