Tablas en CSS

Impact · #1 (**permalink**) 24/07/2010, 15:27

Hola a todos.
Estoy realizando un sitio.

He sacado algunos recursos de algunos templates y me encontrado con que los atributos "Height" "Width" no son válidos y hay que usar CSS

El sitio

Cita:

http://www.coffeebreak.cl

Los errores

Cita:

Line 91, Column 30: there is no attribute "height"

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

Cita:

Line 93, Column 28: there is no attribute "width"

<td class="c1" width="50%" alt="separador"><img src="images/spacer.gif" /…

Cita:

Line 95, Column 43: there is no attribute "height"

<td valign="top" width="766" height="700" background="images/bot_bg.jpg">

Cita:

Line 95, Column 60: there is no attribute "background"

<td valign="top" width="766" height="700" background="images/bot_bg.jpg">

Cita:

Line 97, Column 9: there is no attribute "background"

"images/bg.jpg" class="c4">

El código

Cita:

<!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>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<link rel="shortcut icon" href="http://www.coffeebreak.cl/favicon.ico" type=
"image/x-icon" />
<link rel="icon" href="http://www.coffeebreak.cl/favicon.ico" type="image/x-icon" />
<script type="text/javascript">
//<![CDATA[

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11008817-2']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

//]]>
</script>
<script type="text/javascript" src="highslide/highslide-with-gallery.js">
</script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8">
</script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

<title>Coffeebreak.cl - Servicios de coffee break para empresas en santiago.</title>
<meta name="subject" content="Negocios, Coffee Break, empresas" />
<meta name="Description" content=
"Empresa dedicada a prestar servicios de coffee break a domicilio. Garzones y personal calificado para prestar el mejor servicio. Arriendo de vajilla." />
<meta name="Classification" content="Coffee break, garzones y vajilla." />
<meta name="Keywords" content=
"coffee break, cocteleria, cafe, garzones, productos, arriendo de vajilla, empresas, servicio" />
<meta name="Geography" content="Santiago, las condes, vitacura, providencia" />
<meta name="Language" content="EspaÃ±ol" />
<meta name="distribution" content="Global" />
<meta name="robots" content="noydir" />
<meta name="country" content="Chile" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
td.c6 {background-color: #B1AA97}
td.c5 {background-color: #B2AA97}
table.c4 {background-repeat:no-repeat}
td.c3 {background-color: white}
div.c2 {clear:both}
td.c1 {background-color: #ABA490}
/*]]>*/
</style>
</head>

<body>

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="c1" width="50%" alt="separador"><img src="images/spacer.gif" /></td>

<td valign="top" width="766" height="700" background="images/bot_bg.jpg">
<table width="766" border="0" cellpadding="0" cellspacing="0" background=
"images/bg.jpg" class="c4">
<tr>
<td width="131" height="700"><img src="images/spacer.gif"/></td>

<td width="527" height="700" valign="top">
<table width="527" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="16"> </td>
</tr>

<tr>
<td width="527" height="676" alt="separador" valign="top"><table width="527" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/left_bg.jpg"><img src="images/left.jpg"
width="4" height="676" alt="" /></td>

<td class="c3" width="519" height="676" valign="top" alt="">
<p class="Estilo12"> </p>
</td>

<td background="images/right_bg.jpg"><img src="images/right.jpg"
width="4" height="676" alt="" /></td>
</tr>
</table>
</td>
</tr>

<tr>
<td><img src="images/bot.jpg" width="527" height="14" alt="" /></td>
</tr>
</table>
</td>

<td width="108" height="700" alt="separador"><img src=
"images/spacer.gif" /></td>
</tr>
</table>
</td>

<td class="c5" width="50%"><img src="images/spacer.gif" /></td>
</tr>

<tr>
<td class="c1" width="50%"><img src="images/spacer.gif" /></td>

<td width="766" height="100%" background="images/bot_bg.jpg"><img src=
"images/spacer.gif" width="766" height="1" /></td>

<td class="c6" width="50%"><img src="images/spacer.gif" /></td>
</tr>
</table>
</body>
</html>

Como podré mantener estéticamente el sitio igual usando CSS?
Hasta ahora no lo he podido lograr.
Les ruego me puedan ayudar o guíar de alguna manera.

Muchas gracias

Carlangueitor · #2 (**permalink**) 24/07/2010, 15:59

Una forma sencilla de validar ese sitio sería cambiando el doctype, podrías usar HTML 4 o XHTML 1.0 Transitional.

Ahora, pasar un sitio a css desde tablas no es nada más un código de copia y pega tendrás que leer un poco sobre el tema, puedes empezar con la guía de Mikmoro: http://www.forosdelweb.com/f53/aport...ml-css-648073/

También puedes validar ese sitio con ese doctype, solo pasa los atributos a una hoja externa, agregando clases o id.

Saludos

zerokilled · #3 (**permalink**) 24/07/2010, 16:17

resulta que el atributo width esta admitido en el dtd xhtml strict, pero no el height.

Código:

<!ATTLIST table
  %attrs;
  summary     %Text;         #IMPLIED
  width       %Length;       #IMPLIED
  border      %Pixels;       #IMPLIED
  frame       %TFrame;       #IMPLIED
  rules       %TRules;       #IMPLIED
  cellspacing %Length;       #IMPLIED
  cellpadding %Length;       #IMPLIED
  >

solo lo digo por comentarlo pero de todos modos es mucho mejor controlarlo desde css.

Carlangueitor · #4 (**permalink**) 24/07/2010, 16:24

La etiqueta table si, pero no td:

Código:

<!ATTLIST td
  %attrs;
  abbr        %Text;         #IMPLIED
  axis        CDATA          #IMPLIED
  headers     IDREFS         #IMPLIED
  scope       %Scope;        #IMPLIED
  rowspan     %Number;       "1"
  colspan     %Number;       "1"
  %cellhalign;
  %cellvalign;
  >

Saludos

zerokilled · #5 (**permalink**) 24/07/2010, 16:30

claro maestro, vale la aclaracion! fue que solo lei el comentario y el primer error pero no el resto.

me pasa por no leer todo como es debido.

Impact · #6 (**permalink**) 24/07/2010, 19:18

gracias a todos, lo he intentado con etiquetas me quedo igual