style - table css

¿Cómo harías TU esto: tablas o CSS?

Question

Puzzle http://sontag.ca/TheChallenge/tiles.gif Grinch http://sontag.ca/gif/grinch.gif

Parte I

Este diseño se puede hacer simplemente con 2 tablas HTML, una anidada dentro de la otra, o incluso con una sola tabla.

También se puede hacer con CSS, aunque podría implicar un poco más de pensamiento .

Puede que no sea un diseño del mundo real, pero he visto páginas que son similares. Considera esto como un enigma; un ejercicio para mejorar tus habilidades de CSS.

Para hacer las cosas un poco más interesantes, enmarqué la pregunta en una pequeña página web de 2 partes llamada The Challenge . Examinaremos el código y la pregunta: ¿ Diseño con tablas o CSS? , lado a lado, golpe por golpe, mientras nuestros dos oponentes luchan por la supremacía del código.

La Parte I presenta cómo surgió el desafío . Espero que disfrutes.

La Parte II es La Decisión . Puede que se sorprenda .

Parte II

Me sorprendió la rapidez con la que aparecieron las buenas respuestas minutos después de haber publicado. Fue una experiencia humillante. No deseo competir en pruebas contrarreloj contigo.

PERO, dicho todo esto, al examinar de cerca las soluciones ofrecidas, me di cuenta de que ninguna de las soluciones de CSS (incluida la mía en ese momento) funcionaba tan bien como cualquiera de las soluciones de mesa ofrecidas. El desafío consistía en que CSS era mejor que las tablas para cualquier solución de diseño.

Así que agregué 3 nuevas reglas (recuerde, una de las reglas es que las reglas se pueden cambiar). Esto molestó a algunas personas. Entonces agregué algunas explicaciones coloridas sobre por qué se cambiaron las reglas. Creo que esto los molestó aún más.

1. Nuestro jardín es tener una cerca a su alrededor; algo para diferenciarlo de cualquier entorno lúgubre en el que se encuentre; y no es demasiado caro, pero es fácil de mantener limpio. Así que quiero un borde negro de 1 píxel alrededor del jardín
2. Los habitantes de cada parcela de jardín (los personajes) deben ser negros o blancos, dependiendo de cuál los muestre mejor en su jardín. También son todos de ascendencia cursiva. No hay cursivas entre ellos. ;-)
3. El jardín es reubicable, es decir, puedo tener este jardín, en cualquier lugar de la página (sin posicionamiento absoluto).

Este es el aspecto final del resultado final (color de fondo opcional):

texto alternativo http://sontag.ca/gif/garden.gif

Mis disculpas por los cambios de reglas caprichosas y de último minuto. Lo tuve mal Los habitantes de cada parcela de jardín son artesanos, especialistas a mano. Son descendientes de la familia cursiva y deben su sentido del estilo a la cursiva .

El jardín debe ser reubicable porque ambos tipos de jardines (tabla y CSS) deben coexistir en la misma página. Puedo equivocarme al decir esa position:absolute reglas position:absolute no están permitidas. Si puede lograr que trabajen en este contexto, entonces tendrá más poder para usted. Sin duda serán aceptados.

Pedí una valla alrededor de la parcela porque cada tipo de jardín va a ser plantado en un campo con un fondo naranja muy similar al color de algunas de las flores que cultivamos.

Vivo en Holanda ahora, y la temporada de Tulip se acerca rápidamente. Si vuela sobre Holanda en las próximas semanas, y es un día claro (algo raro aquí), el paisaje debajo de usted se verá bastante similar a este ejercicio tonto.

No estoy loco por la naranja pero me gusta y admiro a los holandeses, por eso tenemos un fondo anaranjado, un homenaje a mi país anfitrión. :-)

Parte III

He publicado la respuesta de la tabla de Ted del Desafío a continuación junto con esta imagen

texto alternativo http://sontag.ca/gif/garden2.gif

porque los ocupantes se pueden agregar fácilmente a las parcelas de jardín sin tocar las reglas de CSS: todo se centra automáticamente.

¿Puedes hacer esto con CSS? ¿Puedes talar el árbol más poderoso del bosque con ... un arenque?

Actualización : la respuesta de Charlie está aquí.

Answer 1

Aquí hay tres soluciones.

El marcado:

