|
|
Posted by Andy Dingley on 03/28/07 09:58
On 28 Mar, 06:20, Cogito <nos...@nospam.nospam> 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>
Navigation:
[Reply to this message]
|