2009-10-06 39 views
6

Me gustaría preguntar cuál es la mejor manera de especificar el ancho de columna HTML? el atributo de ancho o el atributo de estilo? Suponiendo que estoy usando IE 6. ¿IE representa mejor el atributo de ancho que el estilo?¿Cuál es la mejor manera de especificar el ancho de columna fija HTML (ancho o atributo de estilo)

Por atributo width

<table width="900"> 
    <tr> 
     <td width="450">A</td> 
     <td colspan="2" width="450">B&C</td> 
    </tr> 
    .... 
</table> 

o por Atributos estilo

<table style="width:900px;"> 
    <tr> 
     <td style="width: 450px;">A</td> 
     <td colspan="2" style="width: 450px;">B&C</td> 
    </tr> 
    .... 
</table> 

Respuesta

14

En primer lugar antes de responder a su pregunta, algo que usted debe saber es cómo se generan las tablas, experimentar con el estilo de tabla de diseño fijo para el elemento de tabla:

Si el navegador conoce el ancho de la primera fila de filas de la tabla por adelantado (si proporciona el estilo fijo de diseño de tabla en la tabla) el el navegador puede comenzar a mostrar la parte superior de la tabla incluso antes de calcular el ancho de las filas resultantes. ¿Lo que esto significa? Las tablas pobladas por llamadas Ajax con un diseño fijo pueden comenzar a mostrar los resultados a un usuario antes de que finalice la llamada completa de Ajax. La mejor manera de pensar en esto es como un jpg progresivo. Al final sus páginas parecerán cargar más rápido.

table 
{ 
table-layout:fixed; 
} 

Ahora para responder a su pregunta.

En realidad ninguno de los dos ejemplos que proporcionó es correcto. por lo general, no establece ancho en una celda que se extiende a través de 2 o más celdas. En cualquier tabla, es una buena idea crear al menos 1 fila con todas las celdas, esto puede estar en el TH o (justo como me gusta hacerlo en un tr en blanco.

Por ejemplo ...

<table> 
<tr> 
<td width="450"></td> 
<td width="225"></td> 
<td width="225"></td> 
</tr> 
<tr> 
<td>content here</td> 
<td colspan="2">content here</td> 
</tr> 
</table> 

cualquiera que sea la forma que decida usar el estilo o el ancho html simplemente estándar, la elección es suya, pero al final usted debe tener su primera fila (si disposición de la tabla es fijo) o cualquier fila (si disposición de la tabla es no fijo) para contener la definición de ancho para cada celda invidivual. Esto también lo ayudará a planificar la tabla de aspecto correcto, espero que esto ayude.

Pruebe la disposición de la tabla ed, creando una enorme tabla de filas como 10 000, y prueba la velocidad de renderizado frente a un diseño de tabla no fijo.

Todo el debate sobre HTML 4 vs XHTML, estilo vs atributos, creo que es realmente una cuestión de mantenibilidad. No creo que haya nada incorrecto al establecer el ancho usando Style o ancho simple con HTML 4 transitional, ambos hacen lo mismo. La razón por la que puedes hacer ambas cosas es porque el HTML ha evolucionado un poco, ¡sí puede ser complicado! Buena suerte

+0

¡Hola, gracias! No sabía eso sobre el diseño de la mesa: arreglado. –

3

Solo agregue <div> etiqueta dentro de <td> o <th> definir ancho dentro de <div>. Esto te ayudara. Nada más funciona

por ejemplo.

<td><div style="width: 50px" >...............</div></td> 
+1

Hola y bienvenido a nuestro sitio. No envíe spam a preguntas antiguas con respuestas aceptadas con respuestas duplicadas, como esta ^^^ y [this] (http://stackoverflow.com/a/10474800/419). Si está haciendo eso, entonces es posible que ambas preguntas sean duplicadas, así que marque como tal. En estos casos, el problema está felizmente resuelto, así que a menos que tengas algo radicalmente nuevo que agregar, te sugiero que hagas preguntas nuevas y sin respuesta. Gracias. – Kev

Cuestiones relacionadas