<div id="outer">
<div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div>
<div id="a4">4</div>
<div id="a5">5</div>
<div id="a6">6</div>
<div id="a7">7</div>
<div id="a8">8</div>
<div id="a9">9</div>
</div>

La hoja de estilo básica (dimensiones y color):

#outer {
width: 20em;
height: 20em;
}
#a1 {
background-color: #C0C0C0;
width: 80%;
height: 20%;
}
#a2 {
background-color: #800000;
width: 20%;
height: 80%;
}
#a3 {
background-color: #000080;
width: 20%;
height: 80%;
}
#a4 {
background-color: #FF0000;
width: 40%;
height: 20%;
}
#a5 {
background-color: #0000FF;
width: 20%;
height: 40%;
}
#a6 {
background-color: #FFFF00;
width: 20%;
height: 40%;
}
#a7 {
background-color: #FFFFFF;
width: 20%;
height: 20%;
}
#a8 {
background-color: #008000;
width: 40%;
height: 20%;
}
#a9 {
background-color: #FFA500;
height: 20%;
width: 80%;
}

Y ahora el posicionamiento:

• Usando float :

  #a1 {
  float: left;
  }
  #a2 {
  float: right;
  }
  #a3 {
  float: left;
  }
  #a4 {
  float: left;
  }
  #a5 {
  float: right;
  }
  #a6 {
  float: left;
  }
  #a7 {
  float: left;
  }
  #a8 {
  float: right;
  }
  #a9 {
  float: right;
  }

• Usando position :

  #outer {
  position: relative;
  }
  #outer div {
  position: absolute;
  }
  #a1 {
  top: 0;
  left: 0;
  }
  #a2 {
  top: 0;
  right: 0;
  }
  #a3 {
  top: 20%;
  left: 0;
  }
  #a4 {
  top: 20%;
  left: 20%;
  }
  #a5 {
  top: 20%;
  right: 20%;
  }
  #a6 {
  top: 40%;
  left: 20%;
  }
  #a7 {
  top: 40%;
  left: 40%;
  }
  #a8 {
  bottom: 20%;
  right: 20%;
  }
  #a9 {
  bottom: 0;
  right: 0;
  }

• Usando margin :

  #a1 {
  }
  #a2 {
  margin: -20% -80% 0 80%;
  }
  #a3 {
  margin: -60% 0 0 0;
  }
  #a4 {
  margin: -80% -20% 0 20%;
  }
  #a5 {
  margin: -20% -60% 0 60%;
  }
  #a6 {
  margin: -20% -20% 0 20%;
  }
  #a7 {
  margin: -40% -40% 0 40%;
  }
  #a8 {
  margin: 0 -40% 0 40%;
  }
  #a9 {
  margin: 0 -20% 0 20%;
  }

Answer 2

Aquí hay un ejemplo que no usa posicionamiento absoluto, no usa tabla-celda, y es válido en IE6-8, FF, etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Terrible Ted''s Table Layout</title>
<style type="text/css">
#box{border:1px solid #000; width:175px; height:175px; color:navy; font-family:"Comic Sans MS"; font-size:13px; font-style:italic; text-align:center;}
div {float:left}
#c1, #c3, #c4, #c7, #c8, #c9{height:35px; line-height:35px}
#c2, #c3{height:140px;line-height:140px}
#c5, #c6{height:70px; line-height:70px}
#c1, #c9{width:140px}
#c2, #c3, #c5, #c6, #c7{width:35px}
#c4, #c8{width:70px}
#c6, #c7 {margin-top:-35px}
#c1{background-color:silver}
#c2{background-color:maroon; float:right}
#c3{background-color:navy}
#c4{background-color:red}
#c5{background-color:blue}
#c6{background-color:yellow}
#c7{background-color:white}
#c8{background-color:green}
#c9{background-color:orange}
</style>
</head>
<body>
<div id="box">
<div id="c1">1</div>
<div id="c2">2</div>
<div id="c3">3</div>
<div id="c4">4</div>
<div id="c5">5</div>
<div id="c6">6</div>
<div id="c7">7</div>
<div id="c8">8</div>
<div id="c9">9</div>
</div>
</body>
</html>

Answer 3

Aquí tienes, menos líneas que cualquier mal uso de las etiquetas de tabla pueden proporcionar:

<img
src="http://sontag.ca/TheChallenge/tiles.gif"
alt="nine assorted coloured rectangles"
/>

:PAG

Answer 4

Brevedad del marcado ....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
.garden {
position: relative;
width: 175px;
height: 175px;
font-family: ''Comic Sans MS'', cursive;
border: 1px solid;
color: #000;
}
.garden div {
position: absolute;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
}
.garden div:first-child {
width: 140px;
background: silver;
}
.garden div:first-child + div {
right: 0;
height: 140px;
line-height: 140px;
color: #fff;
background: maroon;
}
.garden div:first-child + div + div {
top: 35px;
height: 140px;
line-height: 140px;
color: #fff;
background: navy;
}
.garden div:first-child + div + div + div {
top: 35px;
left: 35px;
width: 70px;
background: red;
}
.garden div:first-child + div + div + div + div {
top: 35px;
right: 35px;
height: 70px;
line-height: 70px;
background: blue;
}
.garden div:first-child + div + div + div + div + div {
top: 70px;
left: 35px;
height: 70px;
line-height: 70px;
background: yellow;
}
.garden div:first-child + div + div + div + div + div + div {
top: 70px;
left: 70px;
background: white;
}
.garden div:first-child + div + div + div + div + div + div + div {
top: 105px;
left: 70px;
width: 70px;
background: green;
}
.garden div:first-child + div + div + div + div + div + div + div + div{
bottom: 0;
right: 0;
width: 140px;
background: orange;
}
</style>
</head>
<body>
<div class="garden">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>

link

Answer 5

Creo que hemos demostrado que hay más de una forma de hacer esto. La etiqueta de table y CSS son ambas opciones viables.

En lugar de agregar otra forma de completar el desafío, me gustaría decir que, ya sea más fácil o más difícil, más simple o más complejo: las tablas en HTML se deben usar para mostrar datos tabulares.

• Las tablas están hechas para datos tabulares.
• CSS está hecho para el estilo / presentación.

Answer 6

Esto coincide exactamente con el ejemplo de su tabla, incluido el texto centrado vertical y horizontalmente (que nadie más lo ha hecho hasta ahora).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Boxy Boxes in a Box</title>
<style type="text/css" media="screen">
#container {position: relative; margin: 100px auto; height: 175px; width: 175px; font-style: italic; }
.box {width: 35px; height: 35px; position: absolute; text-align: center; line-height: 35px;}
#box_1 {top: 0; left: 0; width: 140px; background-color: silver;}
#box_2 {top: 0; right: 0; height: 140px; background-color: maroon; line-height: 140px;}
#box_3 {top: 35px; left: 0; height: 140px; background-color: navy; line-height: 140px;}
#box_4 {top: 35px; left: 35px; width: 70px; background-color: red;}
#box_5 {top: 35px; right: 35px; height: 70px; background-color: blue; line-height: 70px;}
#box_6 {top: 70px; left: 35px; height: 70px; background-color: yellow; line-height: 70px;}
#box_7 {top: 70px; left: 70px; background-color: white;}
#box_8 {bottom: 35px; right: 35px; width: 70px; background-color: green;}
#box_9 {bottom: 0; right: 0; width: 140px; background-color: orange;}
</style>
</head>
<body>
<div id="container">
<div id="box_1" class="box">1</div>
<div id="box_2" class="box">2</div>
<div id="box_3" class="box">3</div>
<div id="box_4" class="box">4</div>
<div id="box_5" class="box">5</div>
<div id="box_6" class="box">6</div>
<div id="box_7" class="box">7</div>
<div id="box_8" class="box">8</div>
<div id="box_9" class="box">9</div>
</div>
</body>
</html>

Answer 7

Nadie aquí ha dado una solución de tabla todavía, y The Challenge trata sobre la comparación de diseños de CSS a diseños basados ​​en tabla en un escenario controlado (y muy sesgado).

Así que aquí está la solución Ted Lay Table y su desafío ...

"Con mi solución basada en tablas, es muy fácil agregar nuevos habitantes a las parcelas del jardín mediante simples adiciones al marcado HTML solamente. Todos los habitantes se centran automáticamente y se espacian en un estilo agradable. Por ejemplo:"

texto alternativo http://sontag.ca/gif/bluefish.gif alt text http://sontag.ca/gif/garden2.gif

"Por lo que puedo decir, ninguna solución basada en CSS aquí puede acomodar a nuevos habitantes sin grandes renovaciones a las reglas de CSS".

"Es mejor traer muchos niños con dinero, ahora me siento realmente hambriento y sediento".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Terrible Ted''s Table Layout</title>
<style type="text/css">
#master TD { text-align: center }
#master {
border: 1px solid black;
font: italic 100%/200% ''Comic Sans MS'', cursive;
}
#silver { background-color:silver }
#maroon { background-color: maroon; color:white }
#navy { background-color:navy; color:white }
#red { background-color: red }
#blue { background-color:blue; color:white }
#yellow { background-color: yellow }
#green { background-color:green; color:white }
#orange { background-color:orange }
#white { background-color:white }
#silver, #red, #green, #orange, #white { height: 35px }
#maroon, #navy, #blue, #yellow, #white { width: 35px }
</style>
</head>
<body style="background-color:#ffb600">
<table id="master" border="0" cellpadding="0" cellspacing="0"
summary="layoutByTable"><tr>
<td id="silver" colspan="2" > 1 </td>
<td id="maroon" rowspan="2" > 2 </td>
</tr><tr>
<td id="navy" rowspan="2" > 3 </td>
<td>
<table border="0" cellpadding="0" cellspacing="0"
summary="inner"><tr>
<td id="red" colspan="2" > 4 </td>
<td id="blue" rowspan="2" > 5 </td>
</tr><tr>
<td id="yellow" rowspan="2" > 6 </td>
<td id="white"> 7 </td>
</tr><tr>
<td id="green" colspan="2" > 8 </td>
</tr>
</table>
</td>
</tr><tr>
<td id="orange" colspan="2"> 9 </td>
</tr>
</table>
</body>
</html>

Answer 8

Siempre que los anchos y las alturas sean constantes, siempre se puede usar el posicionamiento absoluto para obtener el mismo efecto. Esto debería ser lo suficientemente obvio, para que no tenga que escribirlo (es tarde y soy flojo: P)

Answer 9

Solución de tabla única.

Ahora no me votes.

Sé que esta no es una respuesta a la pregunta original.
Publiqué esta respuesta porque el OP lo solicitó en un comentario a la pregunta original.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-language" content="en" />
<title>The Challenge</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" summary="">
<tr>
<td colspan="4" height="35" align="center" bgcolor="silver"><i>1</i></td>
<td rowspan="4" width="35" align="center" bgcolor="maroon"><i>2</i></td>
<td rowspan="5" valign="bottom"><img src="http://sontag.ca/gif/grinch.gif" width="41" height="122" alt="Dr. Suess''s Grinch"/></td>
</tr><tr>
<td rowspan="4" width="35" align="center" bgcolor="navy"><i>3</i></td>
<td colspan="2" height="35" align="center" bgcolor="red"><i>4</i></td>
<td rowspan="2" width="35" align="center" bgcolor="blue"><i>5</i></td>
</tr><tr>
<td rowspan="2" width="35" align="center" bgcolor="yellow"><i>6</i></td>
<td width="35" height="35" align="center"><i>7</i></td>
</tr><tr>
<td colspan="2" height="35" align="center" bgcolor="green"><i>8</i></td>
</tr><tr>
<td colspan="4" height="35" align="center" bgcolor="orange"><i>9</i></td>
</tr>
</table>
</body>
</html>

Es válido XHTML 1.0 Transitional y he incluido el personaje del Dr. Suess :)

Al Dr. Suess character , la declaración <?xml , las meta-tags y el atributo de summary , puede cortarlo a 929 caracteres y seguir siendo válido XHTML 1.0 Transitional.

Editar

Según lo solicitado, XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
BODY {background: orange}
#garden {border: 1px solid black; color: black}
#garden TD {
font: italic 100% ''Comic Sans MS'', cursive;
height: 35px;
padding: 0;
text-align: center;
width: 35px
}
#c1 {background: silver}
#c2 {background: maroon; color: white}
#c3 {background: navy; color: white}
#c4 {background: red}
#c5 {background: blue; color: white}
#c6 {background: yellow}
#c7 {background: white}
#c8 {background: green; color: white}
#c9 {background: orange}
</style>
</head>
<body>
<table id="garden" cellspacing="0">
<tr>
<td id="c1" colspan="4">1</td>
<td id="c2" rowspan="4">2</td>
</tr><tr>
<td id="c3" rowspan="4">3</td>
<td id="c4" colspan="2">4</td>
<td id="c5" rowspan="2">5</td>
</tr><tr>
<td id="c6" rowspan="2">6</td>
<td id="c7">7</td>
</tr><tr>
<td id="c8" colspan="2">8</td>
</tr><tr>
<td id="c9" colspan="4">9</td>
</tr>
</table>
</body>
</html>

970 caracteres que no son de espacios en blanco, fondo naranja, el Grinch del Dr. Suess eliminado.

Answer 10

Tomé un enfoque ligeramente diferente a las soluciones de "identificación de todo" que he visto hasta ahora. Esto viene en menos de 100 caracteres más que la solución basada en tablas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
position:absolute;
width:35px;
height:35px;
text-align:center;
line-height:35px
}
.spiral { width:175px; height:175px }
.t { top:0 }
.l { left:0 }
.r { right:0 }
.b { bottom:0 }
.w { width:140px }
.h { height:140px; line-height:140px }
.c {
top:35px;
left:35px;
width:105px;
height:105px
}
.c .w { width:70px }
.c .h { height:70px; line-height: 70px }
.c .c { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
<div class="t l w" style="background-color:silver">1</div>
<div class="t r h" style="background-color:maroon">2</div>
<div class="b l h" style="background-color:navy">3</div>
<div class="c">
<div class="t l w" style="background-color:red">4</div>
<div class="t r h" style="background-color:blue">5</div>
<div class="b l h" style="background-color:yellow">6</div>
<div class="c">7</div>
<div class="b r w" style="background-color:green">8</div>
</div>
<div class="b r w" style="background-color:orange">9</div>
</div>
</body>
</html>

Editar: En función de sus modificaciones, publico una solución ligeramente más detallada pero, con suerte, más clara que agrega un borde negro, establece texto en blanco y no posiciona absolutamente el "jardín".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
position:absolute;
width:35px;
height:35px;
text-align:center;
line-height:35px
}
div.spiral {
position:relative;
width:175px;
height:175px;
border: 1px solid #000
}
.top { top:0 }
.left { left:0 }
.right { right:0 }
.bottom { bottom:0 }
.wide { width:140px }
.tall { height:140px; line-height:140px }
.center {
top:35px;
left:35px;
width:105px;
height:105px
}
.center .wide { width:70px }
.center .tall { height:70px; line-height: 70px }
.center .center { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
<div class="top left wide" style="background-color:silver">1</div>
<div class="top right tall" style="background-color:maroon">2</div>
<div class="bottom left tall" style="background-color:navy;color:#fff">3</div>
<div class="center">
<div class="top left wide" style="background-color:red">4</div>
<div class="top right tall" style="background-color:blue">5</div>
<div class="bottom left tall" style="background-color:yellow">6</div>
<div class="center">7</div>
<div class="bottom right wide" style="background-color:green">8</div>
</div>
<div class="bottom right wide" style="background-color:orange">9</div>
</div>
</body>
</html>

Answer 11

alt texto http://sontag.ca/gif/catInHat.gif Primero hice este ejercicio hace más de 2 años cuando estaba aprendiendo HTML y CSS por primera vez. Mi primera solución fue como la que ves aquí, excepto sin los contenedores DIV anónimos. Luego obtuve esta idea para una página web que hacía una comparación lado a lado de CSS con una tabla para probar que CSS era mejor. Así que trabajé en la página The Challenge , la publiqué y luego publiqué esta pregunta.

Sam Hasler publicó una respuesta en minutos, al parecer, eso estuvo muy cerca. Pude ver que estaba en camino a una solución mejor que la que tenía. Todos sus divs estaban en orden, y los míos no. Jacco publicó un comentario preguntando por qué utilicé dos tablas anidadas cuando una haría. Él tenía razón también, por supuesto.

Así que tuve dos Homer Simpson "Doh!" momentos enseguida. Leo otras preguntas y respuestas en tablas frente a CSS. Alguien mencionó que las tablas se centran verticalmente. Mi respuesta tampoco se centró verticalmente, pero pensé que podría ser posible. El objetivo final, después de todo, es hacer todo lo que una mesa puede hacer y mejorar. Ya me había arrinconado en una esquina, parecía un tonto, así que tenía que encontrar una respuesta.

Eventualmente (estoy avergonzado de decir cuánto tiempo), se me ocurrió la solución a continuación. Luego pude cumplir con mi concepto original de una página web de comparación lado a lado.

Aquí hay una explicación de cómo funciona todo y por qué debería usar CSS

La respuesta de Charlie ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Charlie''s CSS layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#outer {
width:175px; height:175px;
text-align:center;
font: italic 100%/200% ''Comic Sans MS'', cursive;
border: 1px solid black;
}
#inner { width: 105px }
#outer>DIV, #inner>DIV { float:left }
#outer>DIV>DIV, #inner>DIV>DIV
{ display: table-cell; vertical-align: middle }
#c2 { clear: right }
#c3, #c6 { clear: left }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { height: 35px }
#c2>DIV, #c3>DIV, #c5>DIV, #c6>DIV, #c7>DIV { width: 35px }
#c2>DIV, #c3>DIV { height: 140px }
#c1>DIV, #c9>DIV { width: 140px }
#c5>DIV, #c6>DIV { height: 70px }
#c4>DIV, #c8>DIV { width: 70px }
#c2, #c6, #c7, #c8, #c9 { position:relative; top:-35px }
#c9 { left: 35px }
#c1 { background-color: silver }
#c2 { background-color: maroon; color: white }
#c3 { background-color: navy; color: white }
#c4 { background-color: red }
#c5 { background-color: blue; color: white }
#c6 { background-color: yellow }
#c7 { background-color: white }
#c8 { background-color: green; color: white }
#c9 { background-color: orange }
/* these rules are a HACK to center vertically in IE7 */
#outer>DIV>DIV, #inner>DIV>DIV { position:relative; }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { top: 10% }
#c5>DIV { top: 0% }
#c6>DIV { top: 30% }
#c2>DIV { top: 0% }
#c3>DIV { top: 15% }
</style>
</head>
<body>
<div id="outer">
<div id="c1"><div> 1 </div></div>
<div id="c3"><div>3<br/>3<br/>3</div></div>
<div id="inner">
<div id="c4"><div> 4 </div></div>
<div id="c5"><div> 5<br/>5 </div></div>
<div id="c6"><div> 6 </div></div>
<div id="c7"><div> 7 </div></div>
<div id="c8"><div> 8 </div></div>
</div>
<div id="c2"><div> 2<br/>2<br/>2<br/>2 </div></div>
<div id="c9"><div> 9 9 9</div></div>
</div>
</body>
</html>

Answer 12

Actualización: edición final. Se cambió a STRICT DTD, se eliminó la cursiva para que coincida con la imagen de la pregunta y se volvieron a los nombres de colores completos para que los id muestren la intención según el comentario de OP en la pregunta, y se ordenó la columna principal de nombres de identificación en el orden en que aparecen en el html

También opté por no reutilizar el div externo como el 7 cuadrado blanco (no tenía su propio div en ediciones anteriores ), ya que no hubiera sido práctico si querías usar el diseño, y sentí un poco como hacer trampa (aunque desde un punto de vista perfecto de brevedad / píxel me gustó su descaro).

Ver aquí: http://jsbin.com/efidi
Edite aquí: http://jsbin.com/efidi/edit
Valida como estricto XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Challenge</title>
<style type="text/css">
div { text-align: center; width:175px; height:175px; line-height: 35px;}
div div { float:left; width: 35px; height: 35px;}
#orange, #maroon,
#blue , #green {float:right;}
#orange, #silver {background-color:silver; width:140px;}
#navy , #maroon {background-color:maroon; height:140px; line-height:140px;}
#navy {background-color:navy ;}
#green , #red {background-color:red ; width: 70px;}
#yellow, #blue {background-color:blue ; height: 70px; line-height: 70px;}
#yellow {background-color:yellow;}
#white {background-color:white ;}
#green {background-color:green ;}
#orange {background-color:orange;}
</style>
</head>
<body>
<div>
<div id="silver">1</div>
<div id="maroon">2</div>
<div id="navy" >3</div>
<div id="red" >4</div>
<div id="blue" >5</div>
<div id="yellow">6</div>
<div id="white" >7</div>
<div id="green" >8</div>
<div id="orange">9</div>
</div>
</body></html>

Aparte: quizás pondría un poco más de espacio en blanco si pudiera, pero esto está en el límite antes de que los bloques de código aquí en SO comiencen a obtener barras de desplazamiento y opté por que todo aparezca en la pantalla.

Nota: tomé prestada la corrección de line-height de Tyson (que fue el primero en obtener una respuesta de representación correcta).